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

async 屬性

AJAX 中的 async 屬性用于指定是否采用異步請求。當(dāng) async 屬性為 true 時(shí)，表示采用異步請求，即發(fā)送請求后會(huì)繼續(xù)執(zhí)行后續(xù)代碼而不會(huì)等待服務(wù)器響應(yīng)。當(dāng) async 屬性為 false 時(shí)，表示采用同步請求，即發(fā)送請求后會(huì)等待服務(wù)器響應(yīng)后再繼續(xù)執(zhí)行后續(xù)代碼。

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

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

timeout 屬性

AJAX 中的 timeout 屬性用于設(shè)定超時(shí)時(shí)間，即在規(guī)定的時(shí)間內(nèi)未收到服務(wù)器響應(yīng)時(shí)終止請求并執(zhí)行相應(yīng)的操作。timeout 屬性的單位是毫秒，默認(rèn)值為 0，表示不設(shè)定超時(shí)時(shí)間。

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

上面的例子中，我們通過 XMLHttpRequest 對象發(fā)送了一個(gè) GET 請求，并設(shè)置了超時(shí)時(shí)間為 2000 毫秒。如果在 2000 毫秒內(nèi)未收到服務(wù)器響應(yīng)，則會(huì)觸發(fā) ontimeout 事件，輸出 "請求超時(shí)"。

async 和 timeout 的組合使用

在實(shí)際開發(fā)中，我們常常需要根據(jù)具體的場景來決定是否采用異步請求，并設(shè)置合適的超時(shí)時(shí)間。例如，當(dāng)用戶提交一個(gè)表單時(shí)，我們可以采用異步請求來發(fā)送表單數(shù)據(jù)，并設(shè)置一個(gè)適當(dāng)?shù)某瑫r(shí)時(shí)間以確保用戶不會(huì)等待太長時(shí)間。

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

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

結(jié)論

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