轉(zhuǎn)載：http://www.cnblogs.com/teroy/p/3917439.html　

熟悉web開發(fā)的程序員想必對Ajax也不會陌生。現(xiàn)在已經(jīng)有很多js框架封裝了ajax實(shí)現(xiàn)，例如JQuery的ajax函數(shù)，調(diào)用起來非常方便。當(dāng)然本文不打算講框架的使用，我們將從Ajax的javascript源碼實(shí)現(xiàn)開始。

Ajax源碼實(shí)現(xiàn)

var getXmlHttpRequest = function () { if (window.XMLHttpRequest) {//主流瀏覽器提供了XMLHttpRequest對象return new XMLHttpRequest();}else if (window.ActiveXObject) {//低版本的IE瀏覽器沒有提供XMLHttpRequest對象//所以必須使用IE瀏覽器的特定實(shí)現(xiàn)ActiveXObjectreturn new ActiveXObject("Microsoft.XMLHTTP");} }; var xhr = getXmlHttpRequest(); xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {//獲取成功后執(zhí)行操作//數(shù)據(jù)在xhr.responseText} }; xhr.open("TYPE", "URL", true); xhr.send("");

　　可以看到，xhr對象是通過onreadystatechange來監(jiān)聽Ajax的最終完成情況，這里也迎來了這次要重點(diǎn)討論的主角：readyState和status。

什么是readyState

　　readyState是XMLHttpRequest對象的一個(gè)屬性，用來標(biāo)識當(dāng)前XMLHttpRequest對象處于什么狀態(tài)。

　　readyState總共有5個(gè)狀態(tài)值，分別為0~4，每個(gè)值代表了不同的含義，如下表所示：

? 0 ?	?未初始化狀態(tài)：此時(shí)，已經(jīng)創(chuàng)建了一個(gè)XMLHttpRequest對象
? 1	?準(zhǔn)備發(fā)送狀態(tài)：此時(shí)，已經(jīng)調(diào)用了XMLHttpRequest對象的open方法，并且XMLHttpRequest對象已經(jīng)準(zhǔn)備好將一個(gè)請求發(fā)送到服務(wù)器端
? 2	?已經(jīng)發(fā)送狀態(tài)：此時(shí)，已經(jīng)通過send方法把一個(gè)請求發(fā)送到服務(wù)器端，但是還沒有收到一個(gè)響應(yīng)
? 3	?正在接收狀態(tài)：此時(shí)，已經(jīng)接收到HTTP響應(yīng)頭部信息，但是消息體部分還沒有完全接收到
? 4	?完成響應(yīng)狀態(tài)：此時(shí)，已經(jīng)完成了HTTP響應(yīng)的接收

什么是status

　　status是XMLHttpRequest對象的一個(gè)屬性，表示響應(yīng)的HTTP狀態(tài)碼。

　　在HTTP1.1協(xié)議下，HTTP狀態(tài)碼總共可分為5大類，如下表所示：

? 1XX ?	?服務(wù)器收到請求，需要繼續(xù)處理。例如101狀態(tài)碼，表示服務(wù)器將通知客戶端使用更高版本的HTTP協(xié)議。
? 2XX ?	?請求成功。例如200狀態(tài)碼，表示請求所希望的響應(yīng)頭或數(shù)據(jù)體將隨此響應(yīng)返回。
? 3XX ?	?重定向。例如302狀態(tài)碼，表示臨時(shí)重定向，請求將包含一個(gè)新的URL地址，客戶端將對新的地址進(jìn)行GET請求。
? 4XX ?	?客戶端錯(cuò)誤。例如404狀態(tài)碼，表示客戶端請求的資源不存在。
? 5XX ?	?服務(wù)器錯(cuò)誤。例如500狀態(tài)碼，表示服務(wù)器遇到了一個(gè)未曾預(yù)料的情況，導(dǎo)致了它無法完成響應(yīng)，一般來說，這個(gè)問題會在程序代碼出錯(cuò)時(shí)出現(xiàn)。

拋出問題

　　為什么onreadystatechange的函數(shù)實(shí)現(xiàn)要同時(shí)判斷readyState和status呢？

　　我們知道 readyState === 4 已經(jīng)表示了請求響應(yīng)成功了，為什么還要后續(xù)的status呢？帶著問題，我們開始來做一些試驗(yàn)吧。

只使用readyState判斷

　　javascript端的實(shí)現(xiàn)代碼如下：

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("");

　　這個(gè)演示DEMO使用ASP.NET Webform框架，現(xiàn)在我們在后臺data.aspx做一些手腳，不如讓它報(bào)錯(cuò)試試！C#代碼如下：

public partial class data : System.Web.UI.Page {protected void Page_Load(object sender, EventArgs e){throw new Exception("Error");} }

　　運(yùn)行javascript代碼，提示窗口出現(xiàn)了如下：

　　服務(wù)響應(yīng)出錯(cuò)了，但還是返回了信息，這并不是我們想要的結(jié)果。打開Fiddler監(jiān)控，可以看到data.aspx返回的是500響應(yīng)，但由于只使用readystate做判斷，它不理會放回的結(jié)果是500還是200，只要響應(yīng)成功返回了，就執(zhí)行接下來的javascript代碼，結(jié)果將造成各種不可預(yù)料的錯(cuò)誤。所以只使用readyState判斷是行不通的。

　　換另外一個(gè)角度想，狀態(tài)碼返回200就表示這次響應(yīng)是成功的了，那么是不是可以不使用readyState，單獨(dú)只使用status做判斷呢？好，帶著問題，繼續(xù)來做試驗(yàn)吧。

只使用status判斷

　　javascript端的代碼實(shí)現(xiàn)如下：

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("");

　　這次將在data.aspx后臺做處理，讓它只返回一個(gè)字符串，實(shí)現(xiàn)如下：

public partial class data : System.Web.UI.Page {protected void Page_Load(object sender, EventArgs e){Response.Write("Test");Response.End();} }

　　一切都是那么地自然，是不是只要彈出一個(gè)寫著一行"readyState=4Test"的字符串的提示框，就表示結(jié)果成立了？把它跑起來了吧，結(jié)果已經(jīng)就離我們不遠(yuǎn)了！

　　事實(shí)上，結(jié)果卻不像預(yù)期那樣。響應(yīng)碼確實(shí)是返回了200，但是總共彈出了3次窗口！第一次是“readyState=2”的窗口，第二次是“readyState=3Test”的窗口，第三次是“readyState=4Test”的窗口。由此，可見onreadystatechange函數(shù)的執(zhí)行不是只在readyState變?yōu)?的時(shí)候觸發(fā)的，而是readyState的每次變化都會觸發(fā)，所以就出現(xiàn)了前面說的那種情況。可見，單獨(dú)使用status判斷也是行不通的。

進(jìn)一步思考

　　由上面的試驗(yàn)，我們可以知道判斷的時(shí)候readyState和status缺一不可。那么readyState和status的先后判斷順序會不會有影響呢？我們可以將status調(diào)到前面先判斷，代碼如 xhr.status === 200 && xhr.readyState === 4。

　　事實(shí)上，這對于最終的結(jié)果是沒有影響的，但是中間的性能就不同了。由上一個(gè)試驗(yàn)我們知道，readyState的每次變化都會觸發(fā)onreadystatechange函數(shù)，假如先判斷status，那么每次都會多判斷一次status的狀態(tài)。雖然性能上影響甚微，不過我們還是應(yīng)該抱著追求極致代碼的想法，把readyState的判斷放在前面。

　　如果你有新的想法，歡迎留言討論。

轉(zhuǎn)載于:https://www.cnblogs.com/sivkun/p/7263754.html

總結(jié)

以上是生活随笔為你收集整理的ajax如何实现、readyState五中状态的含义的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。