AJAX技術是一種在網頁中進行異步通信的方法，可以使網頁無需刷新就能與服務器數據進行交互。在使用AJAX技術中，JSP可以作為服務器端的腳本語言，通過讀取數據庫中的數據，并以JSON/XML等格式返回給前端，實現了動態更新網頁內容的效果。本文將詳細介紹如何使用AJAX中的JSP讀取數據庫中的數據，并通過具體示例加以說明。

首先，我們需要創建一個數據庫并在其中插入一些數據，如下所示：

CREATE DATABASE mydatabase;
USE mydatabase;
CREATE TABLE mytable (
id INT PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(50) NOT NULL,
age INT NOT NULL
);
INSERT INTO mytable (name, age) VALUES ('張三', 20);
INSERT INTO mytable (name, age) VALUES ('李四', 25);
INSERT INTO mytable (name, age) VALUES ('王五', 30);

接下來，我們創建一個JSP文件（例如getdata.jsp），用于讀取數據庫中的數據并返回給前端。首先，我們需要在JSP文件中連接數據庫：

<%@ page import="java.sql.*" %><%
// 連接數據庫
Class.forName("com.mysql.jdbc.Driver");
Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/mydatabase", "username", "password");
%>

然后，我們可以執行SQL查詢語句，讀取數據庫中的數據，并將其封裝為JSON格式的字符串：

<%
Statement stmt = conn.createStatement();
ResultSet rs = stmt.executeQuery("SELECT * FROM mytable");
JSONArray jsonArray = new JSONArray();
while (rs.next()) {
JSONObject jsonObject = new JSONObject();
jsonObject.put("name", rs.getString("name"));
jsonObject.put("age", rs.getInt("age"));
jsonArray.put(jsonObject);
}
String jsonData = jsonArray.toString();
rs.close();
stmt.close();
conn.close();
%>

最后，我們將這個JSON格式的數據作為響應返回給前端頁面：

<%
out.print(jsonData);
%>

在前端頁面中，我們可以使用AJAX技術發送一個GET請求到getdata.jsp，并通過回調函數來處理返回的JSON數據：

<script>
function getData() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var data = JSON.parse(this.responseText);
// 處理數據
}
};
xhttp.open("GET", "getdata.jsp", true);
xhttp.send();
}
</script>

通過以上步驟，我們就可以通過AJAX中的JSP讀取數據庫中的數據，并將其顯示在前端頁面上。例如，我們可以在回調函數中將數據插入到HTML表格中：

<table id="data-table">
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
function getData() {
// ...
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var data = JSON.parse(this.responseText);
var tableBody = document.getElementById("data-table").getElementsByTagName("tbody")[0];
for (var i = 0; i < data.length; i++) {
var row = tableBody.insertRow(i);
var cell1 = row.insertCell(0);
cell1.innerHTML = data[i].name;
var cell2 = row.insertCell(1);
cell2.innerHTML = data[i].age;
}
}
};
// ...
}
</script>