AJAX（Asynchronous JavaScript and XML）是一種用于在web頁面中通過后臺與服務器進行數據交互的技術。在電子商務網站開發中，使用AJAX來實現向購物車添加商品是一種常見的需求。通過AJAX，用戶可以在不刷新整個頁面的情況下將商品添加到購物車，提高了用戶體驗并減輕了服務器的負擔。

假設我們有一個電子商務網站，用戶在瀏覽商品詳情頁時可以通過點擊“添加到購物車”的按鈕將該商品添加到購物車。我們希望用戶點擊按鈕后，頁面不刷新，但購物車中的商品數量立即更新。這時候，可以使用AJAX來實現這個功能。

在HTML頁面中，我們可以通過給按鈕綁定一個點擊事件，在點擊事件中使用AJAX向服務器發送請求，將商品ID和數量傳遞給服務器。服務器收到請求后，將商品添加到購物車，并返回一個成功的響應。根據響應結果，我們再在前端更新購物車的數量顯示。

// HTML文件
<button id="add-to-cart">添加到購物車</button>
<script>
// 給按鈕綁定點擊事件
document.getElementById("add-to-cart").addEventListener("click", function() {
// 使用AJAX向服務器發送請求
var xhr = new XMLHttpRequest();
xhr.open("POST", "/add-to-cart", true);
// 設置請求頭部
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
// 構建請求體
var requestData = {
productId: 123,  // 商品ID
quantity: 1  // 數量
};
// 發送請求
xhr.send(JSON.stringify(requestData));
// 監聽AJAX請求的狀態變化
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 修改購物車數量顯示
document.getElementById("cart-count").innerText = xhr.responseText;
}
}
});
</script>

在上述代碼中，我們給按鈕綁定了一個點擊事件。當按鈕被點擊時，通過AJAX發送POST請求到服務器的“/add-to-cart”接口，并傳遞了商品ID和數量。服務器收到請求后，將商品添加到購物車，并返回購物車的商品數量。前端通過監聽AJAX請求的狀態變化，在請求成功后將返回的數量更新到購物車的數量顯示中。

比如，用戶在商品詳情頁點擊了“添加到購物車”按鈕，AJAX發送了一個請求到服務器，服務器收到請求后將商品ID為123的商品添加到購物車，并返回購物車中的商品數量為5。前端通過修改購物車數量顯示，將數量更新為5。

通過使用AJAX實現向購物車添加商品，我們能夠有效地提升用戶的購物體驗。用戶可以在不刷新整個頁面的情況下直接將商品添加到購物車，不會中斷瀏覽的流程。同時，由于只需更新購物車數量顯示而不需要刷新整個頁面，減輕了服務器的負擔。