AJAX（Asynchronous JavaScript and XML）是一種用于在不重新加載整個網頁的情況下更新部分網頁內容的技術。它通過在后臺與服務器進行數據交換，實現異步加載數據，使用戶在等待服務器響應時能繼續操作網頁。在使用AJAX時，請求通常是同時發出的，但服務器返回響應的時間可能不同。而有時我們需要按順序發送請求，確保依賴于先前請求結果的接口能夠正確執行。本文將介紹如何使用AJAX按順序發送請求，并提供一些示例來幫助讀者更好地理解。

假設我們有一個需求：根據用戶的選擇，依次發送三個不同的AJAX請求，確保它們按順序執行以正確更新網頁內容。為了實現這個需求，我們可以使用AJAX中的回調函數和Promise來完成。

首先，讓我們來看一個簡單的示例，假設我們需要依次發送三個AJAX請求，每個請求都請求一個不同的資源：

function fetchResource(url) {
return new Promise((resolve, reject) =>{
const xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
resolve(xhr.responseText);
} else {
reject(xhr.statusText);
}
}
};
xhr.send();
});
}
fetchResource("url1")
.then(response1 =>{
console.log(response1);
return fetchResource("url2");
})
.then(response2 =>{
console.log(response2);
return fetchResource("url3");
})
.then(response3 =>{
console.log(response3);
// 執行后續操作
})
.catch(error =>{
console.error(error);
// 錯誤處理
});

在這個示例中，我們定義了一個fetchResource函數來發送AJAX請求，并返回一個Promise對象。該函數首先創建一個XMLHttpRequest對象，然后使用open方法設置了請求方式和URL，接著定義了一個onreadystatechange事件處理函數用于監聽請求狀態的變化。當請求狀態變為XMLHttpRequest.DONE時，通過判斷響應狀態碼確定請求成功與否，如果成功則調用resolve方法并傳遞響應內容，否則調用reject方法并傳遞錯誤信息。最后調用send方法發送請求。

在主函數中，我們依次發送三個請求，每個請求的結果作為下一個請求的參數，以確保它們按順序發送。我們使用then方法來處理每個請求的響應，如果前一個請求成功，就會執行then中的回調函數，否則跳過后續請求并進入catch進行錯誤處理。

通過這種方式，我們可以確保依賴于前一個請求結果的后續請求能夠按順序執行，從而正確更新網頁內容。

除了使用Promise，我們還可以使用async/await來實現按順序發送請求。使用這種方式，我們可以將上述示例改寫為：

async function fetchResources() {
try {
const response1 = await fetchResource("url1");
console.log(response1);
const response2 = await fetchResource("url2");
console.log(response2);
const response3 = await fetchResource("url3");
console.log(response3);
// 執行后續操作
} catch (error) {
console.error(error);
// 錯誤處理
}
}
fetchResources();

在這個示例中，我們將主函數fetchResources聲明為async函數，使其可以使用await關鍵字來等待每個請求的響應。當遇到一個await表達式時，程序會暫停執行，直到該表達式返回的Promise對象狀態變為resolved或rejected。這樣就確保了每個請求的結果都按順序處理，避免了回調地獄的問題。

綜上所述，我們可以使用Promise和async/await來實現按順序發送AJAX請求。這些方法使我們能夠更好地控制請求的執行順序，保證每個請求的返回結果都能正確應用在后續操作中，為用戶提供更好的體驗。