AJax 學習筆記一(XMLHTTPRequest對象)_AJAX相關

來源:互聯網
上載者:User
現在很多公司都在做標準的靜態頁面,為了增強客戶的體驗效果,經常會涉及到AJax效果,而設計AJax使用的一種重要技術(工具)就是XMLHttpRequest對象了。今天學習了點關於XMLHttpRequest對象的一些方法和屬性,有點體會,在這裡也想記錄起來。
1、何為XMLHttpRequest
  定義:XMLHttp是一套可以在Javascript、VbScript、Jscript等指令碼語言中通過http協議傳送或從接收XML及其他資料的一套API。XmlHttp最大的用處是可以更新網頁的部分內容而不需要重新整理整個頁面(這是AJax的最大特點之一哦)。
2、建立XMLHttpRequest對象
  在使用XMLHTTPRequest對象發送請求和處理響應之前,我們必須要用javascript建立一個XMLHTTPRequest對象。(IE把XMLHTTPRequest實現為一個ActiveX對象,其他的瀏覽器[如Firefox/Safari/Opear]則把它實現為一個本地的javascript對象)。請看下面的例子吧
複製代碼 代碼如下:

<script language="javascript" type="text/javascript">
var xmlhttp;
// 建立XMLHTTPRequest對象
function createXMLHTTPRequest(){
if(window.ActiveXObject){     // 判斷是否支援ActiveX控制項
xmlhttp = new ActiveObject("Microsoft.XMLHTTP"); // IE瀏覽器支援的建立方式
}
else if(window.XMLHTTPRequest){    // 判斷是否把XMLHTTPRequest實現為一個本地javascript對象
xmlhttp = new XMLHTTPRequest(); // FireFox,Opera等瀏覽器支援的建立方式
}
}
</script>

3、屬性和方法
因為涉及的內容很多,本人也是正在學習之中,所以也是參考人家的例子學習的,所以在此將別人好的東西粘貼上來 ,以便複習
複製代碼 代碼如下:

<html>
<head>
<title>XMLHTTPRequest對象的說明DEMO</title>
<script language="javascript" type="text/javascript">
<!--
var xmlhttp;
// 建立一個XMLHTTPRequest對象
function createXMLHTTPRequext(){
if(window.ActiveXObject) {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
else if(window.XMLHTTPRequest){
xmlhttp = new XMLHTTPRequest();
}
}
function PostOrder(xmldoc)
{
createXMLHTTPRequext();

// 方法:open
// 建立一個新的http請求,並指定此請求的方法、URL以及驗證資訊
// 文法:oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
// 參數
// bstrMethod
// http方法,例如:POST、GET、PUT及PROPFIND。大小寫不敏感。
// bstrUrl
// 請求的URL地址,可以為絕對位址也可以為相對位址。
// varAsync[可選]
// 布爾型,指定此請求是否為非同步方式,預設為true。如果為真,當狀態改變時會調用onreadystatechange屬性指定的回呼函數。
// bstrUser[可選]
// 如果伺服器需要驗證,此處指定使用者名稱,如果未指定,當伺服器需要驗證時,會彈出驗證視窗。
// bstrPassword[可選]
// 驗證資訊中的密碼部分,如果使用者名稱為空白,則此值將被忽略。

// 備忘:調用此方法後,可以調用send方法向伺服器發送資料。
xmlhttp.Open("get", "http://localhost/example.htm", false);
// var book = xmlhttp.responseXML.selectSingleNode("//book[@id='bk101']");
// alert(book.xml);


// 屬性:onreadystatechange
// onreadystatechange:指定當readyState屬性改變時的事件處理控制代碼
// 文法:oXMLHttpRequest.onreadystatechange = funcMyHandler;
// 如下的例子示範當XMLHTTPRequest對象的readyState屬性改變時調用HandleStateChange函數,
// 當資料接收完畢後(readystate == 4)此頁面上的一個按鈕將被啟用
// 備忘:此屬性唯寫,為W3C文件物件模型的擴充.
xmlhttp.onreadystatechange= HandleStateChange;

// 方法:send
// 發送請求到http伺服器並接收回應
// 文法:oXMLHttpRequest.send(varBody);
// 參數:varBody (欲通過此請求發送的資料。)
// 備忘:此方法的同步或非同步方式取決於open方法中的bAsync參數,如果bAsync == False,此方法將會等待請求完成或者逾時時才會返回,如果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.
// 如果發送的資料為BSTR,則回應被編碼為utf-8, 必須在適當位置設定一個包含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.
// 如果發送的資料為XML DOM object,則回應將被編碼為在xml文檔中聲明的編碼,如果在xml文檔中沒有聲明編碼,則使用預設的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
// 擷取響應的所有http頭
// 文法:strValue = oXMLHttpRequest.getAllResponseHeaders();
// 備忘:每個http頭名稱和值用冒號分割,並以\r\n結束。當send方法完成後才可調用該方法。
alert(xmlhttp.getAllResponseHeaders());
// 方法:getResponseHeader
// 從響應資訊中擷取指定的http頭
// 文法:strValue = oXMLHttpRequest.getResponseHeader(bstrHeader);
// 備忘:當send方法成功後才可調用該方法。如果伺服器返回的文件類型為"text/xml", 則這句話
// xmlhttp.getResponseHeader("Content-Type");將返回字串"text/xml"。可以使用getAllResponseHeaders方法擷取完整的http頭資訊。
alert(xmlhttp.getResponseHeader("Content-Type")); // 輸出http頭中的Content-Type列:當前web伺服器的版本及名稱。


document.frmTest.myButton.disabled = true;
// 方法:abort
// 取消當前請求
// 文法:oXMLHttpRequest.abort();
// 備忘:調用此方法後,當前請求返回UNINITIALIZED 狀態。
// xmlhttp.abort();

// 方法:setRequestHeader
// 單獨指定請求的某個http頭
// 文法:oXMLHttpRequest.setRequestHeader(bstrHeader, bstrValue);
// 參數:bstrHeader(字串,頭名稱。)
// bstrValue(字串,值。)
// 備忘:如果已經存在已此名稱命名的http頭,則覆蓋之。此方法必須在open方法後調用。
// xmlhttp.setRequestHeader(bstrHeader, bstrValue);
}
function HandleStateChange()
{
// 屬性:readyState
// 返回XMLHTTP請求的目前狀態
// 文法:lValue = oXMLHttpRequest.readyState;
// 備忘:變數,此屬性唯讀,狀態用長度為4的整型表示.定義如下:
// 0 (未初始化) 對象已建立,但是尚未初始化(尚未調用open方法)
// 1 (初始化) 對象已建立,尚未調用send方法
// 2 (發送資料) send方法已調用,但是當前的狀態及http頭未知
// 3 (資料傳送中) 已接收部分資料,因為響應及http頭不全,這時通過responseBody和responseText擷取部分資料會出現錯誤,
// 4 (完成) 資料接收完畢,此時可以通過通過responseBody和responseText擷取完整的回應資料
if (xmlhttp.readyState == 4){
document.frmTest.myButton.disabled = false;

// 屬性:responseBody
// 返回某一格式的伺服器響應資料
// 文法:strValue = oXMLHttpRequest.responseBody;
// 備忘:變數,此屬性唯讀,以unsigned array格式表示直接從伺服器返回的未經解碼的位元據。
alert(xmlhttp.responseBody);

// 屬性:responseStream
// 以Ado Stream對象的形式返迴響應資訊
// 文法:strValue = oXMLHttpRequest.responseStream;
// 備忘:變數,此屬性唯讀,以Ado Stream對象的形式返迴響應資訊。
alert(xmlhttp.responseStream);

// 屬性:responseText
// 將響應資訊作為字串返回
// 文法:strValue = oXMLHttpRequest.responseText;
// 備忘:變數,此屬性唯讀,將響應資訊作為字串返回。XMLHTTP嘗試將響應資訊解碼為Unicode字串,
// XMLHTTP預設將響應資料的編碼定為UTF-8,如果伺服器返回的資料帶BOM(byte-order mark),XMLHTTP可
// 以解碼任何UCS-2 (big or little endian)或者UCS-4 資料。注意,如果伺服器返回的是xml文檔,此屬
// 性並不處理xml文檔中的編碼聲明。你需要使用responseXML來處理。
alert(xmlhttp.responseText);

// 屬性:responseXML
// 將響應資訊格式化為Xml Document對象並返回
// 文法:var objDispatch = oXMLHttpRequest.responseXML;
// 備忘:變數,此屬性唯讀,將響應資訊格式化為Xml Document對象並返回。如果響應資料不是有效XML文檔,
// 此屬性本身不返回XMLDOMParseError,可以通過處理過的DOMDocument對象擷取錯誤資訊。
alert("Result = " + xmlhttp.responseXML.xml);

// 屬性:status
// 返回當前請求的http狀態代碼
// 文法:lValue = oXMLHttpRequest.status;
// 傳回值:長整形標準http狀態代碼,定義如下:
// 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
// 備忘:長整形,此屬性唯讀,返回當前請求的http狀態代碼,此屬性僅當資料發送並接收完畢後才可擷取。
alert(xmlhttp.status);

// 屬性:statusText
// 返回當前請求的響應行狀態
// 文法:strValue = oXMLHttpRequest.statusText;
// 備忘:字串,此屬性唯讀,以BSTR返回當前請求的響應行狀態,此屬性僅當資料發送並接收完畢後才可擷取。
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>

一個比較詳細說明XMLHttpRequest的網址
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.