ajax 是一種常用的前端技術(shù)，它能夠?qū)崿F(xiàn)網(wǎng)頁(yè)與服務(wù)器之間的異步通信。在進(jìn)行 ajax 請(qǐng)求時(shí)，我們會(huì)遇到五種不同的狀態(tài)。了解這些狀態(tài)對(duì)于我們正確處理 ajax 請(qǐng)求非常重要。本文將詳細(xì)介紹 ajax 的五種狀態(tài)，并給出一些實(shí)例來(lái)幫助讀者更好地理解這些狀態(tài)和如何正確應(yīng)對(duì)。
在使用 ajax 發(fā)送請(qǐng)求時(shí)，我們需要通過(guò) readyState 屬性來(lái)獲取當(dāng)前的狀態(tài)。具體的數(shù)值分別代表了不同的狀態(tài)。這五種狀態(tài)如下所示：
1. 未初始化（0）：在這個(gè)階段，還沒(méi)有開(kāi)始發(fā)送請(qǐng)求。這個(gè)狀態(tài)是默認(rèn)的初始狀態(tài)。
2. 打開(kāi)（1）：在這個(gè)階段，已經(jīng)調(diào)用了 open() 方法，但是還沒(méi)有調(diào)用 send() 方法。在這個(gè)狀態(tài)下，請(qǐng)求已經(jīng)被打開(kāi)。
3. 發(fā)送（2）：在這個(gè)階段，請(qǐng)求已經(jīng)發(fā)出，但是服務(wù)器還沒(méi)有開(kāi)始返回響應(yīng)。通常，在這個(gè)狀態(tài)下，我們可以對(duì)請(qǐng)求進(jìn)行一些設(shè)置，例如設(shè)置請(qǐng)求頭部或者獲取響應(yīng)頭部信息。
4. 接收（3）：在這個(gè)階段，服務(wù)器已經(jīng)開(kāi)始返回響應(yīng)數(shù)據(jù)。在這個(gè)狀態(tài)中，我們可以獲取部分的響應(yīng)數(shù)據(jù)，但是還不能獲取完整的響應(yīng)。
5. 完成（4）：在這個(gè)階段，響應(yīng)已經(jīng)完全接收，并且可以通過(guò) responseText 或者 responseXML 屬性獲取完整的響應(yīng)數(shù)據(jù)。
下面我們通過(guò)幾個(gè)具體的例子來(lái)說(shuō)明這五種狀態(tài)的使用。
第一個(gè)例子是一個(gè)簡(jiǎn)單的實(shí)時(shí)搜索功能。當(dāng)用戶(hù)輸入關(guān)鍵字時(shí)，前端通過(guò) ajax 請(qǐng)求實(shí)時(shí)獲取后端返回的匹配結(jié)果，并將結(jié)果顯示出來(lái)。在這個(gè)例子中，未初始化和打開(kāi)狀態(tài)的時(shí)候，我們可以顯示一個(gè)加載中的菊花圖標(biāo)；發(fā)送狀態(tài)可以將用戶(hù)輸入的關(guān)鍵字發(fā)送給后端進(jìn)行匹配；接收狀態(tài)可以將匹配結(jié)果即時(shí)顯示在頁(yè)面上；完成狀態(tài)可以顯示搜索完成。通過(guò)不同的狀態(tài)，我們能夠給用戶(hù)更好的體驗(yàn)。
<script>
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 1) {
// 顯示菊花圖標(biāo)
} else if (xhr.readyState === 2) {
// 發(fā)送請(qǐng)求
} else if (xhr.readyState === 3) {
// 顯示匹配結(jié)果
} else if (xhr.readyState === 4) {
// 顯示搜索完成
}
};
xhr.open('GET', '/search?key=' + keyword);
xhr.send();
</script><form id="messageForm">
<input type="text" id="messageInput" />
<button type="submit">留言</button>
</form>
<div id="messageHint"></div>
<script>
document.getElementById('messageForm').addEventListener('submit', function(e) {
e.preventDefault();
var message = document.getElementById('messageInput').value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
document.getElementById('messageHint').innerText = '留言發(fā)送成功';
} else {
document.getElementById('messageHint').innerText = '留言發(fā)送失敗，請(qǐng)稍后再試';
}
}
};
xhr.open('POST', '/submitMessage');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('message=' + encodeURIComponent(message));
});
</script>