第一章、關於Ajax及其歷史
Ajax不是一門新的技術，是對JavaScript和XML技術的深入探討。可以說是新瓶裝舊酒。
Ajax中最最重點的內容是XMLHttpRequest，正是由於XMLHttpRequest在現代瀏覽器中的廣泛支持，才使得Ajax技術重新被大家重視起來。
利用Ajax可以實現與服務器端的異步刷新、局部刷新等難題。這在以往也有解決方案，但從來沒有如此簡單過。
Ajax並非沒有缺點。基於JavaScript腳本的客戶端運行，使得安全性是Ajax的弱點。而且在不同瀏覽器版本上，也許需要編寫額外甚至是特定的代碼來支持通用性。IE 4.0以前，是不支持XMLHttpRequest的，雖然現在此類瀏覽器已經很少，但必須考慮到這個事實。
第二章、XMLHttpRequest對象
XMLHttpRequest最早在IE 5中以ActiveX組件形式實現。現在，流行的瀏覽器都支持該技術。他們都有統一的函數與方法，但形式可能不同。有的是ActiveX，有的是javascript對象。因此，在編寫程序創建一個XMLHttpRequest時需要判斷一下瀏覽器的版本。
創建一個XMLHttpRequest對象的代碼如下：
var xmlhttp;
function createXMLHttpRequest(){
if( window.ActiveXObject ){
xmlhttp = new ActiveXObject( "Microsoft.XMLHTTP" );
}
else if( window.XMLHttpRequest ){
xmlhttp = new XMLHttpRequest();
}
}
XMLHttpRequest的方法如下：
| 方法 | 描述 |
| abort() | 停止當前請求 |
| getAllResponseHeaders() | 返回所有HTTP請求的響應首部 |
| getResponseHeader("header") | 返回指定響應首部的串值 |
| open("method","url") |
建立對服務器的調用。method參數可以是"GET/POST/PUT"，url參數可以是相對URL或者 |
| send(content) | 向服務器發送請求。如果method爲GET，則參數爲null |
| setResponseHeader("header","value") | 把指定首部設置爲所提供的值。在設置任何首部之前，必須先調用open方法 |
XMLHttpRequest的屬性如下：
| 屬性 | 描述 |
| onreadystatechange | 該屬性指向某javascript函數的指針。說明該XMLHttpRequest調用的方法 |
| readystate | 請求的狀態。有5個狀態：0＝未初始化，1＝正在加載，2＝已加載，3＝交互中，4＝完成 |
| responseText | 服務器的響應，爲一個串 |
| responseXML |
服務器的響應，表示爲XML，這個對象可以解析爲一個DOM對象 |
| status | 服務器的HTTP狀態碼。（200＝OK，404＝Not Found等等） |
| statusText | HTTP狀態碼對應的文字（OK，Not Found等等） |
交互示例：
<html>
<head>a simple exanple of XMLHttpRequest</head>
<script type="text/javascript">
var xmlhttp;
function createXMLHttpRequest(){
if( window.ActiveXObject ){
xmlhttp = new ActiveXObject( "Microsoft.XMLHTTP" );
}
else if( window.XMLHttpRequest ){
xmlhttp = new XMLHttpRequest();
}
}
function startRequest(){
createXMLHttpRequest();
xmlhttp.onreadystatechange = handleStateChanges;
xmlhttp.open( "GET","simpleResponse.xml" );
xmlhttp.send(null);
}
function handleStateChanges(){
if( xmlhttp.readyState == 4 )
{
if( xmlhttp.status == 200 )
{
alert("The server replied with:" + xmlhttp.responseText ) ;
}
}
}
</script>
<body>
<form action="#">
<input type="button" value="start basic asynchronous request" onclick="startRequest();" />
</form>
</body>