這次帶給大家在Ajax裡使用readyState與status區別有哪些，在Ajax裡使用readyState與status的注意事項有哪些，下面就是實戰案例，一起來看一下。
在前幾篇分析了jquery的ajax異步和同步，以及異常的一些處理，感覺還沒有把ajax的readyState和status說清楚.今天就來說說ajax狀態的那點事。
jquery ajax函數原始碼是這樣的：
var getXmlHttpRequest = function () {
if (window.XMLHttpRequest) {
//主流浏览器提供了XMLHttpRequest对象
return new XMLHttpRequest();
}
else if (window.ActiveXObject) {
//低版本的IE浏览器没有提供XMLHttpRequest对象
//所以必须使用IE浏览器的特定实现ActiveXObject
return new ActiveXObject("Microsoft.XMLHTTP");
}
};
var xhr = getXmlHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
//获取成功后执行操作
//数据在xhr.responseText
}
};
xhr.open("TYPE", "URL", true);
xhr.send("");什麼是readyState
readyState是XMLHttpRequest物件的屬性，用來識別目前XMLHttpRequest物件處於什麼狀態。
readyState總共有5個狀態值，分別為0~4，每個值代表了不同的意義，如下表所示：
0 未初始化狀態：此時，已建立了一個XMLHttpRequest物件
1 準備傳送狀態：此時，已經呼叫了XMLHttpRequest物件的open方法，並且XMLHttpRequest物件已經準備好將一個請求傳送到伺服器端
2 已經傳送狀態：此時，已經透過send方法把一個請求傳送到伺服器端，但是還沒有收到一個回應
3 正在接收狀態：此時，已經接收到HTTP回應頭部訊息，但是訊息體部分還沒有完全接收到
4 完成回應狀態：此時，已經完成了HTTP回應的接收
什麼是status
status是XMLHttpRequest物件的屬性，表示回應的HTTP狀態碼。
在HTTP1.1協定下，HTTP狀態碼總共可分為5大類，如下表所示：
1XX 伺服器收到請求，需要繼續處理。例如101狀態碼，表示伺服器將通知客戶端使用更高版本的HTTP協定。
2XX 請求成功。例如200狀態碼，表示請求所希望的回應頭或資料體將隨此回應傳回。
3XX 重新導向。例如302狀態碼，表示暫時重定向，請求將包含一個新的URL位址，客戶端將對新的位址進行GET請求。
4XX 用戶端錯誤。例如404狀態碼，表示客戶端請求的資源不存在。
5XX 伺服器錯誤。例如500狀態碼，表示伺服器遇到了一個未曾預料的情況，導致了它無法完成回應，一般來說，這個問題會在程式碼出錯時出現。
拋出問題
為什麼onreadystatechange的函數實作要同時判斷readyState和status呢？
我們知道 readyState === 4 已經表示了請求回應成功了，為什麼還要後續的status？帶著問題，我們開始來做一些試驗吧。
只使用readyState判斷
javascript端的實作程式碼如下：
var getXmlHttpRequest = function () {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
else if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
}
};
var xhr = getXmlHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
alert(xhr.responseText);
}
};
xhr.open("GET", "/data.aspx", true);
xhr.send("");我們在服務端拋出例外：
public partial class data : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
throw new Exception("Error");
}
}運行javascript程式碼，提示視窗出現瞭如下：
# 服務回應出錯了，但還是回傳了訊息，這並不是我們想要的結果。開啟Fiddler監控，可以看到data.aspx回傳的是500回應，但由於只用readystate做判斷，它不理會放回的結果是500還是200，只要回應成功回傳了，就執行接下來的javascript程式碼，結果將造成各種不可預料的錯誤。所以只使用readyState判斷是行不通的。
換另一個角度想，狀態碼回傳200就表示這次回應是成功的了，那麼是不是可以不使用readyState，單獨只使用status來做判斷呢？好，帶著問題，繼續來做試驗吧。
只使用status判斷
javascript端的程式碼實作如下：
var getXmlHttpRequest = function () {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
else if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
}
};
var xhr = getXmlHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.status === 200) {
alert("readyState=" + xhr.readyState + xhr.responseText);
}
};
xhr.open("GET", "/data.aspx", true);
xhr.send("");事实上，结果却不像预期那样。响应码确实是返回了200，但是总共弹出了3次窗口！第一次是“readyState=2”的窗口，第二次是“readyState=3Test”的窗口，第三次是“readyState=4Test”的窗口。由此，可见onreadystatechange函数的执行不是只在readyState变为4的时候触发的，而是readyState的每次变化都会触发，所以就出现了前面说的那种情况。可见，单独使用status判断也是行不通的。
进一步思考
由上面的试验，我们可以知道判断的时候readyState和status缺一不可。那么readyState和status的先后判断顺序会不会有影响呢？我们可以将status调到前面先判断，代码如 xhr.status === 200 && xhr.readyState === 4。
事实上，这对于最终的结果是没有影响的，但是中间的性能就不同了。由上一个试验我们知道，readyState的每次变化都会触发onreadystatechange函数，假如先判断status，那么每次都会多判断一次status的状态。虽然性能上影响甚微，不过我们还是应该抱着追求极致代码的想法，把readyState的判断放在前面。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是在Ajax裡使用readyState與status差異有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！
