AJAX是一種在無需刷新整個頁面的情況下，通過異步請求服務(wù)器數(shù)據(jù)并動態(tài)更新網(wǎng)頁內(nèi)容的技術(shù)。在使用JSP進(jìn)行數(shù)據(jù)庫查詢顯示時，AJAX可以大大提升用戶體驗，讓數(shù)據(jù)查詢更加快速和高效。通過以下例子，我們將演示如何使用AJAX和JSP進(jìn)行數(shù)據(jù)庫查詢并動態(tài)顯示結(jié)果。

假設(shè)我們有一個學(xué)生管理系統(tǒng)，其中包含一個學(xué)生列表頁面，我們希望能夠在查詢學(xué)生時不刷新整個頁面，并實(shí)時顯示結(jié)果。首先，我們需要創(chuàng)建一個數(shù)據(jù)庫表格，包含學(xué)生的姓名、學(xué)號和年齡等信息。

<table>
<tr>
<th>學(xué)號</th>
<th>姓名</th>
<th>年齡</th>
</tr>
<tbody id="studentTable">
<!-- 這里將使用AJAX動態(tài)更新數(shù)據(jù) -->
</tbody>
</table>

接下來，我們需要創(chuàng)建一個用于查詢學(xué)生的JSP文件，例如"queryStudent.jsp"。在這個文件中，我們首先創(chuàng)建數(shù)據(jù)庫連接并查詢數(shù)據(jù)，然后將查詢結(jié)果以JSON格式返回給前端。

<%@ page language="java" contentType="application/json; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.sql.*, java.util.*, org.json.simple.JSONObject, org.json.simple.JSONArray"%>
<%
// 創(chuàng)建數(shù)據(jù)庫連接
Connection conn = null;
Statement stmt = null;
ResultSet rs = null;
try {
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/student", "root", "password");
stmt = conn.createStatement();
// 查詢學(xué)生數(shù)據(jù)
rs = stmt.executeQuery("SELECT * FROM student");
// 將查詢結(jié)果轉(zhuǎn)換為JSON
JSONArray studentArray = new JSONArray();
while (rs.next()) {
JSONObject studentObject = new JSONObject();
studentObject.put("學(xué)號", rs.getString("學(xué)號"));
studentObject.put("姓名", rs.getString("姓名"));
studentObject.put("年齡", rs.getString("年齡"));
studentArray.add(studentObject);
}
// 將JSON結(jié)果輸出給前端
out.print(studentArray.toJSONString());
} catch (Exception e) {
out.print(e.getMessage());
} finally {
// 關(guān)閉數(shù)據(jù)庫連接
if (rs != null) rs.close();
if (stmt != null) stmt.close();
if (conn != null) conn.close();
}
%>

現(xiàn)在，我們的后端代碼已經(jīng)準(zhǔn)備好了，接下來是前端代碼部分。我們將使用JavaScript和AJAX發(fā)送異步請求，并動態(tài)更新學(xué)生列表。在JavaScript代碼中，我們使用XMLHttpRequest對象來發(fā)送GET請求，獲取后端返回的JSON數(shù)據(jù)，并將其轉(zhuǎn)換為HTML字符串，然后將結(jié)果插入到表格中。

<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var studentData = JSON.parse(this.responseText);
// 清空表格內(nèi)容
document.getElementById("studentTable").innerHTML = "";
// 動態(tài)生成學(xué)生列表
for (var i = 0; i < studentData.length; i++) {
var student = studentData[i];
var row = "<tr><td>" + student.學(xué)號 + "</td><td>" + student.姓名 + "</td><td>" + student.年齡 + "</td></tr>";
document.getElementById("studentTable").insertAdjacentHTML('beforeend', row);
}
}
};
xhttp.open("GET", "queryStudent.jsp", true);
xhttp.send();
</script>

通過以上代碼，我們完成了前后端的集成。當(dāng)我們在學(xué)生列表頁面點(diǎn)擊查詢按鈕時，JavaScript將發(fā)送AJAX請求到后端的"queryStudent.jsp"文件，后端將查詢數(shù)據(jù)庫并將結(jié)果返回給前端，然后前端通過JavaScript將結(jié)果動態(tài)插入到表格中，實(shí)現(xiàn)了無刷新的數(shù)據(jù)庫查詢顯示功能。

通過以上示例，我們可以看到使用AJAX和JSP進(jìn)行數(shù)據(jù)庫查詢顯示是非常簡單和高效的。它不僅提升了用戶的體驗，還減輕了服務(wù)器的負(fù)擔(dān)，提高了系統(tǒng)的性能。無論是學(xué)生管理系統(tǒng)還是其他的數(shù)據(jù)庫查詢應(yīng)用，AJAX和JSP的組合可以為用戶帶來更好的體驗和更高效的數(shù)據(jù)處理。