AJAX學習筆記1：XHR對象介紹

Bowman_han 發布于2019-08-20 11:09 / 3397人閱讀

摘要：是第一款引入對象的瀏覽器。在中，對象是通過庫中的一個對象實現的。在收到響應后，響應的數據會自動填充對象的屬性，相關的屬性簡介如下。作為響應主體被返回的文本。屬性對象的屬性表示請求響應過程的當前活動階段。

創建Ajax對象的跨瀏覽器兼容方法

Ajax 技術的核心是 XMLHttpRequest 對象（簡稱 XHR），這是由微軟首先引入的一個特性，其他瀏覽器提供商后來都提供了相同的實現。IE5 是第一款引入 XHR 對象的瀏覽器。在 IE5 中， XHR 對象是通過 MSXML 庫中的一個 ActiveX對象實現的。因此，在 IE 中可能會遇到三種不同版本的 XHR 對象，即 MSXML2.XMLHttp、MSXML2.XMLHttp.3.0 和 MXSML2.XMLHttp.6.0。因此，創建XHR對象應該是用一個函數：

//適用于 IE7 之前的版本
function createXHR(){
    if (typeof arguments.callee.activeXString != "string"){
        var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0",
        "MSXML2.XMLHttp"],i, len;
        for (i=0,len=versions.length; i < len; i++){
            try {
                new ActiveXObject(versions[i]);
                arguments.callee.activeXString = versions[i];
                break;
            } catch (ex){
                //跳過
            }
        }
    }
    return new ActiveXObject(arguments.callee.activeXString);
}

鑒于IE7+、 Firefox、 Opera、 Chrome 和 Safari 都支持原生的 XHR 對象，在這些瀏覽器中創建 XHR 對象要像下面這樣使用 XMLHttpRequest 構造函數。

var xhr = new XMLHttpRequest();

在必須支持IE7以下版本時，必須使用以下函數：

function createXHR(){
    /*如果瀏覽器支持原生XMLHttpRequest對象，返回用原生對象創建的XMLHttpRequest對象*/
    if (typeof XMLHttpRequest != "undefined"){
        return new XMLHttpRequest();
    } else if (typeof ActiveXObject != "undefined"){
     //否則使用MSXML庫的ActiveX對象創建
    if (typeof arguments.callee.activeXString != "string"){
        var versions = [ "MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0",
        "MSXML2.XMLHttp"],i, len;
        for (i=0,len=versions.length; i < len; i++){
            try {
                new ActiveXObject(versions[i]);
                arguments.callee.activeXString = versions[i];
                break;
            } catch (ex){
                //跳過
            }
        }
    }
    return new ActiveXObject(arguments.callee.activeXString);
    } else {   //都不支持則返回錯誤
    throw new Error("No XHR object available.");
    }
}

創建對象的瀏覽器兼容方式是 var xhr = createXHR();

XHR對象的兩個方法

open()：它接受 3 個參數：要發送的請求的類型（"get"、 "post"等）、請求的 URL 和表示是否異步發送請求的布爾值（true代表異步，false代表同步，默認是是異步）。下面就是調用這個方法的例子。
xhr.open("get", "example.php", false);
調用 open()方法并不會真正發送請求，而只是啟動一個請求以備發送。具體發送請求需要使用.send()方法。

send()方法：
xhr.open("get", "example.txt", false);
xhr.send(null);
這里的 send()方法接收一個參數，即要作為請求主體發送的數據。如果不需要通過請求主體發送數據，則必須傳入 null，因為這個參數對有些瀏覽器來說是必需的。

在收到響應后，響應的數據會自動填充 XHR 對象的屬性，相關的屬性簡介如下。
? responseText：作為響應主體被返回的文本。
? responseXML：如果響應的內容類型是"text/xml"或"application/xml"，這個屬性中將保
存包含著響應數據的 XML DOM 文檔。對于非XML數據，responseXML的值是null。
? status：響應的 HTTP 狀態。200~300之間是正常響應，304表示請求的資源未修改，因此可以使用瀏覽器中緩存的數據，也即響應有效。
? statusText： HTTP 狀態的說明。

readyState 屬性

XHR 對象的 readyState 屬性表示請求/響應過程的當前活動階段。這個屬性可取的值如下。
? 0：未初始化。尚未調用 open()方法。
? 1：啟動。已經調用 open()方法，但尚未調用 send()方法。
? 2：發送。已經調用 send()方法，但尚未接收到響應。
? 3：接收。已經接收到部分響應數據。
? 4：完成。已經接收到全部響應數據，而且已經可以在客戶端使用了。
只要 readyState 屬性的值由一個值變成另一個值，都會觸發一次 onreadystatechange 事件。可以利用這個事件來檢測每次狀態變化后 readyState 的值。通常，我們只對 readyState 值為 4 的階段感興趣，因為這時所有數據都已經就緒。不過，必須在調用 open()之前指定 onreadystatechange事件處理程序才能確保跨瀏覽器兼容性。使用DOM0級事件處理程序的代碼如下：

var xhr = createXHR();
xhr.onreadystatechange = function(){
    if (xhr.readyState == 4){ //每次readyState改變都檢查一次，僅當4時才真正作用
            //如果狀態碼>200且<300，或者為304,輸出響應文本
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
            alert(xhr.responseText);
        } else {
            alert("Request was unsuccessful: " + xhr.status);
        }
    }
};
xhr.open("get", "example.txt", true); //添加onreadystatechange事件后使用open()方法
xhr.send(null);

XHR的兩種請求方式：GET and POST

GET請求：
GET 是最常見的請求類型，最常用于向服務器查詢某些信息。必要時，可以將查詢字符串參數追加到 URL 的末尾，以便將信息發送給服務器。對 XHR 而言，位于傳入 open()方法的 URL 末尾的查詢字符串必須經過正確的編碼才行。使用 GET 請求經常會發生的一個錯誤，就是查詢字符串的格式有問題。查詢字符串中每個參數的名稱和值都必須使用 encodeURIComponent()進行編碼，然后才能放到 URL 的末尾；而且所有名-值對兒都必須由和號（&）分隔：

xhr.open("get", "example.php?name1=value1&name2=value2", true);

POST請求：通常用于向服務器發送應該被保存的數據。 POST 請求應該把數據作為請求的主體提交，而 GET 請求傳統上不是這樣。 POST 請求的主體可以包含非常多的數據，
而且格式不限。在 open()方法第一個參數的位置傳入"post"，就可以初始化一個 POST 請求，如下面的例子所示。

xhr.open("post", "example.php", true);

發送 POST 請求的第二步就是向 send()方法中傳入某些數據。由于 XHR 最初的設計主要是為了處理 XML，因此可以在此傳入 XML DOM 文檔，傳入的文檔經序列化之后將作為請求主體被提交到服務器。當然，也可以在此傳入任何想發送到服務器的字符串。

GPU云服務器云服務器對象屬性介紹 self對象介紹 AJAX核心對象學習筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80420.html

AJAX的學習筆記

摘要：的學習筆記是異步和的縮寫，它的作用是執行異步的網絡請求。這就是一個格式的，向這個地址請求，將得到一個回調函數，執行就得到數據。 AJAX的學習筆記 AJAX是異步JavaScript和XML的縮寫，它的作用是執行異步的網絡請求。因為JS是線性同步，如果需要用戶向瀏覽器發送一個請求，那么就需要等瀏覽器接收到了結果才能繼續運行，如果發送到接受的時間太長，瀏覽器就會很長時間處于假死狀態，這樣...

RobinTang 2019-08-22 14:03 評論0 收藏0
AJAX學習筆記2：XHR實現跨域資源共享（CORS）以及和JSONP的對比

摘要：補充同源策略還應該對一些特殊情況做處理，比如限制協議下腳本的訪問權限。注意，該請求的查詢字符串有一個參數，用來指定回調函數的名字，這對于是必需的。 1 前言：首先對參考文章作者表示感謝，你們的經驗總結給我們這些新手提供了太多資源。本文致力于解決AJAX的CORS問題，我在邏輯上進行了梳理：首先，系統的總結了CORS問題的起源---同源策略；其次，介紹JSONP這種僅能支持GET請求的...

QiuyueZhong 2019-08-20 11:36 評論0 收藏0
AJAX學習筆記2：XHR實現跨域資源共享（CORS）以及和JSONP的對比

摘要：補充同源策略還應該對一些特殊情況做處理，比如限制協議下腳本的訪問權限。注意，該請求的查詢字符串有一個參數，用來指定回調函數的名字，這對于是必需的。 1 前言：首先對參考文章作者表示感謝，你們的經驗總結給我們這些新手提供了太多資源。本文致力于解決AJAX的CORS問題，我在邏輯上進行了梳理：首先，系統的總結了CORS問題的起源---同源策略；其次，介紹JSONP這種僅能支持GET請求的...

makeFoxPlay 2019-08-01 15:49 評論0 收藏0
Ajax學習筆記

摘要：最近在學，剛剛入門，用到很多與相關的交互。也用了挺久的了，想寫一下學習筆記來記錄一下。實現過程是的基礎，是核心對象，首先要實例化一個對象進行請求，規定請求的類型以及是否異步處理請求。響應服務器狀態響應服務器狀態涉及對象的三個重要的屬性。最近在學php，剛剛入門，用到很多與Ajax相關的交互。Ajax也用了挺久的了，想寫一下學習筆記來記錄一下。今天先簡單寫一下原理和過程。歡迎大家一起探...

Forest10 2019-08-23 14:01 評論0 收藏0
Ajax學習筆記

摘要：最近在學，剛剛入門，用到很多與相關的交互。也用了挺久的了，想寫一下學習筆記來記錄一下。實現過程是的基礎，是核心對象，首先要實例化一個對象進行請求，規定請求的類型以及是否異步處理請求。響應服務器狀態響應服務器狀態涉及對象的三個重要的屬性。最近在學php，剛剛入門，用到很多與Ajax相關的交互。Ajax也用了挺久的了，想寫一下學習筆記來記錄一下。今天先簡單寫一下原理和過程。歡迎大家一起探...

wing324 2019-08-02 12:14 評論0 收藏0