1、XMLHTTPRequest對(duì)象什么是?
最通用的定義為:XmlHttp是一套可以在Javascript、VbScript、Jscript等腳本語言中通過http協(xié)議傳送或從接收XML及其他數(shù)據(jù)的一套API。XmlHttp最大的用處是可以更新網(wǎng)頁的部分內(nèi)容而不需要刷新整個(gè)頁面。(這個(gè)功能正是AJAX的一大特點(diǎn)之一:))
來自MSDN的解釋:XmlHttp提供客戶端同http服務(wù)器通訊的協(xié)議??蛻舳丝梢酝ㄟ^XmlHttp對(duì)象(MSXML2.XMLHTTP.3.0)向http服務(wù)器發(fā)送請(qǐng)求并使用微軟XML文檔對(duì)象模型Microsoft? XML Document Object Model (DOM)處理回應(yīng)。
這里說些題外話,其實(shí)這個(gè)東西很早就出現(xiàn)了,只是以前瀏覽器的支持不夠,只有IE中才支持,所以大多數(shù)的WEB程序員都沒有怎么用他,但是現(xiàn)在情況發(fā)生了很大地改變,Mozilla和Safari把它采用為事實(shí)上的標(biāo)準(zhǔn),主流的瀏覽器都開始支持XMLHTTPRequest對(duì)象了。但是這里需要重點(diǎn)說明的是XMLHTTPRequest目前還不是一個(gè)W3C的標(biāo)準(zhǔn),所以在不同的瀏覽器上表現(xiàn)也稍有些區(qū)別。
2、創(chuàng)建XMLHTTPRequest對(duì)象
對(duì)了,說到區(qū)別,我們這里來看看怎么來聲明(使用)它,在使用XMLHTTPRequest對(duì)象發(fā)送請(qǐng)求和處理響應(yīng)之前,我們必須要用javascript創(chuàng)建一個(gè)XMLHTTPRequest對(duì)象。(IE把XMLHTTPRequest實(shí)現(xiàn)為一個(gè)ActiveX對(duì)象,其他的瀏覽器[如Firefox/Safari/Opear]則把它實(shí)現(xiàn)為一個(gè)本地的javascript對(duì)象)。下面我們就來看看具體怎么運(yùn)用javascript來創(chuàng)建它吧:
script language="javascript" type="text/javascript">
!--
var xmlhttp;
// 創(chuàng)建XMLHTTPRequest對(duì)象
function createXMLHTTPRequest(){
if(window.ActiveXObject){ // 判斷是否支持ActiveX控件
xmlhttp = new ActiveObject("Microsoft.XMLHTTP"); // 通過實(shí)例化ActiveXObject的一個(gè)新實(shí)例來創(chuàng)建XMLHTTPRequest對(duì)象
}
else if(window.XMLHTTPRequest){ // 判斷是否把XMLHTTPRequest實(shí)現(xiàn)為一個(gè)本地javascript對(duì)象
xmlhttp = new XMLHTTPRequest(); // 創(chuàng)建XMLHTTPRequest的一個(gè)實(shí)例(本地javascript對(duì)象)
}
}
//-->
/script>
3、屬性和方法
由于東西太多現(xiàn)在先用個(gè)頁面來列舉出說有的方法和屬性,以后再來詳細(xì)舉例(主要是本人也在學(xué)習(xí)中)。
html>
head>
title>XMLHTTPRequest對(duì)象的說明DEMO/title>
script language="javascript" type="text/javascript">
!--
var xmlhttp;
// 創(chuàng)建一個(gè)XMLHTTPRequest對(duì)象
function createXMLHTTPRequext()
{
if (window.ActiveXObject)
{
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
else if (window.XMLHTTPRequest)
{
xmlhttp = new XMLHTTPRequest();
}
}
function PostOrder(xmldoc)
{
createXMLHTTPRequext();
// 方法:open
// 創(chuàng)建一個(gè)新的http請(qǐng)求,并指定此請(qǐng)求的方法、URL以及驗(yàn)證信息
// 語法:oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
// 參數(shù)
// bstrMethod
// http方法,例如:POST、GET、PUT及PROPFIND。大小寫不敏感。
// bstrUrl
// 請(qǐng)求的URL地址,可以為絕對(duì)地址也可以為相對(duì)地址。
// varAsync[可選]
// 布爾型,指定此請(qǐng)求是否為異步方式,默認(rèn)為true。如果為真,當(dāng)狀態(tài)改變時(shí)會(huì)調(diào)用onreadystatechange屬性指定的回調(diào)函數(shù)。
// bstrUser[可選]
// 如果服務(wù)器需要驗(yàn)證,此處指定用戶名,如果未指定,當(dāng)服務(wù)器需要驗(yàn)證時(shí),會(huì)彈出驗(yàn)證窗口。
// bstrPassword[可選]
// 驗(yàn)證信息中的密碼部分,如果用戶名為空,則此值將被忽略。
// 備注:調(diào)用此方法后,可以調(diào)用send方法向服務(wù)器發(fā)送數(shù)據(jù)。
xmlhttp.Open("get", "http://localhost/example.htm", false);
// var book = xmlhttp.responseXML.selectSingleNode("http://book[@id='bk101']");
// alert(book.xml);
// 屬性:onreadystatechange
// onreadystatechange:指定當(dāng)readyState屬性改變時(shí)的事件處理句柄
// 語法:oXMLHttpRequest.onreadystatechange = funcMyHandler;
// 如下的例子演示當(dāng)XMLHTTPRequest對(duì)象的readyState屬性改變時(shí)調(diào)用HandleStateChange函數(shù),
// 當(dāng)數(shù)據(jù)接收完畢后(readystate == 4)此頁面上的一個(gè)按鈕將被激活
// 備注:此屬性只寫,為W3C文檔對(duì)象模型的擴(kuò)展.
xmlhttp.onreadystatechange = HandleStateChange;
// 方法:send
// 發(fā)送請(qǐng)求到http服務(wù)器并接收回應(yīng)
// 語法:oXMLHttpRequest.send(varBody);
// 參數(shù):varBody (欲通過此請(qǐng)求發(fā)送的數(shù)據(jù)。)
// 備注:此方法的同步或異步方式取決于open方法中的bAsync參數(shù),如果bAsync == False,此方法將會(huì)等待請(qǐng)求完成或者超時(shí)時(shí)才會(huì)返回,如果bAsync == True,此方法將立即返回。
// This method takes one optional parameter, which is the requestBody to use. The acceptable VARIANT input types are BSTR, SAFEARRAY of UI1 (unsigned bytes), IDispatch to an XML Document Object Model (DOM) object, and IStream *. You can use only chunked encoding (for sending) when sending IStream * input types. The component automatically sets the Content-Length header for all but IStream * input types.
// 如果發(fā)送的數(shù)據(jù)為BSTR,則回應(yīng)被編碼為utf-8, 必須在適當(dāng)位置設(shè)置一個(gè)包含charset的文檔類型頭。
// If the input type is a SAFEARRAY of UI1, the response is sent as is without additional encoding. The caller must set a Content-Type header with the appropriate content type.
// 如果發(fā)送的數(shù)據(jù)為XML DOM object,則回應(yīng)將被編碼為在xml文檔中聲明的編碼,如果在xml文檔中沒有聲明編碼,則使用默認(rèn)的UTF-8。
// If the input type is an IStream *, the response is sent as is without additional encoding. The caller must set a Content-Type header with the appropriate content type.
xmlhttp.Send(xmldoc);
// 方法:getAllResponseHeaders
// 獲取響應(yīng)的所有http頭
// 語法:strValue = oXMLHttpRequest.getAllResponseHeaders();
// 備注:每個(gè)http頭名稱和值用冒號(hào)分割,并以\r\n結(jié)束。當(dāng)send方法完成后才可調(diào)用該方法。
alert(xmlhttp.getAllResponseHeaders());
// 方法:getResponseHeader
// 從響應(yīng)信息中獲取指定的http頭
// 語法:strValue = oXMLHttpRequest.getResponseHeader(bstrHeader);
// 備注:當(dāng)send方法成功后才可調(diào)用該方法。如果服務(wù)器返回的文檔類型為"text/xml", 則這句話
// xmlhttp.getResponseHeader("Content-Type");將返回字符串"text/xml"??梢允褂胓etAllResponseHeaders方法獲取完整的http頭信息。
alert(xmlhttp.getResponseHeader("Content-Type"));
// 輸出http頭中的Content-Type列:當(dāng)前web服務(wù)器的版本及名稱。
document.frmTest.myButton.disabled = true;
// 方法:abort
// 取消當(dāng)前請(qǐng)求
// 語法:oXMLHttpRequest.abort();
// 備注:調(diào)用此方法后,當(dāng)前請(qǐng)求返回UNINITIALIZED 狀態(tài)。
// xmlhttp.abort();
// 方法:setRequestHeader
// 單獨(dú)指定請(qǐng)求的某個(gè)http頭
// 語法:oXMLHttpRequest.setRequestHeader(bstrHeader, bstrValue);
// 參數(shù):bstrHeader(字符串,頭名稱。)
//?bstrValue(字符串,值。)
// 備注:如果已經(jīng)存在已此名稱命名的http頭,則覆蓋之。此方法必須在open方法后調(diào)用。
// xmlhttp.setRequestHeader(bstrHeader, bstrValue);
}
function HandleStateChange()
{
// 屬性:readyState
// 返回XMLHTTP請(qǐng)求的當(dāng)前狀態(tài)
// 語法:lValue = oXMLHttpRequest.readyState;
// 備注:變量,此屬性只讀,狀態(tài)用長(zhǎng)度為4的整型表示.定義如下:
// 0 (未初始化) 對(duì)象已建立,但是尚未初始化(尚未調(diào)用open方法)
// 1 (初始化) 對(duì)象已建立,尚未調(diào)用send方法
// 2 (發(fā)送數(shù)據(jù)) send方法已調(diào)用,但是當(dāng)前的狀態(tài)及http頭未知
// 3 (數(shù)據(jù)傳送中) 已接收部分?jǐn)?shù)據(jù),因?yàn)轫憫?yīng)及http頭不全,這時(shí)通過responseBody和responseText獲取部分?jǐn)?shù)據(jù)會(huì)出現(xiàn)錯(cuò)誤,
// 4 (完成) 數(shù)據(jù)接收完畢,此時(shí)可以通過通過responseBody和responseText獲取完整的回應(yīng)數(shù)據(jù)
if (xmlhttp.readyState == 4)
{
document.frmTest.myButton.disabled = false;
// 屬性:responseBody
// 返回某一格式的服務(wù)器響應(yīng)數(shù)據(jù)
// 語法:strValue = oXMLHttpRequest.responseBody;
// 備注:變量,此屬性只讀,以u(píng)nsigned array格式表示直接從服務(wù)器返回的未經(jīng)解碼的二進(jìn)制數(shù)據(jù)。
alert(xmlhttp.responseBody);
// 屬性:responseStream
// 以Ado Stream對(duì)象的形式返回響應(yīng)信息
// 語法:strValue = oXMLHttpRequest.responseStream;
// 備注:變量,此屬性只讀,以Ado Stream對(duì)象的形式返回響應(yīng)信息。
alert(xmlhttp.responseStream);
// 屬性:responseText
// 將響應(yīng)信息作為字符串返回
// 語法:strValue = oXMLHttpRequest.responseText;
// 備注:變量,此屬性只讀,將響應(yīng)信息作為字符串返回。XMLHTTP嘗試將響應(yīng)信息解碼為Unicode字符串,
// XMLHTTP默認(rèn)將響應(yīng)數(shù)據(jù)的編碼定為UTF-8,如果服務(wù)器返回的數(shù)據(jù)帶BOM(byte-order mark),XMLHTTP可
// 以解碼任何UCS-2 (big or little endian)或者UCS-4 數(shù)據(jù)。注意,如果服務(wù)器返回的是xml文檔,此屬
// 性并不處理xml文檔中的編碼聲明。你需要使用responseXML來處理。?
alert(xmlhttp.responseText);
// 屬性:responseXML
// 將響應(yīng)信息格式化為Xml Document對(duì)象并返回
// 語法:var objDispatch = oXMLHttpRequest.responseXML;
// 備注:變量,此屬性只讀,將響應(yīng)信息格式化為Xml Document對(duì)象并返回。如果響應(yīng)數(shù)據(jù)不是有效的XML文檔,
// 此屬性本身不返回XMLDOMParseError,可以通過處理過的DOMDocument對(duì)象獲取錯(cuò)誤信息。
alert("Result = " + xmlhttp.responseXML.xml);
// 屬性:status
// 返回當(dāng)前請(qǐng)求的http狀態(tài)碼
// 語法:lValue = oXMLHttpRequest.status;
// 返回值:長(zhǎng)整形標(biāo)準(zhǔn)http狀態(tài)碼,定義如下:
// Number:Description?
// 100:Continue
// 101:Switching protocols
// 200:OK
// 201:Created
// 202:Accepted
// 203:Non-Authoritative Information
// 204:No Content
// 205:Reset Content
// 206:Partial Content
// 300:Multiple Choices
// 301:Moved Permanently
// 302:Found
// 303:See Other
// 304:Not Modified
// 305:Use Proxy
// 307:Temporary Redirect
// 400:Bad Request
// 401:Unauthorized
// 402:Payment Required
// 403:Forbidden
// 404:Not Found
// 405:Method Not Allowed
// 406:Not Acceptable
// 407:Proxy Authentication Required
// 408:Request Timeout
// 409:Conflict
// 410:Gone
// 411:Length Required
// 412:Precondition Failed
// 413:Request Entity Too Large
// 414:Request-URI Too Long
// 415:Unsupported Media Type
// 416:Requested Range Not Suitable
// 417:Expectation Failed
// 500:Internal Server Error
// 501:Not Implemented
// 502:Bad Gateway
// 503:Service Unavailable
// 504:Gateway Timeout
// 505:HTTP Version Not Supported
// 備注:長(zhǎng)整形,此屬性只讀,返回當(dāng)前請(qǐng)求的http狀態(tài)碼,此屬性僅當(dāng)數(shù)據(jù)發(fā)送并接收完畢后才可獲取。
alert(xmlhttp.status);
// 屬性:statusText
// 返回當(dāng)前請(qǐng)求的響應(yīng)行狀態(tài)
// 語法:strValue = oXMLHttpRequest.statusText;
// 備注:字符串,此屬性只讀,以BSTR返回當(dāng)前請(qǐng)求的響應(yīng)行狀態(tài),此屬性僅當(dāng)數(shù)據(jù)發(fā)送并接收完畢后才可獲取。
alert(xmlhttp.statusText);
}
}
//-->
/script>
/head>
body>
form name="frmTest">
input name="myButton" type="button" value="Click Me" onclick="PostOrder('http://localhost/example.htm');">
/form>
/body>
/html>
您可能感興趣的文章:- javascript一個(gè)無懈可擊的實(shí)例化XMLHttpRequest的方法
- AJax 學(xué)習(xí)筆記一(XMLHTTPRequest對(duì)象)
- javascript XMLHttpRequest對(duì)象全面剖析
- Ajax xmlHttpRequest的status的值的含義
- ajax 入門基礎(chǔ)之 XMLHttpRequest對(duì)象總結(jié)
- Javascript+XMLHttpRequest+asp.net無刷新讀取數(shù)據(jù)庫數(shù)據(jù)
- AJAX中同時(shí)發(fā)送多個(gè)請(qǐng)求XMLHttpRequest對(duì)象處理方法
- [js]輕便的XMLHttpRequest應(yīng)用函數(shù):downloadUrl()
- 建一個(gè)XMLHttpRequest對(duì)象池
- IE7提供XMLHttpRequest對(duì)象為兼容
- 一頁面多XMLHttpRequest對(duì)象
- 一份老外寫的XMLHttpRequest代碼多瀏覽器支持兼容性
- AJAX客戶端說明,XMLHttpRequest對(duì)象
- 建立XMLHttpRequest對(duì)象
- XMLHttpRequest of ajax
- AJAX入門之XMLHttpRequest慨述
- XMLHTTPRequest的屬性和方法簡(jiǎn)介