AJAX（Asynchronous JavaScript and XML）是一種通過在后臺與服務器進行數據交流，而無需重新加載整個頁面的技術。通過 AJAX，我們可以實現在網頁上實時地獲取服務器上的數據，更新頁面的顯示內容，而不需要用戶手動刷新整個頁面。 在本文中，我們將討論如何使用 AJAX 實現與服務器的交互，并通過舉例說明 AJAX 的應用。

假設我們正在開發一個簡單的在線購物網站。當用戶點擊“添加到購物車”按鈕時，我們需要將商品的信息發送給服務器，并更新用戶購物車中的商品數量。使用傳統的方式，當用戶點擊按鈕時，我們會重新加載整個頁面，將用戶購物車中的商品數量更新為最新值。

// 傳統方式
function addToCart(productId) {
// 發送請求到服務器，將商品添加到購物車
// 重新加載整個頁面，更新購物車中的商品數量
location.reload();
}

然而，使用 AJAX，我們可以避免重新加載整個頁面，而只發送必要的數據給服務器，并根據服務器的響應來更新頁面的顯示內容。

// 使用 AJAX
function addToCart(productId) {
// 創建 XMLHttpRequest 對象
var xhr = new XMLHttpRequest();
// 設置回調函數，處理服務器響應
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 更新購物車中的商品數量
document.getElementById('cartCount').innerHTML = xhr.responseText;
}
};
// 發送請求到服務器，將商品添加到購物車
xhr.open('POST', '/add-to-cart', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('productId=' + productId);
}

在上面的代碼中，我們首先創建了一個 XMLHttpRequest 對象，并為其設置一個回調函數。回調函數會在服務器返回響應時被觸發。在回調函數中，我們首先檢查服務器的響應狀態和 HTTP 狀態碼，以確保請求成功。然后，我們通過獲取服務器的響應文本，更新頁面上的購物車數量顯示。

通過使用 AJAX，我們實現了與服務器的異步交互，無需重新加載整個頁面。這使得用戶體驗更加流暢，避免了頁面閃爍和重新加載的問題。此外，使用 AJAX 還可以降低服務器的負載，減少網絡流量，提高網站的性能。

除了實時更新購物車數量，AJAX 還可以應用于許多其他場景中。例如，我們可以使用 AJAX 實現實時搜索功能，當用戶在搜索框中輸入關鍵字時，通過 AJAX 請求服務器獲取匹配的搜索結果，并動態地更新頁面上的搜索結果列表。

總之，AJAX 是一種強大的技術，可以使我們實現與服務器的異步交互，提升網頁的用戶體驗和性能。通過舉例說明，我們了解了 AJAX 的基本原理和應用。希望本文對你理解和應用 AJAX 技術有所幫助。