Ajax是一種基于JavaScript和XML技術的前端網頁動態交互方式，通過使用Ajax可以實現在不刷新整個頁面的情況下，更新頁面的一部分內容，從而提升用戶的體驗和頁面的響應速度。本文將探討如何使用Ajax來刷新顯示另一組數據，并通過舉例說明其實現過程和效果。 在實際開發中，常常會遇到需要在頁面上切換顯示不同數據的需求，比如一個在線商店的商品分類頁面，用戶可以通過點擊不同的分類按鈕來切換顯示不同類別的商品信息。而傳統的做法是在每個分類按鈕的點擊事件中設置一個點擊處理函數，當用戶點擊某個分類按鈕時，觸發響應事件，后臺服務器接收請求并返回對應的商品數據，然后前端頁面重新加載并顯示新的商品數據。這種方式會導致頁面整體被重新加載，效率較低且用戶體驗一般。 而使用Ajax則可以通過異步通信的方式，只刷新頁面的一部分內容，而不需要重新加載整個頁面。具體實現過程如下： 首先，在頁面上創建一個用于顯示數據的容器元素，比如一個div元素，通過id屬性進行標識，例如"content"。在該元素中，我們需要展示不同的數據。 接下來，在JavaScript中使用Ajax技術來獲取新的數據。使用XMLHttpRequest對象發送HTTP請求，并指定請求的URL和請求的方式(GET或POST)。例如：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'data.php', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
var newData = response.data; // 假設返回的數據是一個數組
// 更新頁面上的數據
var contentElem = document.getElementById('content');
contentElem.innerHTML = ''; // 清空舊的數據
for (var i = 0; i< newData.length; i++) {
var itemElem = document.createElement('p');
itemElem.textContent = newData[i];
contentElem.appendChild(itemElem);
}
}
};
xhr.send();

在上述代碼中，我們創建了一個XMLHttpRequest對象，并調用open()方法指定了獲取數據的URL和請求方式。通過onreadystatechange事件處理函數，我們監聽了請求狀態的變化，當請求完成且成功時（readyState為4，并且status為200），我們獲取到了服務器返回的數據，并更新了頁面上的數據。 最后，我們需要在頁面上對應的分類按鈕的點擊事件中觸發上述的Ajax請求。當用戶點擊某個分類按鈕時，JavaScript監聽到該事件，并向服務器請求相應的數據。服務器返回的數據以JSON格式進行傳輸，并在前端頁面進行處理和展示。 通過上述方式，我們實現了在不刷新整個頁面的情況下，使用Ajax刷新顯示另一組數據。用戶可以在頁面上自由切換不同的數據，而不會受到頁面重載的影響。這種方式大大提升了用戶體驗和頁面的響應速度。