摘要：AJAX實際上由4種技術構成：JavaScript、CSS、DOM、XMLHttpRequest 前三種技術都是傳統web應用中常用的技術，只有XMLHttpRequst在傳統web中的應用不是很多，所以就來對XMLHttpRequst做個了解。
首先XMLHttpRequest不是web標準，而是大部分主流瀏覽器都支持的一種擴展技術。它被認為是一種異步調用的實現技術，因為它本來是被設計在后臺取數據用的。在IE中它被作為一個ActiveX控件提供，而其他一些瀏覽器都提供一些本地API以供調用。
下面是一些關于XMLHttpRequest的基本方法：
1、獲取得一個XMLHttpRequest對象：
function getXMLHttpRequest() 
{
var xRequest = null;
if (window.XMLHttpRequest) {
xRequest = new XMLHttpRequest();
} else if (typeof ActiveObject != "undefined") {
xRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
return xRequest;
}
2、向服務器發送XMLHttpRequest：
function sendRequest(url, params, HttpMethod) {
if (!HttpMethod){
HttpMethod = "POST";
}
var req = getXMLHttpRequest();
if (req) {
req.open(HttpMethod, url, true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send(params);
}
}
3、使用回調方法來監測XMLHttpRequest對象的狀態
XMLHttpRequest使用屬性readyState來表示它的狀態
0 = 未初始化
1 = 讀取中
2 = 已讀取
3 = 交互中
4 = 完成
在事件驅動開發中我們經常使用回調技術，比如UI設計中的對按鍵的響應等等。我們可以使用對XMLHttpRequest對象的onreadystatechange屬性來設置監視XMLHttpRequest對象的狀態的回調方法：
function sendRequest(url, params, HttpMethod) {
if (!HttpMethod){
HttpMethod = "POST";
}
var req = getXMLHttpRequest();
if (req) {
req.onreadystatechange = onReadStateChage;
req.open(HttpMethod, url, true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send(params);
}
}
function onReadyStateChange(){
//
}
4、完整的例子
<html>
<head>
<script language="JavaScript">
var req = null;
var infos = new Array("init", "loading", "loaded", "running", "finished");
var console = null;
function initXMLHttpRequest() {
if (req == null) {
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
}
else if (typeof ActiveObject != "undefined") {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
}
}
function sendRequest(url) {
if (req == null) {
initXMLHttpRequest();
}
if (req) {
req.onreadystatechange = onReadyStateChange;
req.open("GET", url, true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send(null);
}
}
function onReadyStateChange(){
if (console == null) {
console = document.getElementById('console');
}
var state = req.readyState;
var txt;
if (state == 4) {
if (!req.status == 200) {
txt = "response:" + req.status;
} else {
txt = "response:" + req.responseText;
}
} else {
txt = infos[state];
}
var newline = document.createElement("div");
newline.appendChild(document.createTextNode(txt));
console.appendChild(newline);
}
</script>
</head>
<body>
<div id="console"></div>
<input type="button" onClick="sendRequest('ajax_test.txt')" value="Send Request"/>
</body>
</html>
將上面的代碼保存為ajax_text.html文檔中，然后在同一路徑放一個ajax_test.txt，在這個文本文件寫下一行文字，用瀏覽器打開 ajax_text.html，點擊"Send Request"看看發生了什么？
BTW 我只在Firefox中測試過，因為我用的是Linux
學習參考資料：
《AJAX in Action》
AJAX開發簡略
AJAX開發簡略續一