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

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

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

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

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

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