AJAX（Asynchronous JavaScript and XML）是一種用于在后臺(tái)與服務(wù)器進(jìn)行異步通信的技術(shù)。它可以在不重載整個(gè)網(wǎng)頁(yè)的情況下更新頁(yè)面的一部分內(nèi)容，提供了更快速、更流暢的用戶體驗(yàn)。在本文中，我們將重點(diǎn)討論如何使用ajax異步請(qǐng)求對(duì)象來(lái)實(shí)現(xiàn)頁(yè)面的即時(shí)刷新。

在前端開(kāi)發(fā)中，我們經(jīng)常需要通過(guò)ajax請(qǐng)求獲取數(shù)據(jù)并將其實(shí)時(shí)顯示在頁(yè)面上。例如，一個(gè)購(gòu)物網(wǎng)站的商品列表頁(yè)面需要實(shí)時(shí)顯示產(chǎn)品的庫(kù)存信息。當(dāng)用戶選擇了某個(gè)商品后，頁(yè)面上的庫(kù)存數(shù)量需要實(shí)時(shí)更新，以保持準(zhǔn)確性。

$(document).ready(function(){
// 創(chuàng)建一個(gè)ajax請(qǐng)求對(duì)象
var xhr = new XMLHttpRequest();
// 設(shè)置請(qǐng)求方式和請(qǐng)求地址
xhr.open("GET", "/api/getStock", true);
// 發(fā)送請(qǐng)求
xhr.send();
// 監(jiān)聽(tīng)請(qǐng)求狀態(tài)的變化
xhr.onreadystatechange = function(){
if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200){
// 獲取請(qǐng)求的響應(yīng)數(shù)據(jù)
var response = xhr.responseText;
// 更新頁(yè)面內(nèi)容
document.getElementById("stock").innerText = response;
}
}
});

以上代碼通過(guò)創(chuàng)建一個(gè)ajax請(qǐng)求對(duì)象xhr，并使用xhr.open方法設(shè)置請(qǐng)求的方式和地址。在這個(gè)例子中，我們使用GET請(qǐng)求獲取庫(kù)存數(shù)量的數(shù)據(jù)。然后，通過(guò)xhr.send方法發(fā)送請(qǐng)求。最后，通過(guò)監(jiān)聽(tīng)xhr的onreadystatechange事件，當(dāng)請(qǐng)求狀態(tài)發(fā)生變化時(shí)執(zhí)行相應(yīng)的操作。

在我們的例子中，當(dāng)xhr.readyState變?yōu)閄MLHttpRequest.DONE時(shí)，表示請(qǐng)求已完成。xhr.status === 200則表示請(qǐng)求成功。這時(shí)我們通過(guò)xhr.responseText獲取到服務(wù)器響應(yīng)的數(shù)據(jù)，并將其更新到頁(yè)面上，通過(guò)document.getElementById方法獲取到一個(gè)id為stock的元素，并將響應(yīng)數(shù)據(jù)設(shè)置為其innerText。

讓我們繼續(xù)完成這個(gè)例子。假設(shè)購(gòu)物網(wǎng)站的庫(kù)存數(shù)量會(huì)隨著用戶的購(gòu)買行為而變化，當(dāng)用戶成功購(gòu)買一件商品后，頁(yè)面上的庫(kù)存數(shù)量應(yīng)相應(yīng)減少。

function buyProduct(productId){
// 創(chuàng)建一個(gè)ajax請(qǐng)求對(duì)象
var xhr = new XMLHttpRequest();
// 設(shè)置請(qǐng)求方式和請(qǐng)求地址
xhr.open("POST", "/api/buyProduct", true);
// 設(shè)置請(qǐng)求頭
xhr.setRequestHeader("Content-Type", "application/json");
// 發(fā)送請(qǐng)求
xhr.send(JSON.stringify({id: productId}));
// 監(jiān)聽(tīng)請(qǐng)求狀態(tài)的變化
xhr.onreadystatechange = function(){
if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200){
// 獲取請(qǐng)求的響應(yīng)數(shù)據(jù)
var response = xhr.responseText;
// 更新頁(yè)面內(nèi)容
document.getElementById("stock").innerText = response;
}
}
}
buyProduct(12345);

以上代碼展示了一個(gè)購(gòu)買商品的函數(shù)。當(dāng)用戶購(gòu)買一件商品時(shí)，我們將通過(guò)ajax請(qǐng)求將該請(qǐng)求發(fā)送到服務(wù)器。在請(qǐng)求中，我們需要指定商品的id，并以JSON格式發(fā)送。當(dāng)請(qǐng)求成功后，我們同樣將服務(wù)器返回的庫(kù)存數(shù)量更新到頁(yè)面上。

總而言之，ajax異步請(qǐng)求對(duì)象為我們提供了一種實(shí)現(xiàn)頁(yè)面實(shí)時(shí)刷新的方式。通過(guò)監(jiān)聽(tīng)請(qǐng)求的狀態(tài)變化和服務(wù)器的響應(yīng)信息，我們可以根據(jù)需要更新頁(yè)面上的內(nèi)容。這種技術(shù)不僅提升了用戶體驗(yàn)，同時(shí)也提高了頁(yè)面的性能和效率。