AJAX（Asynchronous JavaScript and XML）是一種用于創建動態網頁的技術，通過在后臺與服務器交換數據，實現在不重新加載整個網頁的情況下更新部分網頁內容，提升用戶體驗。JSON（JavaScript Object Notation）是一種輕量級的數據交換格式，常用于將數據從服務器傳遞給前端。JSP（JavaServer Pages）是一種在服務器端生成動態網頁的技術。本文將介紹如何使用AJAX、JSON和JSP實現動態網頁的開發。

假設我們正在開發一個電子商務網站，在商品詳情頁中，需要實時顯示當前商品的庫存量。傳統做法是在用戶進入詳情頁時，從服務器獲取庫存量并顯示在網頁上。然而，這種做法每次都需要重新加載整個網頁，給用戶帶來不必要的等待時間。使用AJAX、JSON和JSP可以實現只更新庫存量的部分網頁內容，節省用戶等待的時間。

<script>
function updateStock() {
// 使用AJAX發送請求到服務器
var xhr = new XMLHttpRequest();
xhr.open("GET", "/getStock.jsp", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
// 從響應中解析JSON數據
var response = JSON.parse(xhr.responseText);
var stock = response.stock;
// 更新網頁中的庫存量
document.getElementById("stock").innerText = stock;
}
}
};
xhr.send();
}
// 頁面加載后立即調用updateStock函數
window.onload = updateStock;
</script>

上述代碼中，我們定義了一個updateStock函數，該函數通過AJAX發送GET請求到服務器的getStock.jsp頁面。服務器通過JSP生成一個JSON響應，其中包含商品的庫存量。在前端，我們使用XMLHttpRequest對象發送請求并監聽onreadystatechange事件。當請求的狀態變為XMLHttpRequest.DONE（即請求完成）時，我們檢查響應的狀態碼是否為200。如果是200，表示請求成功，我們從響應中解析出JSON數據，并更新網頁中的庫存量。

接下來，我們需要創建getStock.jsp頁面，該頁面根據商品ID查詢庫存量，并以JSON格式返回。

<%@
page language="java" contentType="application/json"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String productId = request.getParameter("productId");
int stock = getStock(productId); // 假設有一個函數可以根據商品ID查詢庫存量
// 創建一個JSON對象
JSONObject json = new JSONObject();
json.put("stock", stock);
// 設置響應的內容類型為JSON
response.setContentType("application/json");
// 將JSON對象作為響應返回
response.getWriter().write(json.toString());
%>

在getStock.jsp頁面中，我們首先獲取前端傳遞的商品ID參數。然后，通過調用一個函數getStock獲取該商品的庫存量。接著，我們創建一個JSONObject對象，將庫存量存入其中，并設置響應的內容類型為JSON。最后，我們將JSON對象作為響應返回給前端。

通過使用AJAX、JSON和JSP，我們可以實現在不重新加載整個網頁的情況下，動態更新網頁上的部分內容。這種技術不僅提升了用戶的體驗，而且減少了網絡帶寬的使用。在實際的網頁開發中，我們可以將AJAX與JSON和JSP結合起來，實現更加靈活和高效的動態網頁。