AJAX是開發(fā) web 應用程序常用的技術之一，它使得網頁可以在不刷新的情況下更新數(shù)據。其中的異步性質是 AJAX 的關鍵特性之一。通過 AJAX 異步請求，我們可以在后臺發(fā)送或接收數(shù)據的同時，繼續(xù)執(zhí)行其他操作，無需等待數(shù)據的返回。這種異步請求的方式在許多場景下都非常有用，比如在前端表單驗證、獲取數(shù)據并更新頁面、無需刷新頁面即時保存數(shù)據等。

為了更好地理解和掌握 AJAX 異步請求的用法，讓我們舉例來說明。假設我們有一個網站上的評論功能，用戶可以在一個文本區(qū)域中輸入評論內容，并點擊“提交”按鈕將評論保存到數(shù)據庫中。我們可以使用 AJAX 異步請求來實現(xiàn)這個功能，用戶輸入評論并點擊“提交”按鈕后，頁面會繼續(xù)運行其他代碼，同時 AJAX 異步請求會將評論數(shù)據通過后臺 API 發(fā)送到服務器端保存。這樣，用戶無需等待評論保存的成功或失敗，可以繼續(xù)瀏覽頁面，提高用戶體驗。

// 定義一個保存評論的函數(shù)
function saveComment(comment) {
// 創(chuàng)建 XMLHttpRequest 對象
var xhr = new XMLHttpRequest();
// 監(jiān)聽 AJAX 請求狀態(tài)改變事件
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 請求成功處理邏輯
console.log('評論保存成功！');
} else {
// 請求失敗處理邏輯
console.log('評論保存失敗！');
}
};
// 發(fā)送 AJAX 請求
xhr.open('POST', '/api/saveComment', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({ comment: comment }));
}
// 用戶點擊“提交”按鈕時調用保存評論的函數(shù)
document.getElementById('submitBtn').addEventListener('click', function() {
var comment = document.getElementById('commentInput').value;
saveComment(comment);
});

在上面的代碼中，我們首先定義了一個 saveComment 函數(shù)，它接收一個 comment 參數(shù)，用來保存用戶的評論。在函數(shù)內部，我們創(chuàng)建了一個 XMLHttpRequest 對象，該對象用于發(fā)送異步請求。然后，我們通過設置 onreadystatechange 事件監(jiān)聽函數(shù)來監(jiān)測 AJAX 請求狀態(tài)的改變。當請求狀態(tài)為 4（即請求已完成）且狀態(tài)碼為 200（即請求成功）時，表示評論保存成功，否則表示保存失敗。在發(fā)送請求之前，我們通過 open 方法設置了請求的方法（POST）、請求的地址（/api/saveComment）和是否為異步請求（true）。然后，我們通過調用 setRequestHeader 方法設置了請求頭的 Content-Type，并使用 send 方法發(fā)送了一個包含評論數(shù)據的 JSON 字符串。

在上述示例中，AJAX 異步請求受到了同源策略的限制，即只能向同源服務器發(fā)送請求。如果我們想要向不同域的服務器進行請求，就需要使用其他技術實現(xiàn)跨域請求，比如 JSONP、CORS等。在現(xiàn)代的 web 開發(fā)中，常見的技術都已經提供了輕松實現(xiàn)跨域請求的方式，例如使用 fetch API 或 axios 等現(xiàn)代的 AJAX 請求庫。

總結來說，AJAX 異步請求在 web 開發(fā)中非常實用，可以使網頁實現(xiàn)更好的用戶體驗和性能優(yōu)化。通過 AJAX 異步請求，在不刷新整個頁面的情況下，我們可以在后臺發(fā)送或接收數(shù)據的同時，繼續(xù)執(zhí)行其他操作。使用 AJAX 異步請求時，我們需要首先創(chuàng)建 XMLHttpRequest 對象，然后設置相應的請求參數(shù)，發(fā)送請求并處理請求的結果。這種異步請求的方式在前端表單驗證、獲取數(shù)據并更新頁面、無需刷新頁面即時保存數(shù)據等場景下都有廣泛的應用。另外，需要注意的是，AJAX 異步請求受到同源策略的限制，如果要向不同域的服務器發(fā)送請求，需要采用其他技術來實現(xiàn)跨域請求。