AJAX（Asynchronous JavaScript and XML）是一種用于創(chuàng)建異步網(wǎng)絡(luò)請(qǐng)求的技術(shù)。在傳統(tǒng)的 Web 頁(yè)面中，當(dāng)我們點(diǎn)擊或提交表單時(shí)，頁(yè)面會(huì)刷新并重新加載所有內(nèi)容。相比之下，使用 AJAX 技術(shù)可以在不刷新整個(gè)頁(yè)面的情況下，向服務(wù)器發(fā)送請(qǐng)求并獲取響應(yīng)，從而提供更好的用戶體驗(yàn)。在 AJAX 中，默認(rèn)情況下異步操作是啟用的，也就是說(shuō)，請(qǐng)求被發(fā)送出去后，JavaScript 會(huì)繼續(xù)執(zhí)行，而不會(huì)等待服務(wù)器返回結(jié)果。本文將探討 AJAX 異步請(qǐng)求的默認(rèn)行為并通過(guò)示例說(shuō)明。

假設(shè)我們正在開(kāi)發(fā)一個(gè)電子商務(wù)網(wǎng)站，并希望在用戶點(diǎn)擊“添加到購(gòu)物車”按鈕時(shí)，將商品添加到購(gòu)物車中，并在頁(yè)面上展示出來(lái)。此時(shí)，我們可以通過(guò) AJAX 發(fā)送異步請(qǐng)求來(lái)實(shí)現(xiàn)這個(gè)功能。

const addToCart = async (item) =>{
try {
const response = await fetch('/api/addToCart', {
method: 'POST',
body: JSON.stringify(item),
headers: {
'Content-Type': 'application/json'
}
});
const data = await response.json();
// 更新購(gòu)物車數(shù)量
document.getElementById('cart-count').textContent = data.cartCount;
// 顯示成功提示
document.getElementById('success-message').textContent = '商品已成功添加到購(gòu)物車！';
} catch (error) {
// 處理錯(cuò)誤
console.error(error);
}
};
document.getElementById('add-to-cart-button').addEventListener('click', () =>{
const item = {
id: 1,
name: '商品A',
price: 100
};
addToCart(item);
});

在上面的代碼中，我們定義了一個(gè)名為 addToCart 的異步函數(shù)，它接受一個(gè)商品對(duì)象作為參數(shù)。當(dāng)用戶點(diǎn)擊“添加到購(gòu)物車”按鈕時(shí)，我們創(chuàng)建一個(gè)包含商品信息的 JSON 對(duì)象，并使用 fetch 函數(shù)發(fā)送 POST 請(qǐng)求到服務(wù)器上的 /api/addToCart 路徑。由于該請(qǐng)求是異步的，默認(rèn)情況下，JavaScript 不會(huì)等待服務(wù)器響應(yīng)完成就會(huì)繼續(xù)執(zhí)行下面的代碼。

然后，我們使用 await 關(guān)鍵字等待服務(wù)器響應(yīng)返回，并將響應(yīng)轉(zhuǎn)換為 JSON 格式的數(shù)據(jù)。接下來(lái)，我們利用獲取到的數(shù)據(jù)更新購(gòu)物車數(shù)量以及在頁(yè)面上顯示成功的提示信息。如果在異步請(qǐng)求過(guò)程中出現(xiàn)錯(cuò)誤，我們可以通過(guò) catch 語(yǔ)句捕獲錯(cuò)誤并進(jìn)行處理。

使用 AJAX 技術(shù)的異步請(qǐng)求默認(rèn)是非阻塞的，這意味著當(dāng)一個(gè)請(qǐng)求被發(fā)送出去后，JavaScript 不會(huì)停止執(zhí)行，而是繼續(xù)執(zhí)行后面的代碼。這樣可以避免在等待服務(wù)器響應(yīng)時(shí)阻塞頁(yè)面，從而提高用戶體驗(yàn)。

總結(jié)來(lái)說(shuō)，AJAX 中異步請(qǐng)求的默認(rèn)行為是啟用的。這意味著當(dāng)我們發(fā)送一個(gè)異步請(qǐng)求時(shí)，JavaScript 會(huì)繼續(xù)執(zhí)行后面的代碼，而不會(huì)等待服務(wù)器返回響應(yīng)。這樣可以提高頁(yè)面的響應(yīng)速度和用戶體驗(yàn)。然而，在某些情況下，我們可能需要等待服務(wù)器響應(yīng)完成后再執(zhí)行特定的操作，這時(shí)可以使用 await 關(guān)鍵字以及異步函數(shù)來(lái)實(shí)現(xiàn)。