javascript快速入門23--XHR—XMLHttpRequest物件

建立XMLHttpRequest物件

與之前眾多DOM操作一樣,建立XHR物件也具有相容性問題:IE6及之前的版本使用ActiveXObject,IE7之後及其它瀏覽器使用XMLHttpRequest

不但IE6及其之前的版本將XHR作為一個ActiveXObject執行,而且還存在眾多版本:一開始是Microsoft.XMLHTTP 之後變成Msxml2.XMLHTTP及更新版的Msxml3.XMLHTTP

     function XHR() {
        var xhr;
        try {xhr = new XMLHttpRequest();}
        catch(e) {
            var IEXHRVers =["Msxml3.XMLHTTP","Msxml2.XMLHTTP","Microsoft.XMLHTTP"];
            for (var i=0,len=IEXHRVers.length;i< len;i++) {
                try {xhr = new ActiveXObject(IEXHRVers[i]);}
                catch(e) {continue;}
            }
        }
        return xhr;
    }

 

使用XHR

    var xhr = XHR();
    //open方法 建立一個新的http請求，並指定此請求的方法、URL以及驗證資訊(使用者名稱/密碼)
    xhr.open("get","test.txt",true);
    /*第一個引數是請求方式,一般用get與post方法,與form標籤的method類似
    第二個引數是請求的URL
    第三個引數是請求是同步進行還是非同步進行,true表示非同步
    呼叫了open方法僅僅是傳遞了引數而已*/
    xhr.send(null);//呼叫了send方法後才會發出請求
    //並且get方式傳送請求時send引數是null

 

在伺服器環境中執行上面的指令碼,並且給一個php或asp指令碼傳送請求,會發現伺服器端指令碼其實會被執行

    //PHP指令碼
    $fp =fopen("a.txt","wb");
    fwrite($fp,"PHP檔案在後臺執行了");
    fclose($fp);
    echo "返回內容!";

 

上面PHP指令碼的返回內容不會直接在頁面上顯示出來,必需要用JS通過XHR物件接收

    var xhr = XHR();
    xhr.open("get","test.php",true);
    xhr.onreadystatechange = callback;//在readystatechange事件上繫結一個函式
    //當接收到資料時,會呼叫readystatechange事件上的事件處理函式
    xhr.send(null);
    functon callback() {
        //在這裡面沒有使用this.readyState這是因為IE下面ActiveXObject的特殊性
        if (xhr.readyState == 4) {//readyState表示文件載入進度,4表示完畢
            alert(xhr.reponseText);//responseText屬性用來取得返回的文字
        }
    }

 

XHR物件參考

readyState屬性 返回當前請求的狀態

• 0 (未初始化) 物件已建立，但是尚未初始化（尚未呼叫open方法）
• 1 (初始化) 物件已建立，尚未呼叫send方法
• 2 (傳送資料) send方法已呼叫，但是當前的狀態及http頭未知
• 3 (資料傳送中) 已接收部分資料，因為響應及http頭不全，這時通過responseBody和responseText獲取部分資料會出現錯誤
• 4 (完成) 資料接收完畢,此時可以通過通過responseBody和responseText獲取完整的迴應資料

    var xhr =XHR();
    alert(xhr.readyState);//0
    xhr.open("get","test.htm",true);
    alert(xhr.readyState);//1
    xhr.send(null);
    alert(xhr.readyState);//IE下會是4,而FF下會是2
    //可以通過readystatechange事件監聽
    xhr = XHR();
    xhr.onreadystatechange = function () {
        alert(xhr.readyState);//FF下會依次是1,2,3,4但最後還會再來個1
        //IE下則是1,1,3,4
    };
    xhr.open("get","test.txt",true);
    xhr.send(null);

 

從上面可以看到,對於readyState這個屬性,各個瀏覽器看法也不一樣,但其實我們只需要知道當狀態為4的時候可以獲取response就行了!

status 返回當前請求的http狀態碼

status屬性返回當前請求的http狀態碼,此屬性僅當資料傳送並接收完畢後才可獲取。完整的HTTP狀態碼如下:

• 100 Continue 初始的請求已經接受，客戶應當繼續傳送請求的其餘部分
• 101 Switching Protocols 伺服器將遵從客戶的請求轉換到另外一種協議
• 200 OK 一切正常，對GET和POST請求的應答文件跟在後面。
• 201 Created 伺服器已經建立了文件，Location頭給出了它的URL。
• 202 Accepted 已經接受請求，但處理尚未完成。
• 203 Non-Authoritative Information 文件已經正常地返回，但一些應答頭可能不正確，因為使用的是文件的拷貝
• 204 No Content 沒有新文件，瀏覽器應該繼續顯示原來的文件。如果使用者定期地重新整理頁面，而Servlet可以確定使用者文件足夠新，這個狀態程式碼是很有用的
• 205 Reset Content 沒有新的內容，但瀏覽器應該重置它所顯示的內容。用來強制瀏覽器清除表單輸入內容
• 206 Partial Content 客戶傳送了一個帶有Range頭的GET請求，伺服器完成了它
• 300 Multiple Choices 客戶請求的文件可以在多個位置找到，這些位置已經在返回的文件內列出。如果伺服器要提出優先選擇，則應該在Location應答頭指明。
• 301 Moved Permanently 客戶請求的文件在其他地方，新的URL在Location頭中給出，瀏覽器應該自動地訪問新的URL。
• 302 Found 類似於301，但新的URL應該被視為臨時性的替代，而不是永久性的。
• 303 See Other 類似於301/302，不同之處在於，如果原來的請求是POST，Location頭指定的重定向目標文件應該通過GET提取
• 304 Not Modified 客戶端有緩衝的文件併發出了一個條件性的請求（一般是提供If-Modified-Since頭表示客戶只想比指定日期更新的文件）。伺服器告訴客戶，原來緩衝的文件還可以繼續使用。
• 305 Use Proxy 客戶請求的文件應該通過Location頭所指明的代理伺服器提取
• 307 Temporary Redirect 和302（Found）相同。許多瀏覽器會錯誤地響應302應答進行重定向，即使原來的請求是POST，即使它實際上只能在POST請求的應答是303時才能重定向。由於這個原因，HTTP 1.1新增了307，以便更加清除地區分幾個狀態程式碼：當出現303應答時，瀏覽器可以跟隨重定向的GET和POST請求；如果是307應答，則瀏覽器只能跟隨對GET請求的重定向。
• 400 Bad Request 請求出現語法錯誤。
• 401 Unauthorized 客戶試圖未經授權訪問受密碼保護的頁面。應答中會包含一個WWW-Authenticate頭，瀏覽器據此顯示使用者名稱字/密碼對話方塊，然後在填寫合適的Authorization頭後再次發出請求。
• 403 Forbidden 資源不可用。
• 404 Not Found 無法找到指定位置的資源
• 405 Method Not Allowed 請求方法（GET、POST、HEAD、Delete、PUT、TRACE等）對指定的資源不適用。
• 406 Not Acceptable 指定的資源已經找到，但它的MIME型別和客戶在Accpet頭中所指定的不相容
• 407 Proxy Authentication Required 類似於401，表示客戶必須先經過代理伺服器的授權。
• 408 Request Timeout 在伺服器許可的等待時間內，客戶一直沒有發出任何請求。客戶可以在以後重複同一請求。
• 409 Conflict 通常和PUT請求有關。由於請求和資源的當前狀態相沖突，因此請求不能成功。
• 410 Gone 所請求的文件已經不再可用，而且伺服器不知道應該重定向到哪一個地址。它和404的不同在於，返回407表示文件永久地離開了指定的位置，而404表示由於未知的原因文件不可用。
• 411 Length Required 伺服器不能處理請求，除非客戶傳送一個Content-Length頭
• 412 Precondition Failed 請求頭中指定的一些前提條件失敗
• 413 Request Entity Too Large 目標文件的大小超過伺服器當前願意處理的大小。如果伺服器認為自己能夠稍後再處理該請求，則應該提供一個Retry-After頭
• 414 Request URI Too Long URI太長
• 416 Requested Range Not Satisfiable 伺服器不能滿足客戶在請求中指定的Range頭
• 500 Internal Server Error 伺服器遇到了意料不到的情況，不能完成客戶的請求
• 501 Not Implemented 伺服器不支援實現請求所需要的功能。例如，客戶發出了一個伺服器不支援的PUT請求
• 502 Bad Gateway 伺服器作為閘道器或者代理時，為了完成請求訪問下一個伺服器，但該伺服器返回了非法的應答
• 503 Service Unavailable 伺服器由於維護或者負載過重未能應答。例如，Servlet可能在資料庫連線池已滿的情況下返回503。伺服器返回503時可以提供一個Retry-After頭
• 504 Gateway Timeout 由作為代理或閘道器的伺服器使用，表示不能及時地從遠端伺服器獲得應答
• 505 HTTP Version Not Supported 伺服器不支援請求中所指明的HTTP版本

事實上,我們只需要知道狀態為200的時候(OK)才讀取response就行了!

responseText與responseXML

responseText 將響應資訊作為字串返回 . XMLHTTP嘗試將響應資訊解碼為Unicode字串，XMLHTTP預設將響應資料的編碼定為UTF-8，如果伺服器返回的資料帶BOM(byte-order mark)，XMLHTTP可以解碼任何UCS-2 (big or little endian)或者UCS-4 資料。注意，如果伺服器返回的是xml文件，此屬性並不處理xml文件中的編碼宣告。你需要使用responseXML來處理。

responseXML 將響應資訊格式化為Xml Document物件並返回 . 如果響應資料不是有效的XML文件，此屬性本身不返回XMLDOMParseError，可以通過處理過的DOMDocument物件獲取錯誤資訊。

其它一些XHR物件的方法

abort 取消當前請求

getAllResponseHeaders 獲取響應的所有http頭 每個http頭名稱和值用冒號分割，並以\r\n結束。當send方法完成後才可呼叫該方法。

getResponseHeader 從響應資訊中獲取指定的http頭 當send方法成功後才可呼叫該方法。如果伺服器返回的文件型別為"text/xml", 則這句話xmlhttp.getResponseHeader("Content-Type");將返回字串"text/xml"。可以使用getAllResponseHeaders方法獲取完整的http頭資訊。

setRequestHeader 單獨指定請求的某個http頭 如果已經存在已此名稱命名的http頭，則覆蓋之。此方法必須在open方法後呼叫。

請求方式

GET 請求

     //JS
     var xhr = XHR();
     xhr.open("get","test.php?qs=true&userName=abc&pwd=123456",true);
     xhr.onreadystatechange = function () {
         if (xhr.readyState==4 && xhr.status ==200) {
             alert(xhr.responseText);
         }
     };
     xhr.send(null);
     //PHP
     print_r($_GET);

 

POST 請求

     //JS
     var xhr = XHR();
     xhr.open("post","test.php",true);
     xhr.onreadystatechange = function () {
         if (xhr.readyState==4 && xhr.status ==200) {
             alert(xhr.responseText);
         }
     };
     //比GET請求多了一步
     xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
     //另外,資料是通過send方法傳送的
     xhr.send("qs=true&userName=abc&pwd=123456");
     //PHP
     header("Cache-Control: no-cache, must-revalidate");//可以讓瀏覽器不快取結果
     print_r($_POST);