隨著互聯網的發展，前端技術的不斷創新，AJAX（Asynchronous JavaScript and XML）已經成為了開發 Web 應用程序的重要技術之一。AJAX 允許在不刷新整個頁面的情況下，通過與服務器進行異步通信，獲取服務器端返回的數據，然后將數據動態地呈現在頁面上。在 Web 開發中，經常需要將后端處理的數據傳遞給 JSP 頁面進行呈現。本文將探討如何使用 AJAX 將數據傳遞給 JSP 頁面，并提供實例代碼進行示范。

假設一個場景，我們正在開發一個在線購物網站。當用戶點擊某個商品的 "查看詳情" 按鈕時，頁面上應該彈出一個模態框，顯示該商品的詳細信息。這種情況下，我們可以使用 AJAX 技術將商品的詳細信息從服務器傳遞給 JSP 頁面進行展示。

首先，我們需要在 JSP 頁面中準備一個用于展示商品詳細信息的區域，可以使用一個 `div` 元素作為容器。然后，我們編寫 JavaScript 代碼，使用 AJAX 進行異步通信獲取服務器端數據，并將數據展示在 JSP 頁面內。下面是一個基本的示例：

// JavaScript 代碼
function getProductDetails(productId) {
// 創建 XMLHttpRequest 對象
var xhr = new XMLHttpRequest();
// 設置回調函數，當 AJAX 請求狀態發生改變時會觸發該函數
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 在這里處理服務器端返回的數據
var product = JSON.parse(xhr.responseText);
// 將商品詳細信息展示在 JSP 頁面上
document.getElementById("product-details").innerHTML = product.description;
}
};
// 發送 AJAX 請求
xhr.open("GET", "getProductDetails.jsp?productId=" + productId, true);
xhr.send();
}

上述示例中的 `getProductDetails` 函數用于獲取指定商品的詳細信息。它接受一個參數 `productId`，表示要查看的商品的唯一標識符。首先，我們創建一個 `XMLHttpRequest` 對象，它是 AJAX 通信的核心。然后，我們通過設置 `onreadystatechange` 回調函數來監聽 AJAX 請求狀態的變化。

在回調函數中，當 AJAX 請求的 `readyState`（就緒狀態）發生變化且狀態為 4（請求已完成且響應已就緒）時，我們使用 `responseText` 屬性來獲取服務器端返回的數據。在這個示例中，我們假設服務器返回的數據是一個包含商品詳細信息的 JSON 對象。我們可以通過 `JSON.parse` 方法將服務器返回的 JSON 字符串轉換為 JavaScript 對象。

最后，我們通過 JavaScript 操作 DOM，將商品詳細信息展示在 JSP 頁面上。在上述示例中，我們使用 `document.getElementById("product-details").innerHTML` 將商品的描述信息（`product.description`）插入到 ID 為 "product-details" 的 HTML 元素內。這樣，當 AJAX 請求成功返回時，商品的詳細信息就會動態地顯示在 JSP 頁面上。

在 JSP 頁面的 `getProductDetails.jsp` 文件中，我們需要根據傳遞過來的 `productId` 參數查詢數據庫，獲取商品的詳細信息。然后，將查詢結果轉換為 JSON 格式并輸出到客戶端。下面是一個簡單的示例：

<%@ page import="java.sql.*" %><%@ page import="org.json.simple.*" %><%
// 獲取傳遞過來的 productId 參數
String productId = request.getParameter("productId");
// 查詢數據庫，獲取商品詳細信息（這里假設我們有一個名為 "products" 的表）
// 省略數據庫查詢和結果處理代碼
// 構建 JSON 對象
JSONObject product = new JSONObject();
product.put("description", "商品詳細信息");
// 設置響應的 Content-Type 為 JSON
response.setContentType("application/json");
// 輸出 JSON 格式的商品詳細信息到客戶端
out.print(product.toJSONString());
%>

上述示例中的 JSP 頁面中，我們首先通過 `request.getParameter` 方法獲取傳遞過來的 `productId` 參數。然后，我們根據 `productId` 在數據庫中查詢商品的詳細信息（這里只是一個簡單的示例，實際應用中需要根據具體情況進行數據庫查詢和結果處理的邏輯實現）。接著，我們使用 `JSONObject` 類構建一個 JSON 對象，并將商品的詳細信息放入該對象中。

最后，我們設置響應的 `Content-Type` 為 `application/json`，表示響應的內容是 JSON 格式的數據。然后，通過 `out.print` 將 JSON 格式的商品詳細信息輸出到客戶端。這樣，前端的 AJAX 請求就會接收到服務器返回的 JSON 數據，并根據業務邏輯進行處理。

通過以上步驟，我們成功地使用 AJAX 將數據傳遞給 JSP 頁面，并將數據動態地展示在頁面上。這種方式在實際開發中經常用于實現各種類型的動態加載數據的場景，如加載用戶個人信息、加載實時數據等。