Ajax（Asynchronous JavaScript and XML）是一種用于創建快速動態網頁的技術，它可以在不刷新整個頁面的情況下與服務器進行通信。通過使用Ajax，用戶可以在不離開當前頁面的情況下從后臺接收到數據，并將其實時顯示在頁面上。本文將介紹如何使用Ajax接收后臺返回的數據，并提供一些使用示例。
為了說明如何使用Ajax接收后臺返回的數據，我們以一個簡單的示例進行講解。假設我們正在開發一個電商網站，每當用戶點擊“加入購物車”按鈕時，我們需要將用戶選擇的商品信息發送給后臺，并接收后臺返回的購物車內商品總數。通過使用Ajax，我們可以實現在不刷新頁面的情況下實時更新購物車數量。
// HTML代碼
<div id="cart">購物車數量：loading...</div>
<button onclick="addToCart()">加入購物車</button>
// JavaScript代碼
function addToCart() {
var product = { name: "iPhone 12", price: 5999 }; // 用戶選擇的商品信息
// 創建Ajax對象
var xhr = new XMLHttpRequest();
// 監聽Ajax事件
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText); // 解析后臺返回的JSON數據
document.getElementById("cart").innerHTML = "購物車數量：" + response.cartCount;
}
};
// 發送Ajax請求
xhr.open("POST", "/addToCart", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify(product));
}在上面的例子中，我們首先編寫了一個用于顯示購物車數量的
在事件監聽器中，我們首先檢查了Ajax對象的readyState屬性和status屬性，以確保請求已完成且響應成功。一旦響應成功，我們從后臺返回的JSON數據中提取出購物車數量，并更新了購物車顯示。
接下來，我們調用xhr.open方法，這個方法用于創建一個與后臺的連接。其中的"POST"參數表示我們將使用POST方式發送數據，而"/addToCart"表示發送數據到后臺的地址。設置參數為true表示使用異步方式發送請求。
然后，我們使用xhr.setRequestHeader方法設置請求頭，以確保后臺能夠正確解析我們發送的數據。在這個例子中，我們將請求頭設置為"Content-Type: application/json"，以告訴后臺我們發送的是JSON格式的數據。
最后，我們使用xhr.send方法發送請求，并將用戶選擇的商品信息以JSON字符串的形式發送給后臺。注意，我們使用了JSON.stringify方法將JavaScript對象轉換為JSON字符串。
通過上述示例，我們可以看到如何使用Ajax接收后臺返回的數據，并將其實時顯示在頁面上。無論是購物網站的購物車數量更新，還是社交網站的消息通知，Ajax都可以幫助我們實現這種實時數據交互的效果。
總之，Ajax是一種非常有用的技術，它可以讓我們在不刷新頁面的情況下與后臺進行數據交互。通過使用Ajax，我們可以實現更好的用戶體驗，并提供更快速的動態網頁功能。