Ajax（Asynchronous JavaScript and XML）是一種用于異步刷新頁面的技術。通過使用Ajax，可以實現在不重載整個頁面的情況下，向服務器發送請求并接收響應數據，然后通過JavaScript動態地更新頁面內容。

假設有一個在線購物網站，當用戶在購物車中添加商品時，使用傳統同步刷新的方式，用戶每次添加商品都需要等待整個頁面重新加載。相比之下，使用Ajax可以實現異步刷新，用戶在添加商品時，只需要等待服務器的響應，并且只有購物車部分會被更新，其他部分的頁面內容將保持不變。

要使用Ajax實現異步刷新，需要借助XMLHttpRequest對象。當用戶在購物車中點擊“添加商品”按鈕時，JavaScript代碼會使用XMLHttpRequest對象創建一個HTTP請求，并指定請求方式、URL和需要傳遞的數據。代碼示例如下：

var xhr = new XMLHttpRequest();
xhr.open('POST', 'add_to_cart.php', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
if (xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
// 獲取服務器的響應數據
var response = xhr.responseText;
// 更新頁面內容
document.getElementById('cart').innerHTML = response;
}
};
xhr.send('product_id=12345');

在上面的例子中，首先創建了一個XMLHttpRequest對象，并使用open方法指定了請求的方式（POST）、URL（add_to_cart.php）和是否為異步請求（true）。然后使用setRequestHeader方法設置了請求頭信息，告訴服務器發送的數據是表單數據。接下來，通過定義onreadystatechange事件處理程序來處理服務器的響應。當readyState等于XMLHttpRequest.DONE（即請求已經完成）并且status等于200（即服務器成功處理請求）時，獲取服務器的響應數據，并將其更新到id為“cart”的HTML元素中。

通過在后臺服務器中的add_to_cart.php文件中編寫邏輯處理代碼，可以根據接收到的數據，從數據庫中獲取商品信息，并生成HTML代碼返回給客戶端。例如：

$product_id = $_POST['product_id'];
// 根據商品ID獲取商品信息
// ...
// 生成HTML代碼
$html = '<div class="item">';
$html .= '<img src="' . $image_url . '" alt="' . $product_name . '">';
$html .= '<p>' . $product_name . '</p>';
$html .= '</div>';
echo $html;

上述代碼中，首先通過$_POST['product_id']獲取到用戶傳遞過來的商品ID。然后根據商品ID從數據庫中獲取商品信息，通過構建HTML代碼生成了一個商品項的HTML元素，并使用echo語句將其返回給客戶端。

Ajax實現異步刷新的優勢在于提升了用戶體驗，加快了頁面的響應速度，并降低了數據傳輸量。通過只刷新頁面的一部分內容，減少了網絡傳輸的數據量，可以有效減輕服務器和客戶端的壓力。因此，Ajax已經被廣泛應用于各種Web應用程序中，包括社交媒體、電子商務、在線游戲等。