Javascript-XMLHttpRequest對象簡介

簡介

XMLHttpRequest是Ajax的核心，通過調用XMLHttpRequest對象的屬性和方法可以實現在客戶端和瀏覽器之間進行數據的異步傳輸，從而實現頁面的無刷新效果。
XMLHttpRequest對象的常用屬性：
onreadystatechange：指定當readyState屬性值改變時的事件處理句柄(只寫)；
readyState：返回當前請求的狀態(只讀)；
responseText：將相應信息作爲字符串返回(只讀)；
XMLHttpRequest對象的常用方法：
open()：創建一個新的HTTP請求，並制定此請求的方法，URL以及驗證信息(用戶名/密碼)；
send()：發送請求到HTTP服務器並接受迴應。
XMLHttpRequest對象的使用需要四個步驟：
初始化XMLHttpRequest對象
指定響應處理函數
發送HTTP請求
處理服務器返回的信息
 

一、初始化XMLHttpRequest對象

在使用XMLHttpRequest對象之前需要將XMLHttpRequest對象實例化，因爲各個瀏覽器對這個實例化過程的實現不同，所以針對不同的瀏覽器實例化XMLHttpRequest對象的方式也不盡相同。

針對微軟IE瀏覽器：

var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

針對其他的瀏覽器：

var xmlHttp = new XMLHttpRequest();

所以，綜合了這兩種實例化XMLHttpRequest的形式，就可以提取出一個實例化的公共方法，代碼如下：

//實例化XMLHttpRequest對象 
    function createXMLHttpRequest(){ 
        if(window.XMLHttpRequest){ 
            xmlHttp = new XMLHttpRequest();  
        }else if(window.ActiveXObject){ 
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
        } 
    }

二、指定響應處理函數

接下來就要指定當服務器返回信息時客戶端的處理方式。只需將相應的處理函數名稱賦給XMLHttpRequest對象的onreadystatechange屬性即可，比如：

xmlHttp.onreadystatechange = callBack;

需要說明的是，這個函數名稱不加括號，不帶參數；也可以使用JavaScript即時定義函數的方式定義響應函數，比如：

xmlHttp.onreadystatechange = function(){ 
            // Do something... 
        } 

三、發送HTTP請求

指定響應處理函數後，就可以向服務器發出HTTP請求了。這需要調用XMLHttpRequest對象的open()和send()方法。

xmlHttp.open("get/Post","URL",true/false); 
xmlHttp.send(null); 

3.1 open()方法詳解

//XMLHttpRequest對象的open()方法原型

void open(string method, string URL , boolean asynch, string username, string password);

open()方法表示會建立對服務器的調用，這是初始化一個請求的純腳本方法。
它有2個必要的參數，還有3個可選的參數。method表示向服務器發送信息的方式，可以爲Get或Post；URL表示所調用的服務器資源的URL；asynch是一個布爾值，指示這個調用時異步還是同步，默認爲true；username和password允許我們指定一個特定的用戶名和口令。 一般使用時只取前三個參數即可。

3.2 send()方法詳解

//XMLHttpRequest對象的send()方法原型 

void send(content);

send()方法具體向服務器發送請求。如果請求聲明爲異步的，這個方法就會立即返回，否則它會等待，知道接收到響應爲止。參數content是可選的，可以是一個DOM對象的實例、一個輸入流或一個串。傳入的內容會作爲請求體的一部分發送。

四、處理服務器返回的信息

在第二部中我們爲XMLHttpRequest指定了響應處理函數，響應處理函數檢查XMLHttpRequest對象的readyState屬性值的變化，如果readyState值爲4時，代表服務器已經傳回所有信息，可以開始處理信息並更新頁面內容了。

function callBack(){ 
    if(xmlHttp.readyState==4){ 
    if(xmlHttp.status==200){ 
        //do something with xmlHttp.responseText; 
        xmlHttp.responseText; 
            }
    } 
}

4.1 readyState屬性詳解

readyState屬性用來表示請求的狀態，有5個可取值，分別是：
“0”：表示未初始化，即對象已經建立，但是尚未初始化(尚未調用open()方法)；
“1”：表示正在加載，此時對象已建立，尚未調用send()方法；
“2”：表示請求已發送，即send()方法已調用；
“3”：表示請求處理中；
“4”：表示請求已完成，即數據接收完畢。

4.2 status、statusText屬性詳解

status：返回當前請求的HTTP狀態碼(只讀)；
statusText：返回當前請求的響應行狀態(只讀)。 

4.3 responseText、responseXML屬性詳解

responseText屬性表示服務器的文本響應，其處理結果以字符串形式返回。
responseXML屬性表示服務器響應，其結果將格式化爲XML Document對象。

上述四個步驟，就是XMLHttpRequest對象在Ajax程序中的運行週期，即初始化、指定響應函數、發送請求、處理響應。

下面是本示例的完整代碼：

var xmlHttp; 
function AjaxFunction(){ 
        createXMLHttpRequest(); 
        if(xmlHttp!=null){ 
    xmlHttp.onreadystatechange = callBack; 
    xmlHttp.open("get/Post","URL",true/false); 
    xmlHttp.send(null); 
        }    
}    
 
//實例化XMLHttpRequest對象 
function createXMLHttpRequest(){ 
        if(window.XMLHttpRequest){ 
    xmlHttp = new XMLHttpRequest();  
        }else if(window.ActiveXObject){ 
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
        } 
} 
 
//指定響應函數 
function callBack(){ 
        if(xmlHttp.readyState==4){ 
                if(xmlHttp.status==200){ 
            //do something with xmlHttp.responseText; 
            xmlHttp.responseText; 
                }    
        } 
}