在網(wǎng)頁(yè)開(kāi)發(fā)中，顯示數(shù)據(jù)在頁(yè)面上是一個(gè)非常常見(jiàn)的需求。而使用Ajax技術(shù)可以實(shí)現(xiàn)無(wú)需刷新頁(yè)面就可以將數(shù)據(jù)動(dòng)態(tài)顯示在頁(yè)面上，為用戶提供更流暢的交互體驗(yàn)。本文將介紹Ajax如何顯示數(shù)據(jù)在頁(yè)面上，并通過(guò)舉例說(shuō)明其具體實(shí)現(xiàn)方式。 使用Ajax顯示數(shù)據(jù)在頁(yè)面上的方法非常簡(jiǎn)單，首先需要一個(gè)用于顯示數(shù)據(jù)的容器，可以是一個(gè)div元素或者其他合適的元素。然后，通過(guò)Ajax發(fā)送HTTP請(qǐng)求，從服務(wù)器端獲取數(shù)據(jù)。在數(shù)據(jù)返回后，利用JavaScript將數(shù)據(jù)填充到容器中，即可實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)顯示在頁(yè)面上。 舉個(gè)例子來(lái)說(shuō)明，假設(shè)我們有一個(gè)電商網(wǎng)站的商品列表頁(yè)面。我們希望用戶點(diǎn)擊某個(gè)分類，頁(yè)面能夠自動(dòng)加載該分類下的商品列表，而無(wú)需刷新整個(gè)頁(yè)面。首先，我們?cè)陧?yè)面上創(chuàng)建一個(gè)用于顯示商品列表的div元素：

商品列表：

<div id="productList"></div>

接下來(lái)，我們可以通過(guò)以下Ajax代碼向服務(wù)器發(fā)起請(qǐng)求，獲取特定分類下的商品列表數(shù)據(jù)：

function getProductList(category) {
var xhr = new XMLHttpRequest();
xhr.open("GET", "get_product_list.php?category=" + category, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
var productListContainer = document.getElementById("productList");
productListContainer.innerHTML = xhr.responseText;
}
};
xhr.send();
}

在上面的代碼中，我們定義了一個(gè)函數(shù)getProductList，它接受一個(gè)參數(shù)category，表示需要獲取的商品分類。首先，我們創(chuàng)建了一個(gè)XMLHttpRequest對(duì)象xhr，并通過(guò)open方法指定了請(qǐng)求的URL和請(qǐng)求方式。然后，我們通過(guò)onreadystatechange事件監(jiān)聽(tīng)器來(lái)處理Ajax請(qǐng)求的狀態(tài)變化。當(dāng)請(qǐng)求成功返回（readyState為4，status為200），我們獲取到服務(wù)器返回的HTML代碼，并將其填充到商品列表的div元素中。 最后，我們可以通過(guò)事件監(jiān)聽(tīng)器調(diào)用getProductList函數(shù)，并傳遞特定的分類參數(shù)，實(shí)現(xiàn)根據(jù)分類動(dòng)態(tài)加載商品列表：

// 監(jiān)聽(tīng)分類鏈接的點(diǎn)擊事件
var categoryLinks = document.getElementsByClassName("category-link");
for (var i = 0; i < categoryLinks.length; i++) {
categoryLinks[i].addEventListener("click", function(event) {
event.preventDefault(); // 阻止默認(rèn)的頁(yè)面跳轉(zhuǎn)
var category = event.target.getAttribute("data-category");
getProductList(category);
});
}

在上面的代碼中，我們首先獲取所有帶有class為"category-link"的分類鏈接元素，然后通過(guò)addEventListener方法為每個(gè)鏈接添加點(diǎn)擊事件監(jiān)聽(tīng)器。當(dāng)用戶點(diǎn)擊某個(gè)分類鏈接時(shí)，我們獲取其data-category屬性的值，然后調(diào)用getProductList函數(shù)并傳遞分類參數(shù)。 以上就是使用Ajax顯示數(shù)據(jù)在頁(yè)面上的基本方法和示例。通過(guò)Ajax，我們可以實(shí)現(xiàn)無(wú)需刷新頁(yè)面即可將數(shù)據(jù)動(dòng)態(tài)顯示在頁(yè)面上，為用戶提供更好的交互體驗(yàn)。無(wú)論是商品列表、評(píng)論回復(fù)還是其他數(shù)據(jù)的展示，Ajax都是一個(gè)非常有用的技術(shù)。