AJAX學習筆記1 XHR物件介紹

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() catch (ex)}}
return new activexobject(arguments.callee.activexstring);
}

鑑於ie7+、 firefox、 opera、 chrome 和 safari 都支援原生的 xhr 物件，在這些瀏覽器中建立 xhr 物件要像下面這樣使用 xmlhttprequest 建構函式。

var xhr = new xmlhttprequest();

在必須支援ie7以下版本時，必須使用以下函式：

function createxhr() else if (typeof activexobject != "undefined") catch (ex)}}
return new activexobject(arguments.callee.activexstring);
} else 
}

建立物件的瀏覽器相容方式是var xhr = createxhr();

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，因為這個引數對有些瀏覽器來說是必需的。

200~300之間是正常響應，304表示請求的資源未修改，因此可以使用瀏覽器中快取的資料，也即響應有效。

 statustext： http 狀態的說明。

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() else 
}};xhr.open("get", "example.txt", true); //新增onreadystatechange事件後使用open()方法
xhr.send(null);

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 文件，傳入的文件經序列化之後將作為請求主體被提交到伺服器。當然，也可以在此傳入任何想傳送到伺服器的字串。

AJAX學習筆記1 XHR物件介紹

Ajax 學習筆記 1

AJAX學習筆記1

PyTorch學習筆記1 PyTorch介紹

AJAX學習筆記1 XHR物件介紹

Ajax 學習筆記 1

AJAX學習筆記1

PyTorch學習筆記1 PyTorch介紹

相關推薦