在現(xiàn)代 Web 開(kāi)發(fā)中，經(jīng)常會(huì)遇到需要獲取服務(wù)器數(shù)據(jù)并動(dòng)態(tài)更新頁(yè)面內(nèi)容的需求。而傳統(tǒng)的同步請(qǐng)求方式會(huì)導(dǎo)致用戶界面出現(xiàn)長(zhǎng)時(shí)間的等待，降低用戶體驗(yàn)。而 AJAX (Asynchronous JavaScript and XML) 技術(shù)的出現(xiàn)，可以通過(guò)異步請(qǐng)求的方式獲取服務(wù)器數(shù)據(jù)，大大提升了用戶體驗(yàn)。本文將介紹 AJAX 異步請(qǐng)求的用法及其返回值的處理方式，并以實(shí)例來(lái)說(shuō)明。

AJAX 異步請(qǐng)求的核心是使用 JavaScript 的 XMLHttpRequest 對(duì)象。通過(guò)該對(duì)象，我們可以向服務(wù)器發(fā)送請(qǐng)求并接收返回的數(shù)據(jù)，而無(wú)需刷新整個(gè)頁(yè)面。

例如，我們想在網(wǎng)頁(yè)上顯示一個(gè)實(shí)時(shí)獲取天氣信息的功能。傳統(tǒng)的同步請(qǐng)求方式是無(wú)法實(shí)現(xiàn)的，因?yàn)橛脩粜枰却?wù)器返回天氣數(shù)據(jù)后才能查看。而使用 AJAX 異步請(qǐng)求，我們可以在后臺(tái)發(fā)送一個(gè)請(qǐng)求獲取天氣數(shù)據(jù)，然后在頁(yè)面中動(dòng)態(tài)更新對(duì)應(yīng)的天氣信息，用戶無(wú)需等待頁(yè)面刷新。

function getWeather() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
var weatherData = JSON.parse(xhr.responseText);
document.getElementById('weather').innerText = weatherData.description;
} else {
console.error('Failed to get weather data.');
}
}
};
xhr.open('GET', 'https://api.weather.com/weatherdata');
xhr.send();
}

上述代碼中，通過(guò)創(chuàng)建一個(gè) XMLHttpRequest 對(duì)象，并指定其回調(diào)函數(shù) xhr.onreadystatechange 來(lái)處理返回的數(shù)據(jù)。當(dāng) readyState 的狀態(tài)改變時(shí)，會(huì)觸發(fā)該回調(diào)函數(shù)，我們?cè)谄渲信袛嗾?qǐng)求的完成狀態(tài)和響應(yīng)狀態(tài)碼。如果狀態(tài)碼為 200，表示請(qǐng)求成功，我們將返回的天氣數(shù)據(jù)解析為 JSON 格式，并將其中的天氣描述更新到頁(yè)面的元素中。

除了顯示天氣信息，我們還可以通過(guò) AJAX 異步請(qǐng)求來(lái)實(shí)現(xiàn)一些動(dòng)態(tài)交互功能。例如，在一個(gè)在線購(gòu)物網(wǎng)站中，用戶可以點(diǎn)擊加入購(gòu)物車的按鈕，通過(guò) AJAX 異步請(qǐng)求將商品數(shù)據(jù)添加到購(gòu)物車中，并顯示購(gòu)物車中的商品總數(shù)。

function addToCart(productId) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
var cartCount = xhr.responseText;
document.getElementById('cartCount').innerText = cartCount;
} else {
console.error('Failed to add product to cart.');
}
}
};
xhr.open('POST', 'https://api.shopping.com/addToCart');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({ productId: productId }));
}

上述代碼中，我們?cè)诩尤胭?gòu)物車按鈕的點(diǎn)擊事件中調(diào)用了 addToCart 函數(shù)，并通過(guò)參數(shù)傳入了要添加的商品 ID。在函數(shù)內(nèi)部，我們創(chuàng)建了一個(gè) XMLHttpRequest 對(duì)象，并指定了回調(diào)函數(shù)用于處理返回的數(shù)據(jù)。通過(guò)設(shè)置請(qǐng)求的方法為 POST，我們將商品 ID 以 JSON 格式發(fā)送給服務(wù)器。在返回的數(shù)據(jù)中，服務(wù)器會(huì)返回購(gòu)物車中商品的總數(shù)，我們將其更新到頁(yè)面中的購(gòu)物車數(shù)量顯示區(qū)域。

綜上所述，AJAX 異步請(qǐng)求的返回值可以通過(guò)回調(diào)函數(shù)進(jìn)行處理。通過(guò)回調(diào)函數(shù)，我們可以根據(jù)請(qǐng)求的狀態(tài)和響應(yīng)的數(shù)據(jù)來(lái)更新頁(yè)面內(nèi)容，實(shí)現(xiàn)動(dòng)態(tài)交互和數(shù)據(jù)展示。無(wú)論是實(shí)時(shí)顯示天氣信息還是更新購(gòu)物車數(shù)量，AJAX 異步請(qǐng)求都可以幫助我們提升網(wǎng)頁(yè)的用戶體驗(yàn)。