AJAX XMLHttpRequest

時間 2019-11-29
原文原文鏈接
  1 <html>
  2 <head>
  3 <title>XMLHTTPRequest對象的說明DEMO</title>
  4 <script language="javascript" type="text/javascript">
  5 <!--
  6 var xmlhttp;
  7 
  8 // 建立一個XMLHTTPRequest對象
  9 function createXMLHTTPRequext(){
 10 if(window.ActiveXObject) {
 11 xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
 12 }
 13 else if(window.XMLHTTPRequest){
 14 xmlhttp = new XMLHTTPRequest();
 15 }
 16 }
 17 
 18 function PostOrder(xmldoc)
 19 {
 20 createXMLHTTPRequext();
 21 
 22 // 方法：open
 23 // 建立一個新的http請求，並指定此請求的方法、URL以及驗證信息
 24 // 語法：oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
 25 // 參數
 26 // bstrMethod
 27 // http方法，例如：POST、GET、PUT及PROPFIND。大小寫不敏感。
 28 
 29 // bstrUrl
 30 // 請求的URL地址，能夠爲絕對地址也能夠爲相對地址。
 31 
 32 // varAsync[可選]
 33 // 布爾型，指定此請求是否爲異步方式，默認爲true。若是爲真，當狀態改變時會調用onreadystatechange屬性指定的回調函數。
 34 
 35 // bstrUser[可選]
 36 // 若是服務器須要驗證，此處指定用戶名，若是未指定，當服務器須要驗證時，會彈出驗證窗口。
 37 
 38 // bstrPassword[可選]
 39 // 驗證信息中的密碼部分，若是用戶名爲空，則此值將被忽略。
 40 
 41 // 備註：調用此方法後，能夠調用send方法向服務器發送數據。
 42 xmlhttp.Open("get", "http://localhost/example.htm", false);
 43 // var book = xmlhttp.responseXML.selectSingleNode("//book[@id='bk101']");
 44 // alert(book.xml);
 45 
 46 
 47 // 屬性：onreadystatechange
 48 // onreadystatechange：指定當readyState屬性改變時的事件處理句柄
 49 // 語法：oXMLHttpRequest.onreadystatechange = funcMyHandler;
 50 // 以下的例子演示當XMLHTTPRequest對象的readyState屬性改變時調用HandleStateChange函數，
 51 // 當數據接收完畢後（readystate == 4）此頁面上的一個按鈕將被激活
 52 // 備註：此屬性只寫，爲W3C文檔對象模型的擴展. 
 53 xmlhttp.onreadystatechange= HandleStateChange; 
 54 
 55 // 方法：send
 56 // 發送請求到http服務器並接收回應
 57 // 語法：oXMLHttpRequest.send(varBody);
 58 // 參數：varBody （欲經過此請求發送的數據。） 
 59 // 備註：此方法的同步或異步方式取決於open方法中的bAsync參數，若是bAsync == False，此方法將會等待請求完成或者超時時纔會返回，若是bAsync == True，此方法將當即返回。 
 60 // 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. 
 61 // 若是發送的數據爲BSTR，則迴應被編碼爲utf-8, 必須在適當位置設置一個包含charset的文檔類型頭。 
 62 // 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. 
 63 // 若是發送的數據爲XML DOM object，則迴應將被編碼爲在xml文檔中聲明的編碼，若是在xml文檔中沒有聲明編碼，則使用默認的UTF-8。 
 64 // 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. 
 65 xmlhttp.Send(xmldoc);
 66 
 67 // 方法：getAllResponseHeaders
 68 // 獲取響應的全部http頭
 69 // 語法：strValue = oXMLHttpRequest.getAllResponseHeaders();
 70 // 備註：每一個http頭名稱和值用冒號分割，並以\r\n結束。當send方法完成後纔可調用該方法。 
 71 alert(xmlhttp.getAllResponseHeaders());
 72 
 73 // 方法：getResponseHeader
 74 // 從響應信息中獲取指定的http頭
 75 // 語法：strValue = oXMLHttpRequest.getResponseHeader(bstrHeader);
 76 // 備註：當send方法成功後纔可調用該方法。若是服務器返回的文檔類型爲"text/xml", 則這句話
 77 // xmlhttp.getResponseHeader("Content-Type");將返回字符串"text/xml"。能夠使用getAllResponseHeaders方法獲取完整的http頭信息。 
 78 alert(xmlhttp.getResponseHeader("Content-Type")); // 輸出http頭中的Content-Type列：當前web服務器的版本及名稱。
 79 
 80 
 81 document.frmTest.myButton.disabled = true;
 82 // 方法：abort
 83 // 取消當前請求
 84 // 語法：oXMLHttpRequest.abort();
 85 // 備註：調用此方法後，當前請求返回UNINITIALIZED 狀態。
 86 // xmlhttp.abort();
 87 
 88 // 方法：setRequestHeader
 89 // 單獨指定請求的某個http頭
 90 // 語法：oXMLHttpRequest.setRequestHeader(bstrHeader, bstrValue);
 91 // 參數：bstrHeader（字符串，頭名稱。） 
 92 // bstrValue（字符串，值。） 
 93 // 備註：若是已經存在已此名稱命名的http頭，則覆蓋之。此方法必須在open方法後調用。
 94 // xmlhttp.setRequestHeader(bstrHeader, bstrValue);
 95 
 96 }
 97 
 98 function HandleStateChange()
 99 {
100 // 屬性：readyState
101 // 返回XMLHTTP請求的當前狀態
102 // 語法：lValue = oXMLHttpRequest.readyState;
103 // 備註：變量，此屬性只讀，狀態用長度爲4的整型表示.定義以下：
104 // 0 (未初始化) 對象已創建，可是還沒有初始化（還沒有調用open方法） 
105 // 1 (初始化) 對象已創建，還沒有調用send方法 
106 // 2 (發送數據) send方法已調用，可是當前的狀態及http頭未知 
107 // 3 (數據傳送中) 已接收部分數據，由於響應及http頭不全，這時經過responseBody和responseText獲取部分數據會出現錯誤， 
108 // 4 (完成) 數據接收完畢,此時能夠經過經過responseBody和responseText獲取完整的迴應數據 
109 if (xmlhttp.readyState == 4){
110 document.frmTest.myButton.disabled = false;
111 
112 // 屬性：responseBody
113 // 返回某一格式的服務器響應數據
114 // 語法：strValue = oXMLHttpRequest.responseBody;
115 // 備註：變量，此屬性只讀，以unsigned array格式表示直接從服務器返回的未經解碼的二進制數據。
116 alert(xmlhttp.responseBody);
117 
118 // 屬性：responseStream
119 // 以Ado Stream對象的形式返回響應信息
120 // 語法：strValue = oXMLHttpRequest.responseStream;
121 // 備註：變量，此屬性只讀，以Ado Stream對象的形式返回響應信息。
122 alert(xmlhttp.responseStream);
123 
124 // 屬性：responseText
125 // 將響應信息做爲字符串返回
126 // 語法：strValue = oXMLHttpRequest.responseText;
127 // 備註：變量，此屬性只讀，將響應信息做爲字符串返回。XMLHTTP嘗試將響應信息解碼爲Unicode字符串，
128 // XMLHTTP默認將響應數據的編碼定爲UTF-8，若是服務器返回的數據帶BOM(byte-order mark)，XMLHTTP可
129 // 以解碼任何UCS-2 (big or little endian)或者UCS-4 數據。注意，若是服務器返回的是xml文檔，此屬
130 // 性並不處理xml文檔中的編碼聲明。你須要使用responseXML來處理。 
131 alert(xmlhttp.responseText);
132 
133 // 屬性：responseXML
134 // 將響應信息格式化爲Xml Document對象並返回
135 // 語法：var objDispatch = oXMLHttpRequest.responseXML;
136 // 備註：變量，此屬性只讀，將響應信息格式化爲Xml Document對象並返回。若是響應數據不是有效的XML文檔，
137 // 此屬性自己不返回XMLDOMParseError，能夠經過處理過的DOMDocument對象獲取錯誤信息。 
138 alert("Result = " + xmlhttp.responseXML.xml);
139 
140 // 屬性：status
141 // 返回當前請求的http狀態碼
142 // 語法：lValue = oXMLHttpRequest.status;
143 // 返回值：長整形標準http狀態碼，定義以下： 
144 // Number:Description 
145 // 100:Continue
146 // 101:Switching protocols
147 // 200:OK
148 // 201:Created
149 // 202:Accepted
150 // 203:Non-Authoritative Information
151 // 204:No Content
152 // 205:Reset Content
153 // 206:Partial Content
154 // 300:Multiple Choices
155 // 301:Moved Permanently
156 // 302:Found
157 // 303:See Other
158 // 304:Not Modified
159 // 305:Use Proxy
160 // 307:Temporary Redirect
161 // 400:Bad Request
162 // 401:Unauthorized
163 // 402:Payment Required
164 // 403:Forbidden
165 // 404:Not Found
166 // 405:Method Not Allowed
167 // 406:Not Acceptable
168 // 407:Proxy Authentication Required
169 // 408:Request Timeout
170 // 409:Conflict
171 // 410:Gone
172 // 411:Length Required
173 // 412:Precondition Failed
174 // 413:Request Entity Too Large
175 // 414:Request-URI Too Long
176 // 415:Unsupported Media Type 
177 // 416:Requested Range Not Suitable 
178 // 417:Expectation Failed 
179 // 500:Internal Server Error 
180 // 501:Not Implemented
181 // 502:Bad Gateway
182 // 503:Service Unavailable
183 // 504:Gateway Timeout 
184 // 505:HTTP Version Not Supported
185 // 備註：長整形，此屬性只讀，返回當前請求的http狀態碼,此屬性僅當數據發送並接收完畢後纔可獲取。 
186 alert(xmlhttp.status);
187 
188 // 屬性：statusText
189 // 返回當前請求的響應行狀態
190 // 語法：strValue = oXMLHttpRequest.statusText;
191 // 備註：字符串，此屬性只讀，以BSTR返回當前請求的響應行狀態,此屬性僅當數據發送並接收完畢後纔可獲取。 
192 alert(xmlhttp.statusText);
193 }
194 }
195 //-->
196 </script>
197 </head>
198 <body>
199 <form name="frmTest"> 
200 <input name="myButton" type="button" value="Click Me" onclick="PostOrder('http://localhost/example.htm');">
201 </form> 
202 </body>
203 </html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。