Ajax是一種通過異步方式與后端進行數(shù)據(jù)交互的技術(shù)。利用Ajax，我們可以在不刷新整個網(wǎng)頁的情況下，實時獲取后端返回的數(shù)據(jù)并進行顯示。本文將介紹如何使用Ajax接收后端數(shù)據(jù)并將其顯示在前端頁面上。

一種常見的場景是，在一個電子商務(wù)網(wǎng)站上瀏覽商品列表，并且能夠根據(jù)用戶的選擇動態(tài)更新商品的價格。假設(shè)我們的網(wǎng)站使用PHP作為后端語言，并且我們已經(jīng)實現(xiàn)了一個返回商品價格的接口，接口的URL為“/api/getProductPrice”。現(xiàn)在，我們需要在商品列表中的每個商品項上實時顯示其價格，而不需要刷新整個頁面。

首先，我們需要創(chuàng)建一個AJAX請求來獲取后端返回的數(shù)據(jù)。在JavaScript中，我們可以使用XMLHttpRequest對象來發(fā)送HTTP請求。下面的代碼演示了如何使用AJAX請求獲取商品價格：

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/getProductPrice', true); // 使用GET方式請求接口
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var price = xhr.responseText; // 獲取后端返回的數(shù)據(jù)
// 在頁面中找到對應(yīng)的商品項，并更新價格
// 例如，假設(shè)每個商品項都有一個唯一的標識符data-id
var productId = 'exampleProductId'; // 假設(shè)商品的id為'exampleProductId'
var productElement = document.querySelector('[data-id="' + productId + '"]');
productElement.querySelector('.price').textContent = price; // 在.price元素中顯示價格
}
};
xhr.send();

在上面的代碼中，我們首先創(chuàng)建了一個XMLHttpRequest對象（xhr），然后使用open()方法指定了請求的方法為GET，并且傳遞了接口URL。接下來，我們設(shè)置了一個onreadystatechange事件處理函數(shù)，當XMLHttpRequest對象的狀態(tài)變化時會觸發(fā)這個函數(shù)。

在onreadystatechange事件處理函數(shù)中，我們首先判斷XMLHttpRequest對象的狀態(tài)（readyState）是否為4，表示請求已經(jīng)完成，并且判斷HTTP狀態(tài)碼（status）是否為200，表示請求成功。如果滿足這兩個條件，說明服務(wù)器成功返回了數(shù)據(jù)，并且我們可以獲取到后端返回的數(shù)據(jù)（responseText）。

通過上述代碼中的querySelector()函數(shù)，我們可以根據(jù)商品的唯一標識符獲取到對應(yīng)的商品元素（productElement），然后使用textContent屬性將后端返回的商品價格顯示在頁面上。

在前端頁面中，一般會使用某種循環(huán)結(jié)構(gòu)來渲染商品列表。因此，在循環(huán)中為每個商品項都創(chuàng)建一個XMLHttpRequest對象，并發(fā)送AJAX請求，以獲取后端數(shù)據(jù)并進行更新。

除了使用原生的XMLHttpRequest對象之外，還可以使用現(xiàn)代瀏覽器中提供的Fetch API來發(fā)送AJAX請求。Fetch API使用Promise對象來處理異步請求，并且提供了更加簡潔的API。下面是使用Fetch API的代碼示例：

fetch('/api/getProductPrice')
.then(response => response.text())
.then(price => {
var productId = 'exampleProductId';
var productElement = document.querySelector('[data-id="' + productId + '"]');
productElement.querySelector('.price').textContent = price;
})
.catch(error => {
console.error('AJAX請求失敗：', error);
});

在上述代碼中，首先使用fetch()函數(shù)發(fā)送HTTP請求，該函數(shù)返回一個Promise對象。然后，我們可以使用then()方法來處理請求的響應(yīng)。在第一個then()方法中，我們將響應(yīng)（response）轉(zhuǎn)換為文本格式，并將其返回。然后，我們可以再次使用then()方法來處理后端返回的數(shù)據(jù)并進行頁面更新。

無論是使用原生的XMLHttpRequest對象還是現(xiàn)代的Fetch API，都可以輕松地在前端頁面中通過異步請求與后端進行數(shù)據(jù)交互，并實時更新頁面內(nèi)容。通過使用Ajax技術(shù)，我們可以提升用戶體驗，使網(wǎng)頁變得更加動態(tài)和實時。