request|xml|xmlhttprequest在Ajax應用程式中,如果是Mozilla/Firefox/Safari中,可以透過XMLHttpRequest來發出非同步請求,如果是在IE6 或IE先前版本,則是使用ActiveXObject來發出非同步請求,為了各個不同瀏覽器間的相容性,必須進行測試可取得XMLHttpRequest 或ActiveXObject,例如:
var xmlHttp;
function createXMLHttpRequest() {
if (window.XMLHttpRequest) { // 如果可以取得XMLHttpRequest
xmlHttp = new XMLHttpRequest(); // Mozilla、Firefox、Safari
}
else if (window.ActiveXObject) { // 如果可以取得ActiveXObject
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer
}
}
這段程式碼可以滿足大部份的瀏覽器,您可以再進一步檢查是否真正生成了物件,例如:
if(xmlHttp) {
// do request
}
else {
alert("您的瀏覽器不支援這個Ajax程式的功能");
}
在建立XMLHttpRequest之後,則可以使用以下的幾種方法:
- void open(string method, string url, boolean asynch, string username, string password)
- void send(content)
- void setRequestHeader(string header, string value)
- void abort()
- string getAllResponseHeaders()
- string getResponseHeader(string header)
XMLHttpRequest包括以下幾個標準屬性:
- onreadystatechange
- readyState
0 = 未初始化的連線(uninitialized),還沒呼叫open()
1 = 載入中(loading),呼叫open(),還沒呼叫send()
2 = 已載入(loaded),呼叫send(),請求header/status準備好
3 = 互動中(interactive),正在與伺服器互動中
4 = 請求完成(completed),完成請求
- responseText
- responseXML
- status
- statusText
一個基本的Ajax請求可以是以下的片段:
function startRequest() {
createXMLHttpRequest(); // 建立非同步請求物件
xmlHttp.onreadystatechange = handleStateChange; // 設定callback函式
xmlHttp.open("GET", "simpleResponse.txt"); // 開啟連結
xmlHttp.send(null); // 傳送請求
}
function handleStateChange() { // 在這邊處理非同步回應
…
}
當每次readyState改變時,都會呼叫以上程式片段中設定的handleStateChange()函式,通常會在請求完成進行處理,所以您可以如以下的程式片段來處理回應:
function handleStateChange() {
if (xmlHttp.readyState == 4) { // 測試狀態是否請求完成
if (xmlHttp.status == 200) { // 如果伺服端回應OK
alert("伺服器回應" + xmlHttp.responseText); // 這邊只取得回應文字
}
}
}