在現代 web 開發中，AJAX（Asynchronous JavaScript and XML）技術已經成為了不可或缺的一部分。它使我們能夠在不刷新整個頁面的情況下，與后端服務器進行異步通信，從而提升了用戶體驗和頁面性能。AJAX 的一個重要特性是可以設定超時時間（timeout），以便在請求時間過長時終止請求并執行相應的操作。本文將介紹 AJAX 中的 async 屬性和 timeout 屬性，并通過舉例說明它們的使用方式和作用。

async 屬性

AJAX 中的 async 屬性用于指定是否采用異步請求。當 async 屬性為 true 時，表示采用異步請求，即發送請求后會繼續執行后續代碼而不會等待服務器響應。當 async 屬性為 false 時，表示采用同步請求，即發送請求后會等待服務器響應后再繼續執行后續代碼。

function makeAsyncRequest() {
var request = new XMLHttpRequest();
request.open('GET', 'https://api.example.com/data', true); // 異步請求
request.send();
console.log('發送異步請求');
}
function makeSyncRequest() {
var request = new XMLHttpRequest();
request.open('GET', 'https://api.example.com/data', false); // 同步請求
request.send();
console.log('發送同步請求');
}
makeAsyncRequest(); // 輸出：發送異步請求
makeSyncRequest(); // 輸出：發送同步請求

在上面的例子中，我們通過 XMLHttpRequest 對象發送了兩個 GET 請求，一個采用了異步請求，一個采用了同步請求。當執行 makeAsyncRequest() 時，會立即發送異步請求并繼續執行后續代碼，輸出 "發送異步請求"。而當執行 makeSyncRequest() 時，會等待同步請求完成后再執行后續代碼，輸出 "發送同步請求"。

timeout 屬性

AJAX 中的 timeout 屬性用于設定超時時間，即在規定的時間內未收到服務器響應時終止請求并執行相應的操作。timeout 屬性的單位是毫秒，默認值為 0，表示不設定超時時間。

function makeRequestWithTimeout() {
var request = new XMLHttpRequest();
request.timeout = 2000; // 設置超時時間為 2000 毫秒
request.ontimeout = function() {
console.log('請求超時');
};
request.open('GET', 'https://api.example.com/data', true);
request.send();
}
makeRequestWithTimeout(); // 如果在 2000 毫秒內未收到服務器響應，則輸出 "請求超時"

上面的例子中，我們通過 XMLHttpRequest 對象發送了一個 GET 請求，并設置了超時時間為 2000 毫秒。如果在 2000 毫秒內未收到服務器響應，則會觸發 ontimeout 事件，輸出 "請求超時"。

async 和 timeout 的組合使用

在實際開發中，我們常常需要根據具體的場景來決定是否采用異步請求，并設置合適的超時時間。例如，當用戶提交一個表單時，我們可以采用異步請求來發送表單數據，并設置一個適當的超時時間以確保用戶不會等待太長時間。

var form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
event.preventDefault();
var request = new XMLHttpRequest();
request.timeout = 5000; // 設置超時時間為 5000 毫秒
request.ontimeout = function() {
console.log('請求超時');
};
request.open('POST', 'https://api.example.com/submit', true);
request.send(new FormData(form));
});

在上面的例子中，我們通過 addEventListener() 方法為表單的 submit 事件綁定了一個事件處理程序。當用戶提交表單時，會觸發 submit 事件，并發送一個 POST 請求。我們設置了超時時間為 5000 毫秒，如果在 5000 毫秒內未收到服務器響應，則輸出 "請求超時"。

結論

通過設置 async 屬性和 timeout 屬性，我們可以靈活地控制 AJAX 請求的方式和超時時間，從而提升用戶體驗和頁面性能。在實際開發中，要根據具體的場景來選擇是否采用異步請求，并合理設置超時時間，以確保請求能夠在合理的時間內得到響應。