解析ajax核心XMLHTTPRequest對象的建立與瀏覽器的相容問題_AJAX相關

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

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

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

  var xmlhttp=ActiveXobject("Msxml12.XMLHTTP");//較新的IE版本建立Msxml12.XMLHTTP對象

  var xmlhttp=ActiveXobject("Microsoft.XMLHTTP");//較老的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對象：

第一種方法：

  var xmlhttp=false;//建立一個新變數並賦值false，使用false作為判斷條件說明還沒有建立XMLHTTPRequest對象

  function CreateXMLHttp(){

  try{

   xmlhttp=new XMLHttpRequest();//嘗試建立 XMLHttpRequest 對象，除 IE 外的瀏覽器都支援這個方法。

}catch(e){

  try{

  xmlhttp=ActiveXobject("Msxml12.XMLHTTP");//使用較新版本的 IE 建立 IE 相容的對象（Msxml2.XMLHTTP）。

}catch(e){

  try{

  xmlhttp=ActiveXobject("Microsoft.XMLHTTP");//使用較老版本的 IE 建立 IE 相容的對象（Microsoft.XMLHTTP）。

}catch(failed){

    xmlhttp=false;//如果失敗了還保持false

}

}

}

return xmlhttp;

}

判斷是否成功的例子：

if(!xmlhttp){

 建立xmlhttp失敗

}else{

 建立xmlhttp成功

}

第二種方法：
 if(typeof(XMLHttpRequest)=="undefined" && window.ActiveXObject){

  function XMLHttpRequest(){

  var xmlhttp_arr=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"]；

  var xmlhttp;

  for(i=0;i<xmlhttp_arr.length;i++){

   if(xmlhttp=new ActiveXObject(xmlhttp_arr[i]))

   break;

}

  return xmlhttp;

}

}

//這個是除了IE之外的瀏覽器建立XMLHttpRequest對象

var xmlhttp=new XMLHttpRequest();

建立xmlhttp成功後，然後再來看看它的一些屬性和方法吧，還有最重要的onreadystatechange事件控制代碼

 方法：

 open() 初始化http請求參數，包括URL和http方法，但是不發送請求；

 abort() 取消當前響應，關閉串連並斷開所有網路未結束的活動；

 getAllResponseHeaders() 把http回應標頭部作為未解析字串返回；

 getResponseHeaders) 返回指定的http回應標頭的值；

 send() 發送http請求使用傳遞給open()方法的參數，以及傳個該方法的可選請求體；

 setResponseHeader() 向一個開啟但沒有發送的請求設定或添加一個Http請求。

 屬性：

 readyState 說明http請求的狀態;(有5個狀態分別是

 0 表示沒有初始化；

 1 表示讀取中

 2 表示已讀取

 3 互動中(接受中)

 4 完成

)

 responseText 說明為伺服器接收到得響應體，如果沒有接收到資料就返回Null 字元串；

 responseXML 說明對請求的回應 解析為XML並用document對象返回；

 status 說明http請求的狀態；

 statusText 說明http請求狀態不是以數字形式而是用名稱；

 onreadystatechange 是readySate狀態改變時呼叫事件的函數。

下面是一個發送請求資料並返回結果的xmlhttpRequest對象；

 產生一個XMLHTTPRequest對象

 var xmlhttp=CreatXMLHttp();
 xmlhttp.open("get","http://www.jb51.net/jaryle",true);
 xmlhttp.onReadyStateChange=getresult;
//怎麼告訴XMLHttpRequest 對象狀態變化時讓誰來處理這個變化呢用到二種方法：一種是匿名方法xmlhttp.onReadyStateChange=function(){處理變化的代碼}
另一種方法：指定方法：xmlhttp.onReadyStateChange=getresult;
    function getresult(){處理變化的代碼}
 xmlhttp.send();
 function getresult(){
 if(xmlhttp.readyState==4){ //當readyState的狀態等於4時表示接收到資料
 if(xmlhttp.status==200){ //這個時候就需要用到status屬性，即由伺服器返回的 HTTP 狀態碼。 xmlhttp.status 等於200時表示傳輸過程完整沒有錯誤
 alert(xmlhttp.responseText);
}
}
 }

注意：所以我們應該按照上面的流程來記憶：建立XMLHttpRequest 對象 -> 指定發送地址及發送方法 -> 指定狀態變化處理方法 -> 發送請求，請求發送後狀態變化了就會自動調用指定的處理方法。