AJAX（Asynchronous JavaScript and XML）是一種在Web應用程序中實現異步加載頁面模塊的技術。它允許在瀏覽器與服務器之間進行數據交換，而無需刷新整個頁面。這種異步加載的特性使得頁面加載更加快速、響應更加即時，提升了用戶體驗。下面我們將詳細介紹AJAX的工作原理和如何使用它來實現異步加載頁面模塊。

將我們的注意力轉向一個在線購物網站，該網站在用戶訪問某一商品詳情頁面時，需要使用戶能夠即時查看該商品的評論和評分。如果不使用AJAX，每次用戶查看一個商品詳情時都需要刷新整個頁面，這無疑會給用戶帶來糟糕的體驗。而通過使用AJAX，我們可以只加載商品評論和評分這一部分內容，使用戶能夠即時查看并與其他用戶的評價互動。

在使用AJAX實現異步加載頁面模塊時，需要借助XMLHttpRequest對象來發送HTTP請求并處理響應。下面是一個簡單的示例，演示了如何使用AJAX獲取并展示商品評論和評分：

var xhr = new XMLHttpRequest();
xhr.open('GET', '/getComments?productId=123', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var comments = JSON.parse(xhr.responseText);
// 將評論和評分展示在頁面上
document.getElementById('comments').innerHTML = comments.comments;
document.getElementById('rating').innerText = comments.rating;
}
};
xhr.send();

在這個示例中，我們首先創建了一個XMLHttpRequest對象，并使用open方法指定了請求的類型（GET）和URL（/getComments?productId=123）。然后，我們定義了onreadystatechange事件處理程序，在這個處理程序中判斷了請求的狀態和響應的狀態碼。如果都符合預期，我們將從服務器返回的評論和評分數據解析為一個JavaScript對象，并將其展示在頁面上。

除了XMLHttpRequest對象，還有許多JavaScript庫和框架可以幫助我們更便捷地使用AJAX。例如，jQuery提供了ajax方法，簡化了AJAX的使用過程。下面是一個使用jQuery的示例：

$.ajax({
url: '/getComments',
data: { productId: 123 },
success: function(response) {
// 將評論和評分展示在頁面上
$('#comments').html(response.comments);
$('#rating').text(response.rating);
}
});

在這個示例中，我們使用$.ajax方法，傳遞一個配置對象作為參數。在配置對象中，我們指定了請求的URL（/getComments）和數據（{ productId: 123 }），還定義了請求成功后的處理函數。當請求成功并返回響應時，處理函數將被調用，我們可以利用返回的評論和評分數據更新頁面。

總的來說，AJAX技術的引入大大改善了網頁的交互性和用戶體驗。通過使用AJAX實現異步加載頁面模塊，我們可以使用戶能夠即時獲取所需的信息，而無需等待整個頁面加載完成。這對于許多場景（如在線購物網站中的商品評論和評分）來說，是非常重要且有益的。因此，我們應該充分利用AJAX來提升網頁的性能和響應速度。