Ajax的原理簡單來說通過XmlHttpRequest對象來向伺服器發異步請求，從伺服器獲得資料，然後用javascript來操作DOM而更新頁面。
大家都知道ajax并非一種新的技術，而是幾種原有技術的結合體。它由下列技術組合而成。
1.使用CSS和XHTML來表示。 2. 使用DOM模型來互動和動态顯示。 3.使用XMLHttpRequest來和伺服器進行異步通信。 4.使用javascript來綁定和調用。
所有現代浏覽器均支援 XMLHttpRequest 對象（IE5 和 IE6 使用 ActiveXObject）。XMLHttpRequest 用于在背景與伺服器交換資料。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 對象：
如需将請求發送到伺服器，我們使用 XMLHttpRequest 對象的 open() 和 send() 方法：
方法
描述
open(method,url,async)
規定請求的類型、URL 以及是否異步處理請求。
-method：請求的類型；GET 或 POST
-url：檔案在伺服器上的位置
-async：true（異步）或 false（同步）
send(string)
-将請求發送到伺服器。
-string：僅用于 POST 請求
與 POST 相比，GET 更簡單也更快，并且在大部分情況下都能用。
然而，在以下情況中，請使用 POST 請求：
無法使用緩存檔案（更新伺服器上的檔案或資料庫）
向伺服器發送大量資料（POST 沒有資料量限制）
發送包含未知字元的使用者輸入時，POST 比 GET 更穩定也更可靠
GET 請求
一個簡單的 GET 請求：
在上面的例子中，您可能得到的是緩存的結果。為了避免這種情況，請向 URL 添加一個唯一的 ID：
如果您希望通過 GET 方法發送資訊，請向 URL 添加資訊：
POST 請求
一個簡單 POST 請求：
如果需要像 HTML 表單那樣 POST 資料，請使用 setRequestHeader() 來添加 HTTP 頭。然後在 send() 方法中規定您希望發送的資料：
注：setRequestHeader(header,value),向請求添加 HTTP 頭,header: 規定頭的名稱;value: 規定頭的值。
open() 方法的 url 參數是伺服器上檔案的位址：
該檔案可以是任何類型的檔案，比如 .txt 和 .xml，或者伺服器腳本檔案，比如 .asp 和 .php （在傳回響應之前，能夠在伺服器上執行任務）。
AJAX 指的是異步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
XMLHttpRequest 對象如果要用于 AJAX 的話，其 open() 方法的 async 參數必須設定為 true：
對于 web 開發人員來說，發送異步請求是一個巨大的進步。很多在伺服器執行的任務都相當費時。AJAX 出現之前，這可能會引起應用程式挂起或停止。
通過 AJAX，JavaScript 無需等待伺服器的響應，而是：
-在等待伺服器響應時執行其他腳本
-當響應就緒後對響應進行處理
Async = true
當使用 async=true 時，請規定在響應處于 onreadystatechange 事件中的就緒狀态時執行的函數：
Async = false
如需使用 async=false，請将 open() 方法中的第三個參數改為 false：
我們不推薦使用 async=false，但是對于一些小型的請求，也是可以的。
請記住，JavaScript 會等到伺服器響應就緒才繼續執行。如果伺服器繁忙或緩慢，應用程式會挂起或停止。
注釋：當您使用 async=false 時，請不要編寫 onreadystatechange 函數 - 把代碼放到 send() 語句後面即可。
如需獲得來自伺服器的響應，請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。
屬性
responseText
獲得字元串形式的響應資料。
responseXML
獲得 XML 形式的響應資料。
現在json資料用的較多，擷取responseText資料後需要解析jason資料，如：var _data= JSON.parse(data);
當請求被發送到伺服器時，我們需要執行一些基于響應的任務。
每當 readyState 改變時，就會觸發 onreadystatechange 事件。
readyState 屬性存有 XMLHttpRequest 的狀态資訊。
下面是 XMLHttpRequest 對象的三個重要的屬性：
onreadystatechange
存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。
readyState
存有 XMLHttpRequest 的狀态。從 0 到 4 發生變化。
-0: 請求未初始化
-1: 伺服器連接配接已建立
-2: 請求已接收
-3: 請求進行中
-4: 請求已完成，且響應已就緒
status
-200: "OK"
-404: 未找到頁面
在 onreadystatechange 事件中，我們規定當伺服器響應已做好被處理的準備時所執行的任務。
當 readyState 等于 4 且狀态為 200 時，表示響應已就緒：
注：onreadystatechange 事件被觸發 5 次（0 - 4），對應着 readyState 的每個變化。
callback 函數是一種以參數形式傳遞給另一個函數的函數。
如果您的網站上存在多個 AJAX 任務，那麼您應該為建立 XMLHttpRequest 對象編寫一個标準的函數，并為每個 AJAX 任務調用該函數。
該函數調用應該包含 URL 以及發生 onreadystatechange 事件時執行的任務（每次調用可能不盡相同）：
擷取課程清單接口說明
擷取資料後添加到html裡，并增加樣式，顯示如下：
跨域問題會另作介紹。
-------------------------------------------------------------------------------------------------------------------------------------
完
轉載需注明轉載字樣，标注原作者和原博文位址。
更多閱讀：
<a href="http://www.w3school.com.cn/ajax/index.asp">http://www.w3school.com.cn/ajax/index.asp</a>
<a href="http://www.w3school.com.cn/tiy/t.asp?f=ajax_httpsuggest">http://www.w3school.com.cn/tiy/t.asp?f=ajax_httpsuggest</a>
http://www.juhe.cn/