AJAX（Asynchronous JavaScript and XML）是一種利用JavaScript和XML進行異步通信的技術。它的特點是能夠在頁面不刷新的情況下，向服務器發送請求并獲取數據。在這篇文章中，我們將重點討論如何使用AJAX異步返回數據。通過舉例說明，我們可以更好地理解AJAX異步返回數據的原理和用法。

假設我們有一個簡單的網頁，其中包含一個按鈕。當用戶點擊按鈕時，我們想要通過AJAX向服務器發送請求，并在頁面上顯示從服務器返回的數據。

首先，我們需要使用JavaScript創建一個XMLHttpRequest對象。這個對象用于向服務器發送請求并獲取數據。以下是創建XMLHttpRequest對象的代碼：

var xhr = new XMLHttpRequest();

接下來，我們需要通過open()方法指定請求的類型、URL以及是否同時異步處理請求。在這個例子中，我們使用GET請求獲取數據，請求的URL是"data.php"。

xhr.open('GET', 'data.php', true);

然后，我們需要通過onreadystatechange事件處理程序指定當接收到服務器響應時要執行的功能。當readyState屬性的值為4時，表示服務器響應已經接收完畢。以下是將數據顯示在頁面上的代碼：

xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
var data = xhr.responseText;
document.getElementById('result').innerHTML = data;
} else {
console.log('Error: ' + xhr.status);
}
}
};

最后，我們需要通過send()方法向服務器發送請求。以下是發送請求的代碼：

xhr.send();

通過以上步驟，我們成功地通過AJAX異步返回了從服務器獲取的數據，并將其顯示在頁面上。這樣，用戶就可以在不刷新頁面的情況下獲取更新的數據。

舉一個更具體的例子。假設我們有一個網頁，上面顯示了一個商品列表。當用戶點擊某個商品時，我們希望通過AJAX異步返回該商品的詳細信息并顯示在頁面上。以下是一種實現方式：

// HTML代碼
<div class="product-list">
<div class="product" onclick="showProductDetails(1)">Product 1</div>
<div class="product" onclick="showProductDetails(2)">Product 2</div>
<div class="product" onclick="showProductDetails(3)">Product 3</div>
</div>
<div id="product-details"></div>
// JavaScript代碼
function showProductDetails(productId) {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'product-details.php?id=' + productId, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
var data = xhr.responseText;
document.getElementById('product-details').innerHTML = data;
} else {
console.log('Error: ' + xhr.status);
}
}
};
xhr.send();
}

在這個例子中，我們為每個商品添加了一個點擊事件處理程序。當用戶點擊某個商品時，該事件處理程序會調用showProductDetails()函數，傳遞相應的商品ID作為參數。函數內部通過AJAX異步返回商品詳細信息，并將其顯示在頁面上。

總結一下，AJAX異步返回數據是一種非常有用的技術，可以在不刷新頁面的情況下實現與服務器的通信。通過XMLHttpRequest對象的創建、open()方法的使用、onreadystatechange事件處理程序的指定以及send()方法的調用，我們可以實現異步請求數據并將其顯示在頁面上。希望通過本文的舉例說明，讀者能夠更加深入地了解AJAX異步返回數據的原理和用法。