詳解AJAX核心中的XMLHttpRequest對象

　　XMLHttpRequest 對象是AJAX功能的核心要開發AJAX程序必須從了解XMLHttpRequest 對象開始

　　了解XMLHttpRequest 對象就先從創建XMLHttpRequest 對象開始在不同的浏覽器中創建XMLHttpRequest 對象使用不同的方法

　　先看看IE創建XMLHttpRequest 對象的方法（方法）

　　var xmlhttp = new ActiveXObject(MsxmlXMLHTTP);

　　//使用較新版本的 IE 創建 IE 兼容的對象（MsxmlXMLHTTP）

　　var xmlhttp = new ActiveXObject(MicrosoftXMLHTTP);

　　//使用較老版本的 IE 創建 IE 兼容的對（MicrosoftXMLHTTP）

而 MozillaOperaSafari 和大部分非IE的浏覽器都使用下面這種方法（方法）創建XMLHttpRequest 對象

　　var xmlhttp = new XMLHttpRequest();

　　實際上Internet Explorer 使用了一個名為 XMLHttp 的對象而不是 XMLHttpRequest 對象而 MozillaOperaSafari 和大部分非 Microsoft 浏覽器都使用的是後者（下文統稱 XMLHttpRequest 對象）IE開始也開始使用XMLHttpRequest 對象了

　　在創建 XMLHttpRequest 對象的時候如果不同的浏覽器使用了不正確的方法浏覽器都將會報錯並且無法使用該對象所以我們需要一種可以兼容不同浏覽器的創建XMLHttpRequest 對象的方法

　　創建兼容多浏覽器的 XMLHttpRequest 對象方法

　　if (!xmlhttp){
//創建XMLHttpRequest 對象失敗!
}
else{
//創建成功!
}

　　創建好了XMLHttpRequest 對象我們再來看看這個對象的方法屬性以及最重要的onreadystatechange事件句柄吧

　　方法

　　open() 說明初始化 HTTP 請求參數例如 URL 和 HTTP 方法但是並不發送請求

　　abort() 說明取消當前響應關閉連接並且結束任何未決的網絡活動

　　getAllResponseHeaders() 說明把 HTTP 響應頭部作為未解析的字符串返回

　　getResponseHeader() 說明返回指定的 HTTP 響應頭部的值

　　send() 說明發送 HTTP 請求使用傳遞給 open() 方法的參數以及傳遞給該方法的可選請求體

　　setRequestHeader() 說明向一個打開但未發送的請求設置或添加一個 HTTP 請求

　　屬性

　　readyState 說明HTTP 請求的狀態

　　responseText 說明目前為止為服務器接收到的響應體（不包括頭部）或者如果還沒有接收到數據的話就是空字符串

　　responseXML 說明對請求的響應解析為 XML 並作為 Document 對象返回

　　status 說明由服務器返回的 HTTP 狀態代碼

　　statusText 說明這個屬性用名稱而不是數字指定了請求的 HTTP 的狀態代碼

　　onreadystatechange 是每次 readyState 屬性改變的時候調用的事件句柄函數

　　下面從發送請求並處理請求結果的過程來理解一下XMLHttpRequest 對象吧

　　發送請求之前自然就是生成一個XMLHttpRequest 對象代碼上面有了就不多寫了

　　生成一個XMLHttpRequest 對象

　　var xmlhttp = CreateXMLHttp();

　　創建好XMLHttpRequest 對象了那我們要送請求到哪個網站呢就選擇博客園首頁的RSS吧那怎麼設置我要請求的網站地址呢使用open()方法

　　open(method url async username password)

　　該方法有個參數具體什麼意思可以看這裡
我們用的就是這個了

　　xmlHttpopen(gettrue);

　　get參數表示用get方法第二個自然就是目標地址博客園首頁第三個就是表示是否異步了我們當然使用true了具體的參數說明還都可以到上面看了

　　好了目標定好了怎麼發送呢用send()方法？

　　send(body)send()方法只有一個參數表示DOM對象這個DOM對象需要說明的內容很多下次說今天我們只要寫

　　xmlhttpsend();就可以了好了發送了那怎麼處理返回的結果呢這個時候就用到XMLHttpRequest 對象最重要的東西了那就是onreadystatechange事件句柄什麼意思呢那就需要說明一下XMLHttpRequest 對象的readyState了readyState有種狀態分別用數字的到來表示

　　狀態名稱描述 Uninitialized 初始化狀態XMLHttpRequest 對象已創建（未調用open()之前）或已被 abort() 方法重置 Open open() 方法已調用但是 send() 方法未調用請求還沒有被發送 Sent Send() 方法已調用HTTP 請求已發送到 Web 服務器未接收到響應 Receiving 所有響應頭部都已經接收到響應體開始接收但未完成 Loaded HTTP 響應已經完全接收

　　但是需要注意的是onreadystatechange事件句柄不同的浏覽器能處理的狀態並不一致IE和FireFox能處理到而Safari能處理到的狀態Opera 能處理兩中狀態的狀態基本沒什麼用因為創建了XMLHttpRequest 對象後都會馬上調用open() 方法這時候狀態就變成了當然除非你要判斷對象是否已經被 abort() 取消可是這樣的情況依然很少大部分情況下判斷是不是（已經接受完成）這個狀態就夠了

　　好了明白了readyState有種狀態了那處理返回結果就是看狀態變更到不同的狀態我們做不同的處理就可以了怎麼告訴XMLHttpRequest 對象狀態變化時讓誰來處理這個變化呢有兩種寫法一種是用匿名方法另一種是指定方法其實只是不同的寫發作用都一樣看下代碼

　　xmlhttponReadyStateChange = function (){
//處理狀態變化的代碼
}
//或者
xmlhttponReadyStateChange = getResult;
function getResult(){
///處理狀態變化的代碼
}

　　順便說一下句柄的名稱比較長可以這樣記憶 on ReadyState Change 表示在讀取狀態改變時請求發送了也指定處理方法了怎麼獲取返回的內容呢有responseText和responseXML兩個屬性可供使用responseXML是返回對象需要再解析後面再說這裡先用responseText看看返回什麼

　　alert(xmlhttpresponseText); //看看是不是返回了首頁的HTML代碼啊是你就成功了

　　整個過程是創建XMLHttpRequest 對象 > 指定發送地址及發送方法 > 發送請求 > 指定處理方法並處理返回結果但是需要注意我們正常的思路理解是這樣的可是onreadystatechange事件句柄指定處理方法需要在發送之前就指定好否則無法處理狀態變化事件

　　所以我們應該按照下面的流程來記憶創建XMLHttpRequest 對象 > 指定發送地址及發送方法 > 指定狀態變化處理方法 > 發送請求請求發送後狀態變化了就會自動調用指定的處理方法
好了看看完成的代碼吧

　　完成的代碼

　　看似一切都OK了可是有沒有想過如果HTML代碼在網絡傳輸過程中出錯了或者我們指定的地址失效會怎麼樣呢這個時候就需要用到status屬性即由服務器返回的 HTTP 狀態代碼 xmlhttpstatus 等於時表示傳輸過程完整沒有錯誤具體的HTTP狀態代碼什麼意思可以到WC組織網站上看看地址l

　　把getResult()方法寫成下面這樣我覺的就真的OK了

　　function getResult(){
if(xmlhttpreadyState == && xmlhttpstatus == ){
alert(xmlhttpresponseText);
}
}

　　好了一個本來挺簡單的東西被我寫的這麼多好象很羅嗦不過我覺的編程對基礎內容的理解很重要現在很多時候開發AJAX的程序都使用很多JS的庫不需要直接編寫這麼基礎的代碼如使用著名的jQuery但是如果我們對基礎的東西有很好的理解那這些庫報告錯誤或者出現問題我們可以很好很快的知道錯在哪裡更快的做出改變使程序正常運行

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19144.html