標籤：style blog http java 使用 os strong 資料
上文中提到的Ajax的非同步更新，主要使用XMLHttpRequest對象來實現的，XMLHttpRequest對象可以在不向伺服器提交整個頁面的情況下，實現局部更新網頁。當頁面全部載入完畢後，用戶端通過該對象向伺服器請求資料，伺服器端接受資料並處理後，向用戶端反饋資料。 關於XMLHttpRequest對象方法和屬性如下（聊一眼即可，不是本文重點）：
<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以及驗證資訊 // （1）文法：XMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword); // （2）參數：bstrMethod（http方法，例如：POST、GET、PUT及PROPFIND。大小寫不敏感） // bstrUrl（請求的URL地址，可以為絕對位址也可以為相對位址）// varAsync[可選]（布爾型，指定此請求是否為非同步方式，預設為true。如果為真，當狀態改變時會調用onreadystatechange屬性指定的回呼函數） // bstrUser[可選]（如果伺服器需要驗證，此處指定使用者名稱，如果未指定，當伺服器需要驗證時，會彈出驗證視窗） // bstrPassword[可選]（驗證資訊中的密碼部分，如果使用者名稱為空白，則此值將被忽略） // 備忘：調用此方法後，可以調用send方法向伺服器發送資料。 xmlhttp.Open("get", "http://localhost/example.htm", false); // onreadystatechange屬性---指定當readyState屬性改變時的事件處理控制代碼 // （1）文法：XMLHttpRequest.onreadystatechange = funcMyHandler; // （2）如下的例子示範當XMLHTTPRequest對象的readyState屬性改變時調用HandleStateChange函數， // （3）當資料接收完畢後（readystate == 4）此頁面上的一個按鈕將被啟用 // 備忘：此屬性唯寫，為W3C文件物件模型的擴充 xmlhttp.onreadystatechange= HandleStateChange; // send方法---發送請求到http伺服器並接收回應 // （1）文法：XMLHttpRequest.send(varBody); // （2）參數：varBody （欲通過此請求發送的資料） // 備忘：此方法的同步或非同步方式取決於open方法中的bAsync參數，如果bAsync == False，此方法將會等待請求完成或者逾時時才會返回，如果bAsync == True，此方法將立即返回。 xmlhttp.Send(xmldoc); // abort方法---取消當前請求 // （1）文法：XMLHttpRequest.abort(); // 備忘：調用此方法後，當前請求返回UNINITIALIZED 狀態。 xmlhttp.abort(); }function HandleStateChange(){ // readyState屬性---返回XMLHTTP請求的目前狀態 // （1）文法：lValue = oXMLHttpRequest.readyState; // 備忘：變數，此屬性唯讀，狀態用長度為4的整型表示.定義如下： // （1）0 (未初始化) 對象已建立，但是尚未初始化（尚未調用open方法） // （2）1 (初始化) 對象已建立，尚未調用send方法 // （3）2 (發送資料) send方法已調用，但是當前的狀態及http頭未知 // （4）3 (資料傳送中) 已接收部分資料，因為響應及http頭不全，這時通過responseBody和responseText擷取部分資料會出現錯誤， // （5）4 (完成) 資料接收完畢,此時可以通過通過responseBody和responseText擷取完整的回應資料 if (xmlhttp.readyState == 4){if(xmlhttp.status =200 ){ document.frmTest.myButton.disabled = false; //status屬性---返回當前請求的http狀態代碼 // （1）文法：Value = oXMLHttpRequest.status; // （2）傳回值：長整形標準http狀態代碼，定義如下： // // 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); } }}//--></script></head><body><form name="frmTest"> <input name="myButton" type="button" value="Click Me" onclick="PostOrder('http://localhost/example.htm');"></form> </body></html>
要想更加深入的瞭解XMLHttpRequest對象，只知道其方法和屬性只是其基礎，我們還需要理解其建立和使用過程。以下是我通過一個小Demo總結分析的XMLHttpRequest對象建立和使用的，算是原理吧。不足之處還請您指導！
1.首先，通過createXMLHTTPRequest方法，建立一個XMLHTTPRequest對象。其中簡單的分支邏輯是為了確定如何建立對象。判斷瀏覽器是否支援ActiveX控制項，依此來確定瀏覽器是否為IE。
2.其次，通過Open方法，建立對伺服器的調用，並且設定URL以及所希望的HTTP方法，通常是Get或者Post。關於Get和Post的不同，請見：
3.再者，當泛型服務器後，我們需要完成一項任務，那便是確定當伺服器返回所需資料，或者說XMLHTTPRequest的狀態發生變化時，調用HandleStateChange函數。xmlhttp.onreadystatechange= HandleStateChange;
4.然後，當設定好“要去哪兒（對伺服器的調用）”和“回到哪兒（HandleStateChange函數）”後，就可以發送請求了。xmlhttp.Send(xmldoc);
5.最後，就需要HandleStateChange函數來檢查XMLHTTPRequest的readystate屬性，然後檢查伺服器返回的狀態代碼，如果一切正常，HandleStateChange函數就會在用戶端執行相應操作。這也就是所謂的回呼函數。
以上說了說XMLHTTPRequest這個Ajax核心對象的使用，那麼它是如何?非同步更新的呢？這就體現在咱們上面提到的回呼函數了。大家看上面程式的調用順序，在第三步中我們就設定了伺服器返回資料時所需調用的函數，設定完成之後，我們就不用管他了，完全可以繼續我們下一步的操作（例如第四步），在我們的操作過程中，一旦XMLHTTPRequest的狀態發生變化，就會自動調用HandleStateChange函數，來實現其中功能。這整個過程就很容易的實現了非同步更新。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
