Ajax裏的 XMLHttpRequest對象

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

瞭解XMLHttpRequest 對象就先從建立XMLHttpRequest 對象開始，在不一樣的瀏覽器中建立XMLHttpRequest 對象使用不一樣的方法：

    先看看IE建立XMLHttpRequest 對象的方法（方法1）：

var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");  //使用較新版本的 IE 建立 IE 兼容的對象（Msxml2.XMLHTTP）
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //使用較老版本的 IE 建立 IE 兼容的對象（Microsoft.XMLHTTP）
    而 Mozilla、Opera、Safari 和大部分非IE的瀏覽器都使用下面這種方法（方法2）建立XMLHttpRequest 對象：

var xmlhttp = new XMLHttpRequest();
    實際上Internet Explorer 使用了一個名爲 XMLHttp 的對象，而不是 XMLHttpRequest 對象，而 Mozilla、Opera、Safari 和 大部分非 Microsoft 瀏覽器都使用的是後者（下文統稱 XMLHttpRequest 對象）。IE7開始也開始使用XMLHttpRequest 對象了。

    在建立 XMLHttpRequest 對象的時候若是不一樣的瀏覽器使用了不正確的方法瀏覽器都將會報錯，而且沒法使用該對象。因此咱們須要一種能夠兼容不一樣瀏覽器的建立XMLHttpRequest 對象的方法：

建立兼容多瀏覽器的 XMLHttpRequest 對象方法
     var xmlhttp = false; //建立一個新變量 request 並賦值 false。使用 false 做爲判斷條件，它表示尚未建立 XMLHttpRequest 對象。 
    function CreateXMLHttp(){
    try{
        xmlhttp = new XMLHttpRequest();  //嘗試建立 XMLHttpRequest 對象，除 IE 外的瀏覽器都支持這個方法。
    }
    catch (e){
        try{
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");  //使用較新版本的 IE 建立 IE 兼容的對象（Msxml2.XMLHTTP）
        }
    catch (e){
    try{
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //使用較老版本的 IE 建立 IE 兼容的對象（Microsoft.XMLHTTP）。
            }
    catch (failed){
            xmlhttp = false;  //若是失敗則保證 request 的值仍然爲 false。
            }
        }
    }
    return xmlhttp;
}
判斷是否建立成功就很簡單了

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 說

詳解AJAX核心—XMLHttpRequest 對象第2部分：

明：由服務器返回的 HTTP 狀態代碼。
statusText 說明：這個屬性用名稱而不是數字指定了請求的 HTTP 的狀態代碼。 
onreadystatechange 是每次 readyState 屬性改變的時候調用的事件句柄函數。
下面從發送請求並處理請求結果的過程來理解一下XMLHttpRequest 對象吧。

發送請求以前天然就是生成一個XMLHttpRequest 對象，代碼上面有了就很少寫了。

生成一個XMLHttpRequest 對象

var xmlhttp = CreateXMLHttp();
建立好XMLHttpRequest 對象了，那咱們要送請求到哪一個網站呢，就選擇博客園首頁的RSS吧。那怎麼設置我要請求的網站地址呢，使用open()方法。
open(method, url, async, username, password)
該方法有5個參數，具體什麼意思能夠看這裏：http://www.w3school.com.cn/xmldom/dom_http.asp
咱們用的就是這個了。

xmlHttp.open("get","http://www.cnblogs.com",true);
get參數表示用get方法，第二個天然就是目標地址，博客園首頁，第三個就是表示是否異步了，咱們固然使用true了。具體的參數說明還均可以到http://www.w3school.com.cn上面看了。
好了，目標定好了，怎麼發送呢。用send()方法。
send(body)，send()方法只有一個參數，表示DOM對象，這個DOM對象須要說明的內容不少，下次說，今天咱們只要寫

xmlhttp.send(null);
就能夠了。好了，發送了，那怎麼處理返回的結果呢，這個時候就用到XMLHttpRequest 對象最重要的東西了，那就是onreadystatechange事件句柄。什麼意思呢，那就須要說明一下XMLHttpRequest 對象的readyState了，readyState有5種狀態，分別用數字的 0 到 4 來表示。

狀態      名稱            描述 
0      Uninitialized       初始化狀態。XMLHttpRequest 對象已建立（未調用open()以前）或已被 abort() 方法重置。 
1      Open           open() 方法已調用，可是 send() 方法未調用。請求尚未被髮送。 
2      Sent            Send() 方法已調用，HTTP 請求已發送到 Web 服務器。未接收到響應。 
3      Receiving      全部響應頭部都已經接收到。響應體開始接收但未完成。 
4      Loaded         HTTP 響應已經徹底接收。

可是須要注意的是，onreadystatechange事件句柄不一樣的瀏覽器能處理的狀態並不一致，IE和FireFox能處理1到4，而Safari能處理2到4的狀態，Opera 能處理三、4兩中狀態。0的狀態基本沒什麼用，由於建立了XMLHttpRequest 對象後都會立刻調用open() 方法，這時候狀態就變成1了，固然除非你要判斷對象是否已經被 abort() 取消，但是這樣的狀況依然不多。大部分狀況下判斷是否是4（已經接受完成）這個狀態就夠了。
好了，明白了readyState有5種狀態了，那處理返回結果就是看狀態變動到不一樣的狀態咱們作不一樣的處理就能夠了，怎麼告訴XMLHttpRequest 對象狀態變化時讓誰來處理這個變化呢。有兩種寫法，一種是用匿名方法，另外一種是指定方法，其實只是不一樣的寫發，做用都同樣，看下代碼：

xmlhttp.onReadyStateChange = function (){
 //處理狀態變化的代碼
}
//或者
xmlhttp.onReadyStateChange = getResult;
function getResult(){
 ///處理狀態變化的代碼
}
//順便說一下，句柄的名稱比較長，能夠這樣記憶 on ReadyState Change 表示在讀取狀態改變時
請求發送了，也指定處理方法了，怎麼獲取返回的內容呢，有responseText和responseXML兩個屬性可供使用，responseXML是返回對象，須要再解析，後面再說，這裏先用responseText，看看返回什麼。

alert(xmlhttp.responseText); //看看是否是返回了首頁的HTML代碼啊。是你就成功了。
整個過程是：建立XMLHttpRequest 對象 -> 指定發送地址及發送方法 -> 發送請求 -> 指定處理方法並處理返回結果。可是須要注意，咱們正常的思路理解是這樣的，但是onreadystatechange事件句柄指定處理方法須要在發送以前就指定好，不然沒法處理狀態變化事件。

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

完成的代碼
    var xmlhttp = false; //建立一個新變量 request 並賦值 false。使用 false 做爲判斷條件，它表示尚未建立 XMLHttpRequest 對象。 
    function CreateXMLHttp(){

詳解AJAX核心—XMLHttpRequest 對象第3部分：

        try{
            xmlhttp = new XMLHttpRequest();  //嘗試建立 XMLHttpRequest 對象，除 IE 外的瀏覽器都支持這個方法。
        }
        catch (e){
            try{
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");  //使用較新版本的 IE 建立 IE 兼容的對象（Msxml2.XMLHTTP）
            }
            catch (e){
                try{
                  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //使用較老版本的 IE 建立 IE 兼容的對象（Microsoft.XMLHTTP）。
                }
                catch (failed){
                      xmlhttp = false;  //若是失敗則保證 request 的值仍然爲 false。
                }
            }
        }
        return xmlhttp;
    }
    xmlhttp = CreateXMLHttp();
    xmlhttp.open("get","http://www.cnblogs.com",true);
    xmlhttp.onReadyStateChange = getResult;
    xmlhttp.send(null);
    function getResult(){
        if(xmlhttp.readyState == 4){
            alert(xmlhttp.responseText);
        }
    }
看似一切都OK了，但是有沒有想過，若是HTML代碼在網絡傳輸過程當中出錯了，或者咱們指定的地址失效會怎麼樣呢。這個時候就須要用到status屬性，即由服務器返回的 HTTP 狀態代碼。 xmlhttp.status 等於200時表示傳輸過程完整沒有錯誤。具體的HTTP狀態代碼什麼意思能夠到W3C組織網站上看看，地址http://www.w3.org/Protocols/rfc2616/rfc2616-sec6.html#sec6.1.1 。
把getResult()方法寫成下面這樣我覺的就真的OK了。

 function getResult(){  if(xmlhttp.readyState == 4 && xmlhttp.status == 200){   alert(xmlhttp.responseText);  } }好了，一個原本挺簡單的東西，被我寫的這麼多，好象很羅嗦。不過我覺的編程對基礎內容的理解很重要，如今不少時候開發AJAX的程序都使用不少JS的庫，不須要直接編寫這麼基礎的代碼。如使用著名的jQuery，可是若是咱們對基礎的東西有很好的理解，那這些庫報告錯誤，或者出現問題咱們能夠很好很快的知道錯在哪裏，更快的作出改變使程序正常運行。