我在找AJAX基礎文章，但是我慧根不夠，老是有看沒有懂。參考兩本書對照之後，總算理出一點頭緒。趁著還有一點印象之前，我用我能理解的方式，做個筆記紀錄一下，免得以後要用時又忘了。
傳統的網頁請求模式，是將整個頁面傳送回Server。而Server整理用戶端的回應後，將整個頁面再全部傳送回給用戶端。
AJAX請求模式，用戶端只有要請求的資料，透過XHR(XMLHttpRequest)這個物件傳送到Server，不再是整個頁面。
Server也不再將整個頁面做回應，它只將要回應的資料，透過XHR送回用戶端。 而XHR擺在頁面上的甚麼地方，就只有那個地方會產生回應資料。大幅減少資料頁面回應的更新。
如果上面還看不懂，舉例來說:
你的電腦風扇壞了，因為你不懂如何修電腦，只好將整台電腦搬到維修公司更換風扇，然後再整台搬回來。
後來，你請了一個助手，他懂如何修電腦。風扇再次壞掉，他只要到維修公司去買了一個風扇回來更換，你的電腦就修好了。XHR就是這位助手。
目前各大瀏覽器及伺服器都支援XHR物件，若XHR執行有問題，先檢查瀏覽器或伺服器是否太舊，導致無法執行。
XHR基本使用方式:
1. 產生一個XHR物件
2. 將用戶端請求，利用XHR物件傳送到Server
3. Server收到後產生回應，將結果回傳。
以下的範例是，當你按下一個按鈕後，XHR會呼叫abc.txt文字檔案，並將內容產生於螢幕上:
============
<html>
<head>
<title>XMLHttpRequest Test</title>
<meta http-equiv="Content-Language" content="zh-tw">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
//一、這是一個產生XHR物件標準的函式，檢查瀏覽器是否
//支援ActiveX的XHR物件，若不支援，則使用JavaScript原
//生XHR物件。
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
//二、這個函式是當用戶端按下按鈕時，XHR會開啟abc.txt檔案
function startRequest()
{
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", "abc.txt", true);
xmlHttp.send(null);
}
//三、XHR會在Server回應readyState == 4(完成)，status = 200
//(HTTP對應OK)後，因為是文字檔，以”responseText”方法，將
//資料產生在名為”disp”的ID上。
function handleStateChange()
{
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
document.getElementById("disp").innerHTML=xmlHttp.responseText;
}
}
}
</script>
</head>
<body>
<form action="#">
<input type="button" value="click me" onClick="startRequest();" />
<div id="disp"></div>
</form>
</body>
</html>
===========
將範例搞清楚後，再查看網路上XHR所提供的其他方法及屬性，應該就比較清楚如何應用了。
我還在努力了解AJAX中，一起加油吧。
