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）詳情諮詢：[email protected] 歡迎打擾；
3）如有不足之處，提出必改正；
4）有興趣的可以fork()；
5）後續內容：客戶端/服務器端狀態保持機制 [cookie, session]；
6）謝謝閱讀，阿里嘎多！