AJAX（Asynchronous JavaScript and XML）是一種在網頁中實現異步數據交互的技術。它可以通過JavaScript和XML（或其他數據格式）在不刷新整個頁面的情況下，實現與服務器之間的數據傳輸和呈現。與傳統的同步請求相比，AJAX可以提供更好的用戶體驗，使用戶能夠更快地獲取數據和交互。而Struts 2是一個基于MVC（Model-View-Controller）設計模式的開源Java Web應用框架。它提供了一套功能強大且易于使用的組件，用于幫助開發人員構建可擴展的、面向對象的Web應用程序。結合AJAX和Struts 2，我們可以創建出功能強大且富有交互性的Web應用。

一個常見的場景是在用戶點擊按鈕后，通過AJAX請求與服務器交互并獲取數據，然后動態地更新頁面。例如，我們想要創建一個在線購物車的功能，當用戶點擊“添加到購物車”按鈕時，通過AJAX將商品ID發送到服務器。服務器會將此商品加入用戶的購物車，并返回一個更新后的購物車的HTML片段。然后，我們可以使用JavaScript將這個HTML片段動態地插入到頁面中，而無需刷新整個頁面。這樣，用戶可以在不中斷瀏覽的情況下，實時地看到購物車的更新情況。

function addToCart(itemId) {
// 使用AJAX發送請求
var xhr = new XMLHttpRequest();
xhr.open('GET', '/addToCart?itemId=' + itemId, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 獲取服務器返回的HTML片段
var cartFragment = xhr.responseText;
// 動態插入到頁面中
document.getElementById('cart').innerHTML = cartFragment;
}
};
xhr.send();
}

在這個例子中，我們使用了JavaScript中的XMLHttpRequest對象來發送AJAX請求。我們通過open方法指定了請求的類型（GET）和URL（/addToCart?itemId=XXX），并設置了請求的異步標志為true，以確保AJAX請求不會阻塞頁面的加載。通過設置onreadystatechange事件的回調函數，我們可以在請求狀態發生變化時進行相應的處理。當AJAX請求成功返回時（readyState為4且status為200），我們可以通過responseText屬性來獲取服務器返回的響應數據（在這個例子中是購物車的HTML片段），并動態地將其插入到頁面中。

Struts 2提供了一些便捷的解決方案，用于與AJAX進行集成。它提供了一個名為的標簽，可以通過簡單的配置來生成AJAX請求。我們可以使用標簽來創建一個可點擊的鏈接或按鈕，當用戶點擊時，它會通過AJAX請求與服務器交互，并將服務器返回的結果呈現在指定的位置上。

Add to Cart

在上面的例子中，我們使用了Struts 2的標簽來創建一個鏈接。通過指定theme屬性為"ajax"，我們告訴Struts 2將這個鏈接轉化為一個AJAX請求。當用戶點擊這個鏈接時，指定的URL（/addToCart）將通過AJAX發送到服務器。同時，我們可以通過indicator屬性指定一個loading元素的ID，用于顯示一個加載提示。服務器返回的結果將會被動態地插入到頁面中。

通過結合AJAX和Struts 2，我們可以實現各種功能豐富且具有交互性的Web應用。無論是通過原生的JavaScript實現AJAX，還是利用Struts 2的標簽簡化開發，AJAX和Struts 2的結合都可以為我們帶來更好的用戶體驗和開發效率。