這次帶給大家在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中文網其他相關文章!

JavaScript是現代網站的核心,因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容,2)通過DOMAPI操作網頁,3)支持複雜的交互效果如動畫和拖放,4)優化性能和最佳實踐提高用戶體驗。

C 和JavaScript通過WebAssembly實現互操作性。 1)C 代碼編譯成WebAssembly模塊,引入到JavaScript環境中,增強計算能力。 2)在遊戲開發中,C 處理物理引擎和圖形渲染,JavaScript負責遊戲邏輯和用戶界面。

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中,JavaScript與HTML、CSS一起操作DOM,實現動態效果,並支持如jQuery、React等框架。 2)通過ReactNative和Ionic,JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行,支持高並發請求。

Python更適合數據科學和自動化,JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色,使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺,用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用,支持全棧開發。

C和C 在JavaScript引擎中扮演了至关重要的角色,主要用于实现解释器和JIT编译器。1)C 用于解析JavaScript源码并生成抽象语法树。2)C 负责生成和执行字节码。3)C 实现JIT编译器,在运行时优化和编译热点代码,显著提高JavaScript的执行效率。

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用,涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互;2)在用戶提交數據前進行客戶端驗證,提高用戶體驗;3)通過AJAX技術實現與服務器的無刷新通信。

理解JavaScript引擎內部工作原理對開發者重要,因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段;2)執行過程中,引擎會進行動態優化,如內聯緩存和隱藏類;3)最佳實踐包括避免全局變量、優化循環、使用const和let,以及避免過度使用閉包。


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器

ZendStudio 13.5.1 Mac
強大的PHP整合開發環境

MantisBT
Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

記事本++7.3.1
好用且免費的程式碼編輯器

mPDF
mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),