這次帶給大家Ajax中readyState與status應該怎麼使用,Ajax中readyState與status使用的注意事項有哪些,下面就是實戰案例,一起來看一下。
先看下面一段程式碼,然後再跟大家詳細介紹,Ajax中有關readyState(狀態值)和status(狀態碼)的問題,具體內容如下所示:
var getXmlHttpRequest = function () { try{ //主流浏览器提供了XMLHttpRequest对象 return new XMLHttpRequest(); }catch(e){ //低版本的IE浏览器没有提供XMLHttpRequest对象,IE6以下 //所以必须使用IE浏览器的特定实现ActiveXObject return new ActiveXObject("Microsoft.XMLHTTP"); } }; var xhr = getXmlHttpRequest(); // readyState 0=>初始化 1=>载入 2=>载入完成 3=>解析 4=>完成 // console.log(xhr.readyState); 0 xhr.open("TYPE", "URL", true); // console.log(xhr.readyState); 1 xhr.send(); // console.log(xhr.readyState); 1 xhr.onreadystatechange = function () { // console.log(xhr.status); //HTTP状态吗 // console.log(xhr.readyState); 2 3 4 if(xhr.readyState === 4 && xhr.status === 200){ alert(xhr.responseText); } };
#1.Ajax:readyState(狀態值)和status(狀態碼)的區別
readyState,是指執行AJAX所經歷過的幾種狀態,無論存取是否成功都將回應的步驟,可以理解成為AJAX運行步驟,使用“ajax.readyState”獲得
status,是指無論AJAX訪問是否成功,由HTTP協議根據所提交的信息,伺服器所返回的HTTP頭資訊程式碼,使用「ajax.status」來獲得
整體理解:可以簡單的理解為state代表一個整體的狀態。而status是這個大的state下面具體的小的狀態。
2.什麼是readyState
#readyState是XMLHttpRequest物件的屬性,用來識別目前XMLHttpRequest物件處於什麼狀態。
readyState總共有5個狀態值,分別為0~4,每個值代表了不同的意義
0:初始化,XMLHttpRequest物件還沒有完成初始化
# 1:載入,XMLHttpRequest物件開始發送請求
2:載入完成,XMLHttpRequest物件的請求發送完成
3:解析,XMLHttpRequest物件開始讀取伺服器的回應
#4:完成,XMLHttpRequest物件讀取伺服器回應結束
3.什麼是status
#status是XMLHttpRequest物件的屬性,表示回應的HTTP狀態碼
在HTTP1.1協定下,HTTP狀態碼總共可分為5大類
1xx:訊息回應類,表示接收到請求並且繼續處理
2xx:處理成功回應類,表示動作被成功接收、理解和接受
3xx:重定向回應類,為了完成指定的動作,必須接受進一步處理
4xx:客戶端錯誤,客戶請求包含語法錯誤或是無法正確執行
5xx:服務端錯誤,伺服器無法正確執行一個正確的請求
100-客戶必須繼續發出請求
101-客戶要求伺服器根據請求轉換HTTP協定版本
200-交易成功
201-提示知道新文件的URL
202——接受和處理、但處理未完成
203——回傳訊息不確定或不完整
204——請求收到,但回傳資訊為空
205-伺服器完成了請求,使用者代理程式必須重設目前已瀏覽的檔案
206-伺服器已經完成了部分使用者的GET請求
300-請求的資源可在多處得到
301-刪除請求資料
302-在其他位址發現了請求資料
##303 ——建議客戶存取其他URL或存取方式304——用戶端已經執行了GET,但檔案未變更305——請求的資源必須從伺服器指定的位址得到306-先前版本HTTP中使用的程式碼,現行版本中不再使用307-申明請求的資源暫時性刪除#400-錯誤請求,如語法錯誤401——請求授權失敗402——保留有效ChargeTo頭回應#403——請求不允許##404— —沒有發現檔案、查詢或URl
405-使用者在Request-Line欄位定義的方法不允許
406-根據使用者傳送的Accept拖,請求資源不可存取
407——类似401,用户必须首先在代理服务器上得到授权
408——客户端没有在用户指定的饿时间内完成请求
409——对当前资源状态,请求不能完成
410——服务器上不再有此资源且无进一步的参考地址
411——服务器拒绝用户定义的Content-Length属性请求
412——一个或多个请求头字段在当前请求中错误
413——请求的资源大于服务器允许的大小
414——请求的资源URL长于服务器允许的长度
415——请求资源不支持请求项目格式
416——请求中包含Range请求头字段,在当前请求资源范围内没有range指示值,请求也不包含If-Range请求头字段
417——服务器不满足请求Expect头字段指定的期望值,如果是代理服务器,可能是下一级服务器不能满足请求
500——服务器产生内部错误
501——服务器不支持请求的函数
502——服务器暂时不可用,有时是为了防止发生系统过载
503——服务器过载或暂停维修
504——关口过载,服务器使用另一个关口或服务来响应用户,等待时间设定值较长
505——服务器不支持或拒绝支请求头中指定的HTTP版本
4.思考问题:为什么onreadystatechange的函数实现要同时判断readyState和status呢?
第一种思考方式:只使用readyState
var getXmlHttpRequest = function () { if (window.XMLHttpRequest) { return new XMLHttpRequest(); } else if (window.ActiveXObject) { return new ActiveXObject("Microsoft.XMLHTTP"); } }; var xhr = getXmlHttpRequest(); xhr.open("get", "1.txt", true); xhr.send(); xhr.onreadystatechange = function () { if (xhr.readyState === 4) { alert(xhr.responseText); } };
服务响应出错了,但还是返回了信息,这并不是我们想要的结果
如果返回不是200,而是404或者500,由于只使用readystate做判断,它不理会放回的结果是200、404还是500,只要响应成功返回了,就执行接下来的javascript代码,结果将造成各种不可预料的错误。所以只使用readyState判断是行不通的。
第二种思考方式:只使用status判断
var getXmlHttpRequest = function () { try{ return new XMLHttpRequest(); }catch(e){ return new ActiveXObject("Microsoft.XMLHTTP"); } }; var xhr = getXmlHttpRequest(); xhr.open("get", "1.txt", true); xhr.send(); xhr.onreadystatechange = function () { if (xhr.status === 200) { alert("readyState=" + xhr.readyState + xhr.responseText); } };
事实上,结果却不像预期那样。响应码确实是返回了200,但是总共弹出了3次窗口!第一次是“readyState=2”的窗口,第二次是“readyState=3”的窗口,第三次是“readyState=4”的窗口。由此,可见onreadystatechange函数的执行不是只在readyState变为4的时候触发的,而是readyState(2、3、4)的每次变化都会触发,所以就出现了前面说的那种情况。可见,单独使用status判断也是行不通的。
5.由上面的试验,我们可以知道判断的时候readyState和status缺一不可。那么readyState和status的先后判断顺序会不会有影响呢?我们可以将status调到前面先判断,代码如 xhr.status === 200 && xhr.readyState === 4
事实上,这对于最终的结果是没有影响的,但是中间的性能就不同了。由试验我们知道,readyState的每次变化都会触发onreadystatechange函数,假如先判断status,那么每次都会多判断一次status的状态。虽然性能上影响甚微,不过还是应该抱着追求极致代码的想法,把readyState的判断放在前面。
xhr.readyState === 4 && xhr.status === 200
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上是Ajax中readyState與status應該怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!