Ajax實際上由4種技術構成：JavaScript、CSS、DOM、XMLHttpRequest 前三種技術都是傳統web應用中常用的技術，只有XMLHttpRequst是傳統web應用中不曾使用過得。
首先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"看看發生了什么？
出處：http://www.aygfsteel.com/cmaxvv/archive/2005/11/23/21086.html