AJAX算是一個不算是一個新的技術,利用非同步的方式,提供互動式的網頁,AJAX面對最大的問題就是各個Browser之間對Java Script的標準與設計不一,常常寫好的能在FireFox上執行,在IE卻不能執行,所以在設計AJAX的時候最好考慮一下相容性的問題。
簡單的來說,AJAX提供XMLHttpRequest送出request給Web Server,接著等待回應,並處理回應的資料。
XMLHttpRequest
由於Browser之間對Java Script的標準與設計不一,所以下面的寫法可以用於大多數的形況。// Provide the XMLHttpRequest class for IE 5.x-6.x:
// Other browsers (including IE 7.x-8.x) ignore this
// when XMLHttpRequest is predefined
if (typeof(XMLHttpRequest) == "undefined")
{
XMLHttpRequest = function() {
try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); }
catch(e) {}
try { return new ActiveXObject("Msxml2.XMLHTTP.4.0"); }
catch(e) {}
try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); }
catch(e) {}
try { return new ActiveXObject("Msxml2.XMLHTTP"); }
catch(e) {}
try { return new ActiveXObject("Microsoft.XMLHTTP"); }
catch(e) {}
throw new Error("This browser does not support XMLHttpRequest.");
};
}
xmlHttpRequest = new XMLHttpRequest();
有了XMLHttpRequest之後,我們就可以送出request並且處理資料xmlHttpRequest.onreadystatechange = function () { //處理來自Server的回應
if(xmlHttpRequest.readyState==4) {
alert(xmlHttpRequest.responseText); // Server回應的內容
// 如果回傳的是XML資料可以使用responseXML
}
}
xmlHttpRequest.open("GET","my.php", true);
// 設定送出的method(GET/POST), 以及對象(URL)
// 基於安全考量,你不能呼叫不同網域的網頁。如果網域不同時會出現「權限不足,拒絕存取」的錯誤。
// 第三個參數設定此request是否不同步進行,如果設定為TRUE,則即使伺服器尚未回傳資料,也會繼續執行其餘的程式。
xmlhttp.send(null); // 送出request
State | Description |
---|---|
0 | The request is not initialized |
1 | The request has been set up |
2 | The request has been sent |
3 | The request is in process |
4 | The request is complete |