Java -- Ajax异步访问数据库内容

以上篇博文源码为样例fork，介绍Ajax异步访问数据信息，以下为新增内容

---

1. 控制层control() – 新增内容

/*
URL: .\control\QueryBookServlet.java；
方法用法：根据BookId查询Book是否在册；*/

package control;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.json.JSONArray;

import datasource.ThreadLocalData;
import entity.Book;

import service.IBookService;
import service.impl.BookServiceImpl;
@SuppressWarnings("serial")
public class QueryBookServlet extends HttpServlet {
    public void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        /* 修改request和response编码格式 */
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        /* 绑定BookId */
        int id = Integer.parseInt(request.getParameter("bookid"));

        /* ThreadLocal线程池实现多用户并发访问 */
        IBookService bookService;
        if (ThreadLocalData.threadLocalBookService.get() == null) {
            bookService = new BookServiceImpl();
            ThreadLocalData.threadLocalBookService.set(bookService);
        }
        bookService = ThreadLocalData.threadLocalBookService.get();
        /* queryBookById()方法返回一个泛型ArrayList<Book>对象 */
        Book book = bookService.queryBookById(id);

        /* 获取json字符串 */
        ArrayList<Book> books = new ArrayList<Book>();
        books.add(book);
        /* Json数据规格化 */
        JSONArray jsonBooks = new JSONArray(books);
        System.out.println(jsonBooks.toString());
        out.println(jsonBooks.toString());

        out.flush();
        out.close();
    }
}

---

2.数据访问层dao – 新增内容

/*
URL：.\dao\impl\BookDaoImpl.java
新增泛型Book的queryBookById方法
作用：返回指定查询书本内容
*/
package dao.impl;

import dao.BaseDao;
import entity.Book;
import dao.IBookDao;

import java.sql.SQLException;
import java.util.ArrayList;
public class BookDaoImpl extends BaseDao implements IBookDao {

    @Override
    /*queryBookById方法接口实现*/
    public Book queryBookById(int id) {
        Book book = null;
        String sql = "select * from tbook where id=?";
        /*sql预处理，占位符处理*/
        getPreparedStatement(sql);
        try {
            pstmt.setInt(1, id);
            rs = pstmt.executeQuery();
            /* 循环取出数据 */
            while (rs.next()) {
                int bid = rs.getInt("id");
                String name = rs.getString("name");
                String author = rs.getString("author");
                String publisherval = rs.getString("publisher");
                int price = rs.getInt("price");
                book = new Book(bid, name, author, publisherval, price);
            }

        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            close();
        }
        /* 返回book数据对象 */
        return book;
    }
}

/*
URL：.\dao\IBookDao.java
声明新增接口方法*/

package dao;

import java.util.ArrayList;

import entity.Book;

public interface IBookDao {

    public Book queryBookById(int id);

}

---

3.业务逻辑层servce – 新增内容

/*
URL:.\servce\impl\BookServiceImpl.java
重写函数方法;
*/
package service.impl;

import java.util.ArrayList;

import dao.IBookDao;
import dao.impl.BookDaoImpl;
import datasource.ThreadLocalData;

import entity.Book;

import service.IBookService;

public class BookServiceImpl implements IBookService {
    @Override

    /* 通过ID号查询书籍内容 */
    public Book queryBookById(int id) {
        IBookDao bookDao;
        /* ThreadLocal线程池实现多线程多用户访问 */
        if (ThreadLocalData.threadLocalBookDao.get() == null) {
            bookDao = new BookDaoImpl();
            ThreadLocalData.threadLocalBookDao.set(bookDao);

        }
        bookDao = ThreadLocalData.threadLocalBookDao.get();
        /* 返回bookDao的json对象内容 */
        return bookDao.queryBookById(id);

    }
}

---

.\WebRoot\MyAjax.jsp – 新增内容

<!--
URL：.\WebRoot\MyAjax.jsp
测试方法是否有效
Jquery和纯JS实现ajax引擎异步访问方法
-->

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'MyAjax.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->

</head>

<body>
    <br> 请输入书的编号:
    <input type="text" id="bookid" name="bookid">
    <button id="btn" onclick="queryBookById()">纯JS查询</button>
    <button id="jqbtn">使用JQuery查询</button>
    <script type="text/javascript" src="jquery-3.0.0.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#jqbtn").click(function() {
                $.ajax({
                    url : "QueryBookServlet", //目标地址
                    type : "POST",  //ajax发送方法
                    async : true,  //异步
                    dataType : "json",  //返回数据格式json
                    data : { //发送的数据内容
                        "bookid" : $("#bookid").val()
                    },
                    success : function(data) {  //执行成功后返回的内容
                        alert(data[0].name);
                    },
                    error : function() {  //执行失败返回的内容
                        alert("is error");
                    }
                });

            });

        });
    </script>

    <script type="text/javascript">
        var xmlhttp;
        /* 创建Ajax引擎方法 + 向下兼容IE */
        function getXmlHttpRequest() {
            if (window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            } else {
                // code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
        }

        /* 通过书籍ID号查询 -- post方法 */
        function queryBookById() {
            //alert("Success");
            /* 创建Ajax引擎 */
            getXmlHttpRequest();
            /* 请求打开设置访问属性 + 设置异步访问 */
            xmlhttp.open("POST", "QueryBookServlet", true);
            /* 设置属性 */
            xmlhttp.setRequestHeader("content-type",
                    "application/x-www-form-urlencoded");
            /* 回调返回请求 + 设置 */
            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    var text = xmlhttp.responseText;
                    /* 将得到的text（json）字符串转换成json对象 + 规格化操作 */
                    var jsonary = eval("(" + text + ")");
                    for ( var i in jsonary) {
                        alert(jsonary[i].name);
                    }
                }
            };
            /* Ajax请求发送前执行函数 == 实例化 */
            xmlhttp.send("bookid=" + bookid.value);
        }

    </script>
</body>
</html>

数据库内容

create database MyDB

create table tbook(
    id int primary key,
    name varchar(30),
    author varchar(30),
    publisher varchar(30),
    price int
)

insert into tbook values(1,'灿烂千阳','胡赛德','四川师范大学出版社',35)
insert into tbook values(2,'世纪旅人','安德烈斯·纽曼','湖南师范大学出版社'，45)

Result：请服用后自行测试，谢谢

小结：

1）服用方式：结合前篇博文一起服用，记得参考思维导图，效果更佳；
2）详情咨询：369575409@qq.com 欢迎打扰；
3）如有不足之处，提出必改正；
4）有兴趣的可以fork()；
5）后续内容：客户端/服务器端状态保持机制 [cookie, session]；
6）谢谢阅读，阿里嘎多！