xmlhttp.readyState==4 && xmlhttp.status==200的探究

做爲一個後端人員,很慚愧,對Ajax的使用只侷限在功能實現層面的交互,對底層經過XMLHttpRequest對象來使用的知識卻沒有仔細研究過。現總結以下javascript

1. XMLHttpRequest 對象的相關方法

1.1 XHR建立對象

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

1.2 向服務端發送請求

xmlhttp.open("GET","test1.txt",true);   //規定請求的類型、URL 以及是否異步處理請求。
xmlhttp.send();    //將請求發送到服務器。

方法參數解釋以下:

open(method,url,async)html

  • method:請求的類型;GET 或 POST
  • url:文件在服務器上的位置
  • async:true(異步)或 false(同步)

send(string)java

  • string:僅用於 POST 請求

若是須要像 HTML 表單那樣 POST 數據,請使用 setRequestHeader() 來添加 HTTP 頭。而後在 send() 方法中規定您但願發送的數據:web

xmlhttp.setRequestHeader("content-type","text/xml;charset=utf-8");    //向請求中添加 HTTP 頭

方法參數解釋以下:

setRequestHeader(header,value)ajax

  • header: 規定頭的名稱
  • value: 規定頭的值

1.3 服務器響應

如需得到來自服務器的響應,請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。後端

  • responseText 得到字符串形式的響應數據。
  • responseXML 得到 XML 形式的響應數據。

1.4 onreadystatechange 事件

當請求被髮送到服務器時,咱們須要執行一些基於響應的任務。每當 readyState 改變時,就會觸發 onreadystatechange 事件。瀏覽器

  • readyState:存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。
  • status:響應的HTTP狀態碼。

經過以前的Ajax調用公網服務的代碼能夠具體的瞭解XMLHttpRequest對象的使用。服務器

var getXmlHttpRequest = function () {
    try{
     //主流瀏覽器提供了XMLHttpRequest對象
         return new XMLHttpRequest();
    }catch(e){
     //低版本的IE瀏覽器沒有提供XMLHttpRequest對象,IE6如下
     //因此必須使用IE瀏覽器的特定實現ActiveXObject
         return new ActiveXObject("Microsoft.XMLHTTP");
    } 
};
//建立XMLHttpRequest對象
var xhr = getXmlHttpRequest();
//打開鏈接
xhr.open("post","http://ws.webxml.com.cn/WebServices/MobileCodeWS.asmx",true);
//設置數據類型
xhr.setRequestHeader("content-type","text/xml;charset=utf-8");
//設置回調函數
xhr.onreadystatechange=function(){
//判斷是否發送成功和判斷服務端是否響應成功
if(4 == xhr.readyState && 200 == xhr.status){
    alert(xhr.responseText);
  }
}
//組織SOAP協議數據 篇幅緣由,此處信息省略
var soapXML = "<?xml version=\"1.0\" encoding=\"utf-8\"?>····
   ····";        
//發送數據
xhr.send(soapXML);

2. xmlhttp.readyState==4 && xmlhttp.status==200解析

2.1 readyState(狀態值)和status(狀態碼)的區別

readyState,是指運行AJAX所經歷過的幾種狀態,不管訪問是否成功都將響應的步驟,能夠理解成爲AJAX運行步驟,使用「ajax.readyState」得到
status,是指不管AJAX訪問是否成功,由HTTP協議根據所提交的信息,服務器所返回的HTTP頭信息代碼,使用「ajax.status」得到
整體理解:能夠簡單的理解爲state表明一個總體的狀態。而status是這個大的state下面具體的小的狀態。異步

2.2 什麼是readyState

readyState是XMLHttpRequest對象的一個屬性,用來標識當前XMLHttpRequest對象處於什麼狀態。
readyState總共有5個狀態值,分別爲0~4,每一個值表明了不一樣的含義async

0:初始化,XMLHttpRequest對象尚未完成初始化
1:載入,XMLHttpRequest對象開始發送請求
2:載入完成,XMLHttpRequest對象的請求發送完成
3:解析,XMLHttpRequest對象開始讀取服務器的響應
4:完成,XMLHttpRequest對象讀取服務器響應結束

2.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版本

2.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(二、三、4)的每次變化都會觸發,因此就出現了前面說的那種狀況。可見,單獨使用status判斷也是行不通的。

5. readyState和status的前後判斷順序

由上面的試驗,咱們能夠知道判斷的時候readyState和status缺一不可。那麼readyState和status的前後判斷順序會不會有影響呢?咱們能夠將status調到前面先判斷,代碼如 xhr.status == 200 && xhr.readyState == 4
事實上,這對於最終的結果是沒有影響的,可是中間的性能就不一樣了。由試驗咱們知道,readyState的每次變化都會觸發onreadystatechange函數,假如先判斷status,那麼每次都會多判斷一次status的狀態。雖然性能上影響甚微,不過仍是應該抱着追求極致代碼的想法,把readyState的判斷放在前面。
xhr.readyState == 4 && xhr.status == 200

 
 
參考:http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_onreadystatechange.asp
   https://www.cnblogs.com/liu-fei-fei/p/5618782.html
相關文章
相關標籤/搜索