XmlHttpRequest 对象详解
生活随笔
收集整理的這篇文章主要介紹了
XmlHttpRequest 对象详解
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
最通用的定義為:XmlHttp是一套可以在Javascript、VbScript、Jscript等腳本語言中通過http協議傳送或從接收XML及其他數據的一套API。XmlHttp最大的用處是可以更新網頁的部分內容而不需要刷新整個頁面。
來自MSDN的解釋:XmlHttp提供客戶端同http服務器通訊的協議。客戶端可以通過XmlHttp對象(MSXML2.XMLHTTP.3.0)向 http服務器發送請求并使用微軟XML文檔對象模型Microsoft? XML Document Object Model (DOM)處理回應。 現在的絕對多數瀏覽器都增加了對XmlHttp的支持,IE中使用ActiveXObject方式創建XmlHttp對象,其他瀏覽器如:Firefox、Opera等通過window.XMLHttpRequest來創建xmlhttp對象。
* 表示此屬性是W3C文檔對象模型的擴展.
-------------------------
--------------------------
--------------------------
詳細說明::
XMLHttpRequest 是 Ajax 的關鍵技術,然而XMLHttpRequest 并非W3C標準。它目前所完成的大量功能將被過渡到W3C的新項目“DOM Level 3 Load and Save”標準里面。通過XMLHttpReques,web頁可以從web 服務器得到反饋和需求而不用重新加載頁面。用戶將停留在相同的頁面,而不會注意到腳本可能在后臺需求某頁面或是在給服務器發送數據。Google Suggest 就是用XMLHttpRequest對象來建立的一個動態web 接口:當你開始在Google 的搜索框中打字時,一個JS腳本發送字母到一服務器并從服務器返回一列建議。W3C “DOM Level 3 Load and Save”標準包含一些相似的功能,但是這些還不能在任何一瀏覽器中得到實現。所以就目前,如你需要從瀏覽器發送HTTP請求,你還是得用到 XMLHttpRequest 對象。Javascript 也是靠XMLHttpRequest 來獲取XML的。對于不同的瀏覽器,創建 XMLHttpRequest 對象的方式有些不一樣,IE把XMLHttpRequest實現為一個ActiveX對象,其他瀏覽器把它實現為一個本地JavaScript對象。經過綜合多方的腳本,采用以下腳本基本上能夠滿足在各種瀏覽器中創建XMLHttpRequest 的需求。 <script type=”text/javascript”>?
var?xmlHttp;?
function?creatXMLHttpRequest() {?
if?(window.ActiveXObject) {?
xmlHttp =?new?ActiveXObject(”Microsoft.XMLHTTP”);?
}?
else?if?(window.XMLHttpRequest) {?
xmlHttp =?new?XMLHttpRequest();?
}?
else?{?
return;?
}?
} 其中XMLHttpRequest對象包含了一些方法以及屬性,先不管它們,等用到了再看。 Methods(方法) abort()?
Cancels the current request 取消當前的請求 getAllResponseHeaders()?
Returns the complete set of http headers as a string 以字符串的形式返回完整的HTTP頭信息 getResponseHeader(”headername”)?
Returns the value of the specified http header 返回指定的HTTP頭信息值 open(”method”,”URL”,async,”uname”,”pswd”)?
Specifies the method, URL, and other optional attributes of a request 為一請求指定發放,URL,和其他的任意屬性。 The method parameter can have a value of “GET”, “POST”, or “PUT” (use “GET” when requesting data and use “POST” when sending data (especially if the length of the data is greater than 512 bytes. 方法參數可以是 “GET”, “POST”, 或 “PUT” 中的一個(請求數據使用GET比較多而POST發送數據[特別是長度大于512字節的數據]) The URL parameter may be either a relative or complete URL. URL可以是絕對路徑或是相對的路徑。 The async parameter specifies whether the request should be handled asynchronously or not. true means that script processing carries on after the send() method, without waiting for a response. false means that the script waits for a response before continuing script processing 異步參數指明是否應該處理請求。設置成“True”的意思是在send()方法結束后腳本繼續執行,而不需要等待服務器的回應。“False”則是腳本必須等待服務器的回應后才能繼續執行。 send(content)?
Sends the request 發送請求 setRequestHeader(”label”,”value”)?
Adds a label/value pair to the http header to be sent Properties屬性 onreadystatechange* :
An event handler for an event that fires at every state change, typically a call to a JavaScript function.
這個是個最重要的屬性,為每次狀態的變化而準備的事件處理,往往用于觸發一個JavaScript運行。 readyState :
Returns the state of the object:
返回的狀態對象:
Returns the response as a string
以字符串形式返回 responseXML :?
Returns the response as XML. This property returns an XML document object, which can be examined and parsed using W3C DOM node tree methods and properties
以XML的形式返回,這個屬性返回一XML文檔對象,可用W3C的DOM點樹方法和屬性來進行解析和檢驗。 status :?
Returns the status as a number (e.g. 404 for “Not Found” or 200 for “OK”)
以數字的形式返回狀態(比如404是”沒有找到“或200是”好的“) statusText:?
Returns the status as a string (e.g. “Not Found” or “OK”)
以字符串形式返回狀態(比如”沒有找到“或”好的“)
步驟一:”請求” — 如何發送一個HTTP請求? 發送HTTP請求是關鍵,我們先總結一下步驟,一共是4步: 1. 獲得一個XMLHttpRequest實例,可以通過創建,或者訪問已存在的XMLHttpRequest對象實例。 <script type=”text/javascript”>?
????????var?xmlHttp;?
????????function?creatXMLHttpRequest() {?
????????if?(window.ActiveXObject) {?
????????xmlHttp =?new?ActiveXObject(”Microsoft.XMLHTTP”);?
????????}?
????????else?if?(window.XMLHttpRequest) {?
????????xmlHttp =?new?XMLHttpRequest();?
????????}?
????????else?{?
????????return;?
????????}?
????????} ?2. 接下來要決定當收到服務器的響應后,需要做什么。這需要告訴HTTP請求對象用哪一個JavaScript函數處理這個響應。可以將對象的onreadystatechange屬性設置為要使用的JavaScript的函數名。xmlHttp.onreadystatechange = handleStateChange; 注意:在函數名后沒有括號,也無需傳遞參數。 3. 在定義了如何處理響應后,就要發送請求了。可以調用HTTP請求類的open()和send()方法, 如: xmlHttp.open(”GET”, “simpleResponse.xml”, true);
??? xmlHttp.send(null); 關于open()后面的幾個參數這里要解釋一下了。第一個參數是HTTP請求方式 – GET,POST,HEAD 或任何服務器所支持的您想調用的方式。按照HTTP規范,該參數要大寫;否則,某些瀏覽器(如FireFox) 可能無法處理請求。第二個參數是請求頁面的 URL。由于自身安全特性的限制,該頁面不能為第三方域名的頁面。同時一定要保證在所有的頁面中都使用準確的域名,否則調用 open()會得到“permission denied”的錯誤提示。一個常見的錯誤是訪問站點時使用domain.tld,而當請求頁面時,卻使用“www.domain.tld”。第三個參數設置請求是否為異步模式。如果是ture, JavaScript函數將繼續執行,而不等待服務器響應。這就是”AJAX”中的”Asynchronous”。 4. 向服務器發送請求。send()方法向指定的目標資源發送請求。send()方法允許一個參數,可以是一個字符串或者一個DOM對象。這個參數會作為請求本身的一部分被傳輸到目的URL。當send()方法里面包含有參數的時候,要確定open()方法里面的第一個參數是“POST”。如果沒有數據要作為請求本身的一部分發送,就使用“null”,正如我們的例子中使用的。
步驟 2 – “收到” — 處理服務器的響應 當發送請求時,要提供指定處理響應的JavaScript函數名,步驟一的第二點我們已經定義了這個函數(handleStateChange)。我們來看看這個函數的功能是什么。首先函數會檢查請求的狀態,如果狀態值是4,就意味著一個完整的服務器響應已經收到了,您將可以處理該響應。 if (XMLHttp.readyState == 4) {
??? // everything is good, the response is received
??? } else {
??? // still not ready
??? } readyState的取值如下:
// perfect!
} else {
// there was a problem with the request,
// for example the response may be a 404 (Not Found)
// or 500 (Internal Server Error) response codes
} 在檢查完請求的狀態值和響應的HTTP狀態值后, 您就可以處理從服務器得到的數據了。有兩種方式可以得到這些數據: xmlHttp.responseText – 以文本字符串的方式返回服務器的響應
xmlHttp.responseXML – 以XMLDocument對象方式返回響應。處理XMLDocument對象可以用JavaScript DOM函數 整理一下步驟2的代碼,就是處理服務器相應函數(handleStateChange): function?handleStateChange() {?
if(xmlHttp.readyState == 4) {?
if(xmlHttp.status == 200) {?
alert(”The server repilied?with: ” + xmlHttp.responseText);?
}?
}?
} 步驟 3 – “萬事俱備” - 簡單實例 我們現在將整個過程完整地做一次。 發送一個簡單的HTTP請求。我們用JavaScript請求一個XML文件,simpleResponse.xml,文件的文本內容為”Hello from the server!”,然后我們”alert()”simpleResponse.xml文件的內容。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "<A?href="http://www.w3.org/TR/html4/strict.dtd">http://www.w3.org/TR/html4/strict.dtd</A>">?
<html>?
????<head>?
????????<meta?http-equiv="Content-Type"?content="text/html; charset=iso-8859-1">?
????????<title>Simple XMLHttpRequest</title>?
????????<script?type="text/javascript">?
??????????? var xmlHttp;?
??????????? function createXMLHttpRequest(){?
??????????????? if (window.ActiveXObject) {?
??????????????????? xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");?
??????????????? }?
??????????????? else????
??????????????????? if (window.XMLHttpRequest) {?
??????????????????????? xmlHttp = new XMLHttpRequest();?
??????????????????? }?
??????????? }?
???????????????
??????????? function startRequest(){?
??????????????? createXMLHttpRequest();//創建XMLHttpRequest?
??????????????? xmlHttp.onreadystatechange = handleStateChange;?
??????????????? xmlHttp.open("GET", "simpleResponse.xml", true);?
??????????????? xmlHttp.send(null);?
??????????? }?
???????????????
??????????? function handleStateChange(){?
??????????????? if (xmlHttp.readyState == 4) {?
??????????????????? if (xmlHttp.status == 200) {?
??????????????????????? alert("The server replied with:" + xmlHttp.responseText);?
??????????????????? }?
??????????????? }?
??????????? }?
????????</script>?
????</head>?
????<body>?
????????<form?action="#">?
????????????<input?type="button"?value="Start Basic Asynchronous Request"?onclick="startRequest();"/>?
????????</form>?
????</body>?
</html> 本文轉自sucre03 51CTO博客,原文鏈接:http://blog.51cto.com/sucre/354165,如需轉載請自行聯系原作者
來自MSDN的解釋:XmlHttp提供客戶端同http服務器通訊的協議。客戶端可以通過XmlHttp對象(MSXML2.XMLHTTP.3.0)向 http服務器發送請求并使用微軟XML文檔對象模型Microsoft? XML Document Object Model (DOM)處理回應。 現在的絕對多數瀏覽器都增加了對XmlHttp的支持,IE中使用ActiveXObject方式創建XmlHttp對象,其他瀏覽器如:Firefox、Opera等通過window.XMLHttpRequest來創建xmlhttp對象。
XmlHttp對象參考:
屬性:
| onreadystatechange* | 指定當readyState屬性改變時的事件處理句柄。只寫 |
| readyState | 返回當前請求的狀態,只讀. |
| responseBody | 將回應信息正文以unsigned byte數組形式返回.只讀 |
| responseStream | 以Ado Stream對象的形式返回響應信息。只讀 |
| responseText | 將響應信息作為字符串返回.只讀 |
| responseXML | 將響應信息格式化為Xml Document對象并返回,只讀 |
| status | 返回當前請求的http狀態碼.只讀 |
| statusText | 返回當前請求的響應行狀態,只讀 |
方法:
| abort | 取消當前請求 |
| getAllResponseHeaders | 獲取響應的所有http頭 |
| getResponseHeader | 從響應信息中獲取指定的http頭 |
| open | 創建一個新的http請求,并指定此請求的方法、URL以及驗證信息(用戶名/密碼) |
| send | 發送請求到http服務器并接收回應 |
| setRequestHeader | 單獨指定請求的某個http頭 |
事件:
無-------------------------
--------------------------
--------------------------
詳細說明::
XMLHttpRequest 是 Ajax 的關鍵技術,然而XMLHttpRequest 并非W3C標準。它目前所完成的大量功能將被過渡到W3C的新項目“DOM Level 3 Load and Save”標準里面。通過XMLHttpReques,web頁可以從web 服務器得到反饋和需求而不用重新加載頁面。用戶將停留在相同的頁面,而不會注意到腳本可能在后臺需求某頁面或是在給服務器發送數據。Google Suggest 就是用XMLHttpRequest對象來建立的一個動態web 接口:當你開始在Google 的搜索框中打字時,一個JS腳本發送字母到一服務器并從服務器返回一列建議。W3C “DOM Level 3 Load and Save”標準包含一些相似的功能,但是這些還不能在任何一瀏覽器中得到實現。所以就目前,如你需要從瀏覽器發送HTTP請求,你還是得用到 XMLHttpRequest 對象。Javascript 也是靠XMLHttpRequest 來獲取XML的。對于不同的瀏覽器,創建 XMLHttpRequest 對象的方式有些不一樣,IE把XMLHttpRequest實現為一個ActiveX對象,其他瀏覽器把它實現為一個本地JavaScript對象。經過綜合多方的腳本,采用以下腳本基本上能夠滿足在各種瀏覽器中創建XMLHttpRequest 的需求。 <script type=”text/javascript”>?
var?xmlHttp;?
function?creatXMLHttpRequest() {?
if?(window.ActiveXObject) {?
xmlHttp =?new?ActiveXObject(”Microsoft.XMLHTTP”);?
}?
else?if?(window.XMLHttpRequest) {?
xmlHttp =?new?XMLHttpRequest();?
}?
else?{?
return;?
}?
} 其中XMLHttpRequest對象包含了一些方法以及屬性,先不管它們,等用到了再看。 Methods(方法) abort()?
Cancels the current request 取消當前的請求 getAllResponseHeaders()?
Returns the complete set of http headers as a string 以字符串的形式返回完整的HTTP頭信息 getResponseHeader(”headername”)?
Returns the value of the specified http header 返回指定的HTTP頭信息值 open(”method”,”URL”,async,”uname”,”pswd”)?
Specifies the method, URL, and other optional attributes of a request 為一請求指定發放,URL,和其他的任意屬性。 The method parameter can have a value of “GET”, “POST”, or “PUT” (use “GET” when requesting data and use “POST” when sending data (especially if the length of the data is greater than 512 bytes. 方法參數可以是 “GET”, “POST”, 或 “PUT” 中的一個(請求數據使用GET比較多而POST發送數據[特別是長度大于512字節的數據]) The URL parameter may be either a relative or complete URL. URL可以是絕對路徑或是相對的路徑。 The async parameter specifies whether the request should be handled asynchronously or not. true means that script processing carries on after the send() method, without waiting for a response. false means that the script waits for a response before continuing script processing 異步參數指明是否應該處理請求。設置成“True”的意思是在send()方法結束后腳本繼續執行,而不需要等待服務器的回應。“False”則是腳本必須等待服務器的回應后才能繼續執行。 send(content)?
Sends the request 發送請求 setRequestHeader(”label”,”value”)?
Adds a label/value pair to the http header to be sent Properties屬性 onreadystatechange* :
An event handler for an event that fires at every state change, typically a call to a JavaScript function.
這個是個最重要的屬性,為每次狀態的變化而準備的事件處理,往往用于觸發一個JavaScript運行。 readyState :
Returns the state of the object:
返回的狀態對象:
- 0 = uninitialized[初始化]
- 1 = loading[加載中]
- 2 = loaded[加載完畢]
- 3 = interactive[交互]
- 4 = complete [完畢]
Returns the response as a string
以字符串形式返回 responseXML :?
Returns the response as XML. This property returns an XML document object, which can be examined and parsed using W3C DOM node tree methods and properties
以XML的形式返回,這個屬性返回一XML文檔對象,可用W3C的DOM點樹方法和屬性來進行解析和檢驗。 status :?
Returns the status as a number (e.g. 404 for “Not Found” or 200 for “OK”)
以數字的形式返回狀態(比如404是”沒有找到“或200是”好的“) statusText:?
Returns the status as a string (e.g. “Not Found” or “OK”)
以字符串形式返回狀態(比如”沒有找到“或”好的“)
步驟一:”請求” — 如何發送一個HTTP請求? 發送HTTP請求是關鍵,我們先總結一下步驟,一共是4步: 1. 獲得一個XMLHttpRequest實例,可以通過創建,或者訪問已存在的XMLHttpRequest對象實例。 <script type=”text/javascript”>?
????????var?xmlHttp;?
????????function?creatXMLHttpRequest() {?
????????if?(window.ActiveXObject) {?
????????xmlHttp =?new?ActiveXObject(”Microsoft.XMLHTTP”);?
????????}?
????????else?if?(window.XMLHttpRequest) {?
????????xmlHttp =?new?XMLHttpRequest();?
????????}?
????????else?{?
????????return;?
????????}?
????????} ?2. 接下來要決定當收到服務器的響應后,需要做什么。這需要告訴HTTP請求對象用哪一個JavaScript函數處理這個響應。可以將對象的onreadystatechange屬性設置為要使用的JavaScript的函數名。xmlHttp.onreadystatechange = handleStateChange; 注意:在函數名后沒有括號,也無需傳遞參數。 3. 在定義了如何處理響應后,就要發送請求了。可以調用HTTP請求類的open()和send()方法, 如: xmlHttp.open(”GET”, “simpleResponse.xml”, true);
??? xmlHttp.send(null); 關于open()后面的幾個參數這里要解釋一下了。第一個參數是HTTP請求方式 – GET,POST,HEAD 或任何服務器所支持的您想調用的方式。按照HTTP規范,該參數要大寫;否則,某些瀏覽器(如FireFox) 可能無法處理請求。第二個參數是請求頁面的 URL。由于自身安全特性的限制,該頁面不能為第三方域名的頁面。同時一定要保證在所有的頁面中都使用準確的域名,否則調用 open()會得到“permission denied”的錯誤提示。一個常見的錯誤是訪問站點時使用domain.tld,而當請求頁面時,卻使用“www.domain.tld”。第三個參數設置請求是否為異步模式。如果是ture, JavaScript函數將繼續執行,而不等待服務器響應。這就是”AJAX”中的”Asynchronous”。 4. 向服務器發送請求。send()方法向指定的目標資源發送請求。send()方法允許一個參數,可以是一個字符串或者一個DOM對象。這個參數會作為請求本身的一部分被傳輸到目的URL。當send()方法里面包含有參數的時候,要確定open()方法里面的第一個參數是“POST”。如果沒有數據要作為請求本身的一部分發送,就使用“null”,正如我們的例子中使用的。
步驟 2 – “收到” — 處理服務器的響應 當發送請求時,要提供指定處理響應的JavaScript函數名,步驟一的第二點我們已經定義了這個函數(handleStateChange)。我們來看看這個函數的功能是什么。首先函數會檢查請求的狀態,如果狀態值是4,就意味著一個完整的服務器響應已經收到了,您將可以處理該響應。 if (XMLHttp.readyState == 4) {
??? // everything is good, the response is received
??? } else {
??? // still not ready
??? } readyState的取值如下:
- 0 (未初始化)
- 1 (正在裝載)
- 2 (裝載完畢)
- 3 (交互中)
- 4 (完成)
// perfect!
} else {
// there was a problem with the request,
// for example the response may be a 404 (Not Found)
// or 500 (Internal Server Error) response codes
} 在檢查完請求的狀態值和響應的HTTP狀態值后, 您就可以處理從服務器得到的數據了。有兩種方式可以得到這些數據: xmlHttp.responseText – 以文本字符串的方式返回服務器的響應
xmlHttp.responseXML – 以XMLDocument對象方式返回響應。處理XMLDocument對象可以用JavaScript DOM函數 整理一下步驟2的代碼,就是處理服務器相應函數(handleStateChange): function?handleStateChange() {?
if(xmlHttp.readyState == 4) {?
if(xmlHttp.status == 200) {?
alert(”The server repilied?with: ” + xmlHttp.responseText);?
}?
}?
} 步驟 3 – “萬事俱備” - 簡單實例 我們現在將整個過程完整地做一次。 發送一個簡單的HTTP請求。我們用JavaScript請求一個XML文件,simpleResponse.xml,文件的文本內容為”Hello from the server!”,然后我們”alert()”simpleResponse.xml文件的內容。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "<A?href="http://www.w3.org/TR/html4/strict.dtd">http://www.w3.org/TR/html4/strict.dtd</A>">?
<html>?
????<head>?
????????<meta?http-equiv="Content-Type"?content="text/html; charset=iso-8859-1">?
????????<title>Simple XMLHttpRequest</title>?
????????<script?type="text/javascript">?
??????????? var xmlHttp;?
??????????? function createXMLHttpRequest(){?
??????????????? if (window.ActiveXObject) {?
??????????????????? xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");?
??????????????? }?
??????????????? else????
??????????????????? if (window.XMLHttpRequest) {?
??????????????????????? xmlHttp = new XMLHttpRequest();?
??????????????????? }?
??????????? }?
???????????????
??????????? function startRequest(){?
??????????????? createXMLHttpRequest();//創建XMLHttpRequest?
??????????????? xmlHttp.onreadystatechange = handleStateChange;?
??????????????? xmlHttp.open("GET", "simpleResponse.xml", true);?
??????????????? xmlHttp.send(null);?
??????????? }?
???????????????
??????????? function handleStateChange(){?
??????????????? if (xmlHttp.readyState == 4) {?
??????????????????? if (xmlHttp.status == 200) {?
??????????????????????? alert("The server replied with:" + xmlHttp.responseText);?
??????????????????? }?
??????????????? }?
??????????? }?
????????</script>?
????</head>?
????<body>?
????????<form?action="#">?
????????????<input?type="button"?value="Start Basic Asynchronous Request"?onclick="startRequest();"/>?
????????</form>?
????</body>?
</html> 本文轉自sucre03 51CTO博客,原文鏈接:http://blog.51cto.com/sucre/354165,如需轉載請自行聯系原作者
總結
以上是生活随笔為你收集整理的XmlHttpRequest 对象详解的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 微信 登录 Scope 参数错误或没有
- 下一篇: Unity3D - UGUI的手动搭建