Ajax之旅（二）--XMLHttpRequest
? ? ?上文中提到的Ajax的異步更新。主要使用XMLHttpRequest對象來實現的，XMLHttpRequest對象能夠在不向server提交整個頁面的情況下，實現局部更新網頁。
當頁面所有載入完畢後。client通過該對象向server請求數據，server端接受數據並處理後，向client反饋數據。
?關於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[可選]（假設server須要驗證。此處指定username。假設未指定，當server須要驗證時，會彈出驗證窗體）
// bstrPassword[可選]（驗證信息中的password部分。假設username為空，則此值將被忽略）
// 備註：調用此方法後，能夠調用send方法向server發送數據。
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方法---發送請求到httpserver並接收回應
// （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方法，建立對server的調用，而且設置URL以及所希望的HTTP方法，一般是Get或者Post。關於Get和Post的不同。請見下圖：
? ? ?3.再者，當通用server後，我們須要完畢一項任務，那便是確定當server返回所需數據。或者說XMLHTTPRequest的狀態發生變化時。調用HandleStateChange函數。
xmlhttp.onreadystatechange= HandleStateChange;
? ? ?4.然後，當設置好“要去哪兒（對server的調用）”和“回到哪兒（HandleStateChange函數）”後。就能夠發送請求了。xmlhttp.Send(xmldoc);
? ? ?5.最後，就須要HandleStateChange函數來檢查XMLHTTPRequest的readystate屬性，然後檢查server返回的狀態碼。假設一切正常。HandleStateChange函數就會在client運行對應操作。這也就是所謂的回調函數。
?
? ? ?以上說了說XMLHTTPRequest這個Ajax核心對象的使用，那麽它是怎樣實現異步更新的呢？這就體如今咱們上面提到的回調函數了。
大家看上面程序的調用順序，在第三步中我們就設置了server返回數據時所需調用的函數，設置完畢之後，我們就不用管他了。全然能夠繼續我們下一步的操作（比如第四步）。在我們的操作過程中，一旦XMLHTTPRequest的狀態發生變化。就會自己主動調用HandleStateChange函數，來實現當中功能。這整個過程就非常easy的實現了異步更新。
Ajax之旅（二）--XMLHttpRequest