AJAX（Asynchronous JavaScript and XML）二級聯動是一種常用于動態網頁開發的技術，通過在頁面中使用JavaScript和XMLHttpRequest對象來實現數據的異步交互和更新。在開發過程中，我們經常會遇到需要在一個下拉菜單中選擇一個選項，然后根據所選選項的不同，從數據庫或其他數據源獲取相應的數據并顯示在另一個下拉菜單中的情況。本文將介紹如何使用僅JSP來實現這種二級聯動效果。

假設我們有一個簡單的數據庫，其中存儲著各個省份和城市的信息。我們的目標是在網頁中，選擇一個省份后，自動獲取該省份的城市，并將其顯示在下一個下拉菜單中。

首先，我們需要在JSP頁面中定義兩個下拉菜單，一個用于選擇省份，另一個用于顯示相應的城市：

<select name="province" id="province">
<option value="0">請選擇</option>
<option value="1">廣東省</option>
<option value="2">浙江省</option>
<option value="3">江蘇省</option>
</select>
<select name="city" id="city">
<option value="0">請選擇</option>
</select>

接下來，我們需要編寫JavaScript函數，當選擇省份時觸發該函數，從服務器獲取對應的城市數據，并更新城市下拉菜單的選項：

<script type="text/javascript">
function getCities() {
var provinceSelect = document.getElementById("province");
var citySelect = document.getElementById("city");
var provinceId = provinceSelect.value;
// 創建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 設置回調函數，在接收到響應時執行
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// 解析服務器返回的JSON數據
var cities = JSON.parse(xhr.responseText);
// 清空城市下拉菜單的選項
citySelect.innerHTML = "";
// 添加新的選項
for (var i = 0; i< cities.length; i++) {
var option = document.createElement("option");
option.value = cities[i].id;
option.text = cities[i].name;
citySelect.appendChild(option);
}
}
};
// 發送請求
xhr.open("GET", "get_cities.jsp?provinceId=" + provinceId, true);
xhr.send();
}
</script>

在上述代碼中，我們首先通過document.getElementById方法獲取到省份和城市兩個下拉菜單的DOM對象。然后，獲取已選擇省份的值。接下來，創建XMLHttpRequest對象，設置其onreadystatechange屬性為一個回調函數。當服務器返回響應時，該函數將在readyState為4且status為200時被調用。在回調函數中，我們先解析JSON格式的城市數據，然后清空城市下拉菜單，并根據數據添加新的選項。最后，我們通過open方法設置請求的URL和參數，并通過send方法發送請求。

最后，我們需要創建一個用于處理請求的JSP頁面，該頁面根據省份ID查詢數據庫并返回對應的城市數據：

<%@ page contentType="application/json;charset=UTF-8" language="java" %><%@ page import="java.io.*" %><%@ page import="java.sql.*" %><%
String provinceId = request.getParameter("provinceId");
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
try {
// 連接數據庫
Class.forName("com.mysql.jdbc.Driver");
String url = "jdbc:mysql://localhost:3306/test";
String username = "root";
String password = "password";
conn = DriverManager.getConnection(url, username, password);
// 查詢城市數據
String sql = "SELECT id, name FROM city WHERE province_id = ?";
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, provinceId);
rs = pstmt.executeQuery();
// 構建JSON數組
JSONArray cities = new JSONArray();
while (rs.next()) {
JSONObject city = new JSONObject();
city.put("id", rs.getString("id"));
city.put("name", rs.getString("name"));
cities.add(city);
}
// 輸出JSON數據
response.setContentType("application/json;charset=UTF-8");
PrintWriter out = response.getWriter();
out.println(cities.toJSONString());
} catch (Exception e) {
e.printStackTrace();
} finally {
try {
if (rs != null) rs.close();
if (pstmt != null) pstmt.close();
if (conn != null) conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
%>

在上述JSP頁面中，我們首先獲取請求中傳遞的省份ID參數。然后，連接數據庫并查詢對應的城市數據。查詢結果使用JSONArray和JSONObject對象構建為JSON格式的數據，并通過response對象的getWriter方法將其輸出到客戶端。

通過以上步驟，我們實現了一個簡單的僅JSP的AJAX二級聯動效果。當選擇一個省份時，頁面將自動獲取該省份的城市數據并更新城市下拉菜單。