Ajax基礎教程【2】使用XMLHttpRequest對象

1. 建立 XMLHttpRequest 對象的一個實例

var xmlHttp;
function createXMLHttpRequest() {
    //檢查是否支持 ActiveXObject 控件（IE瀏覽器）
    if(window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    } else if(window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest(); 
    }
}

2. 方法和屬性

2.1 經常使用的方法有 open( ) 和 send( ) 。

void open(string method, string url, boolean async, string username, string password) 創建對服務器的調用。

• method: GET、POST或PUT。
• url：相對url或絕對url。
• async：可選，默認值爲true，表示異步請求；false表示同步。

void send(context)：具體向服務器發出請求。若是請求聲明爲異步，這個方法就會當即返回，不然它會等待直到接收到響應爲止。

• 可選參數能夠是 DOM 對象的實例、輸入流、或者串。若請求類型爲 GET 時，參數使用 null；若爲 POST 時，參數內容將做爲請求體的一部分發送。

void setRequestHeader(string header, string value)：爲請求中一個給定的首部設置值。這個方法必須在 open() 以後才能調用。

• header：要設置的首部。
• value： 在首部中放置的值。

void abort()：中止請求。

string getAllResponseHeaders()：返回一個串，其中包含HTTP請求的全部響應首部，首部包括Content-length、Data和URL。

string getResponseHeaders(string header)：與上面的 getAllResponseHeaders( ) 對應。

• header表示你但願獲得的指定首部值，而且把這個值做爲串返回。

2.2 標準 XMLHttpRequest 屬性

屬性	描述
onreadystatechange	每一個狀態改變時都會觸發這個事件處理器，值能夠爲回調函數的指針
readyState	請求的狀態。有5個可取值。（在下方有說明）
responseText	服務器的響應，表示一個串
responseXML	服務器的響應，表示爲XML。這個對象可解析爲一個 DOM 對象
status	服務器的 HTTP 狀態碼（200對應 OK，404對應 Not Found …）
statusText	HTTP 狀態碼的相應文本（OK 或 Not Found …）

readyState 請求狀態的5個值：

• 0：未初始化
• 1：正在加載
• 2：已加載
• 3：交互中
• 4：完成

3. Ajax 交互示例

請求返回到瀏覽器時的首部設置：

• Content-Type：text/html
• Cache-Control：no-cache

4. GET 與 POST

GET 請求經過向 url 傳遞參數，瀏覽器和服務器會限制其長度。
POST 則不會限制發送給服務器的數據量大小。通常來說，

• 使用 GET 方法從服務器獲取數據。
• 使用 POST 方法改變服務器上的狀態。

使用 POST 時，須要設置 XMLHttpRequest 對象的 Content-Type 首部：

xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

5. 簡單請求

5.1 回調

onreadystatechange 屬性存儲了回調函數的指針。當 XMLHttpRequest 對象的內部狀態發生改變時，就會調用這個回調函數。當進行了異步調用，請求就會發出，腳本當即處理執行。一旦發出了請求，對象的 readyState 屬性會通過幾個變化，通常處理的是服務器響應結束時的狀態。
回調函數 callback 方法：

xmlHttp.onreadystatechange = callback; //函數指針
function callback() {
    if(xmlHttp.readyState == 4) {
        if(xmlHttp.Status == 200) {
            //能夠簡單的設置div的文本等等
        }       
    }
}

5.2 簡單請求的示例

//javascript
var xmlHttp;

function createXMLHttpRequest() {
    //檢查是否支持 ActiveXObject 控件（IE瀏覽器）
    if(window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    } else if(window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest(); 
    }
}

function startRequest() {
    createXMLHttpRequest();
    xmlHttp.onreadystatechange = handleStateChange;
    xmlHttp.open("GET", "simpleResponse.xml", true);
    xmlHttp.send(null);
}

function handleStateChange() {
    if(xmlHttp.readyState == 4) {
        if(xmlHttp.status == 200) {
            alert("The server replied with: " + xmlHttp.responseText);
            //顯示 simpleResponse.xml 裏的文本
        }
    }
}

<!--html-->
<form action="#">
    <input type="button" value="Start Basic Asynchronous Request" onclick="startRequest();" />
</form>

---

注：以上摘自《Ajax基礎教程》