一直聽別人說Ajax怎麽怎麽實用，做什麽什麽東西要用Ajax，我也看了看Ajax大概是個什麽東西，今天就整理整理我學到的一些東西吧。

1.傳統的web應用
傳統的web應用允許用戶填寫表單(form)，當提交表單時就向Web服務器發送一個請求。
服務器接收並處理傳來的表單，然後返回一個新的網頁。這個做法浪費了許多帶寬，因為在前後兩個頁面中的大部分HTML代碼往往是相同的。
由於每次應用的交互都需要向服務器發送請求，應用的響應時間就依賴於服務器的響應時間。這導致了用戶界面的響應比本地應用慢得多。如果嚴重超過響應時間，服務器幹脆告訴用戶頁面不可用。
如果只是想改變頁面一小部分的數據，那麽如何不必重新加載整個責面，減少用戶等待的時間是急需解決的問題。
要解決這樣的問題，除了更優秀的程序設計、編碼優化和調整服務器之外，還可以采用Ajax技術。

2.改變傳統web應用的ajax
AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。
AJAX 不是新的編程語言，而是一種使用現有標準的新方法。
AJXA不是一門新的技術,而是把一些老的技術結合起來有了新的用法.
AJAX 是與服務器交換數據並更新部分網頁的藝術，在不重新加載整個頁面的情況下。
AJAX = 異步 JavaScript 和 XML。
AJAX 是一種用於創建快速動態網頁的技術。
通過在後臺與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
傳統的網頁（不使用 AJAX）如果需要更新內容，必需重載整個網頁面。
有很多使用 AJAX 的應用程序案例：新浪微博、Google 地圖、開心網等等。

3.ajax的特點
ajax的特點總結起來八個字: 異步交互 局部刷新

4.Ajax的四種關鍵元素/技術
1)JavaScript JavaScript是通用的腳本語言,用來嵌入在某種應用之中.web瀏覽器中嵌入的JavaScript解釋器允許通過瀏覽器的很多內建功能進行交互.Ajax應用程序是使用JavaScrpit編寫的
2)CSS(Cascading Stytle Sheets，層疊式樣式表) CSS為Web頁面元素提供了一種可重用的可視化樣式的定義方法.他提供了簡單而又強大的方法,以一致的方式定義和使用可視化樣式.在Ajax應用中,用戶界面的樣式可以通過CSS獨立修改.
3)DOM(文檔對象模型):Dom以一組可以使用JavaScrpit操作的可編程對象展現出web頁面的結構,通過使用腳本修改Dom,Ajax應用程序可以在運行時改變用戶界面,或者高效的重繪頁面中的某個部分
4)XMLHttpRequest對象:XMLHttpRequest對象允許Web程序員從web服務器以後臺活動的方式獲取數據.數據格式通常是XML,但是也可以很好的支持任何基於文本的數據格式.盡管XMLHttpRequest對於完成這件工作來說是最為靈活和通用的工具,但還有其它方法也可以從服務器獲取數據.
其中CSS,DOM,JavaScrpit都不是新面孔,以前結合在一起稱為動態HTML,或者簡單DHTML

5.XMLHttpRequest
XMLHttpRequest最早在IE5中以ActiveX對象的形式實現的。現在，FireFox、Safari、Opera、Konqueror和IE都實現了XMLHttpRequest對象的行為。

XMLHttpRequest不是一個W3C的標準，所有可以采用多種方法使用JavaScript來創建XMLHttpRequest的對象，IE把XMLHttpRequest實現為一個ActiveX的對象(ActiveX為微軟倡導的ActiveX 網絡化多媒體對象技術)，而其它瀏覽器將它實現為一個本地的JavaScript對象。如果瀏覽器支持ActiveX對象，就可以使用ActiveX來創建XMLHttpRequest對象，否則就要使用本地JavaScript對象技術來創建該對象。

6.XMLHttpRequest對象相關的操作和方法
1) 創建XMLHttpRequest對象的代碼:
var xmlHttp = new XMLHttpRequest();
function createXMLHttpRequest(){
//本地瀏覽器是否支持ActiveX對象，返回對象為true，返回null為false
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
//本地瀏覽器是否支持XMLHttpRequest對象
}else if(window.XMLHttpRequest){
//作為一個JavaScript對象來創建
xmlHttp = new XMLHttpRequest();
}
}

2) XMLHttpRequest對象的方法和屬性
a) abort()
停止當前的請求

b) getAllResponseHeaders()
把HTTP請求的所有響應首部作為鍵/值對返回

c) getResponseHeader("header")
返回指定首部的串值

d) void open(String method,String url,boolean asynch,
String username,String password):
建立對服務器的調用，method參數可以是GET、POST或者PUT。
url參數可以是相對URL或者絕對URL，參數asynch來指示調用
采用的是同步還是異步，默認為true，采用異步調用，如果為false，
處理就會等待，直到服務器返回響應為止。

e) void send(content)
向服務器發出異步請求，如果請求是異步的，
這個方法就會立即返回，否則它會等待直到接受到服務器的返回響應為止。
輸入的content可以是DOM的實例對象、輸入流或者字符串，
傳入這個方法的內容作為請求體的一部分發送。若send(null)則請求體為空。

f) void setRequestHeader(String header,String value)
這個方法為HTTP請求中一個給定的首部字段設置值，這個方法必須在調用open()方法之後才能調用。

g) onreadystatechange
每次XMLHttpRequest對象的狀態改變時都會觸發這個事件處理器，
這個事件處理器通常會調用一個JavaScript函數去執行
相關的代碼。

h) readyState
XMLHttpRequest對象的狀態變化。
0 (未初始化) 新的XMLHttpRequest對象實例已建立，但是尚未初始化（尚未調用open方法）
1 (正在加載) 新的XMLHttpRequest對象實例已建立，尚未調用send方法 。
2 (已經加載) send方法已調用，但是當前的response狀態未知
3 (交互中) 客戶端已接收部分response中的信息，但是沒有全部接受，這時通過responseXML或者responseText獲取部分數據會出現錯誤，
4 (完成) 數據接收完畢,此時可以通過responseXML或者responseText獲取完整的應答信息。

i) responseText
服務器的響應，表示為一個文本內容。

j) responseXML
服務器的響應，表示為一個XML文檔。

k) status
服務器的HTTP狀態碼(200=OK 404=Not Found IE(1223)
FireFox(204)=服務器沒有信息返回 )

l) statusText
HTTP狀態碼的相應文本(OK或者Not Found)

3) 請求返回到瀏覽器
Content-Type設置為text/xml，XMLHttpRequest對象只能處理text/html的結果。
在另外一些復雜的示例中，響應可能涉及更廣，還包括JavaScript、DOM管理以及
其它相關的技術。需要說明，你還要設置另外一些首部，使瀏覽器不會在本地緩存結果。
response.setHeader("Cache-Control","no-cache");
response.setHeader("Pragma","no-cache");

4) 回調函數
對於XMLHttpRequest對象，onreadystatechange屬性
存儲了回調函數的指針。當XMLHttpRequest對象的
內部狀態發生變化時，就會調用這個回調函數。
function ajaxCallBack(){
if(xmlHttpRequest.readyState==4){
if(xmlHttpRequest.status==200){
//拿到接收好的數據

//進行局部刷新
　　　　}
　　}
}

5) 常用提交方式
a) POST
xmlHttp.open("POST",url,true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
xmlHttp.onreadystatechange=ajaxCallback;
xmlHttp.send(parameter);
註意: 此時parameter在請求體中
b) GET
xmlHttp.open("POST",url,true);
xmlHttp.onreadystatechange=ajaxCallback;
xmlHttp.send(null);

6) 使用innerHTML屬性創建動態內容
它是一個非標準的屬性，最早在IE中實現，這是一個簡單的串，表示一組開始標記和結束標記之間的內容。

以下是我練習時的例子：（用Ajax進行異步判斷是否存在提交的姓名）

https://github.com/Caesar909937/Ajax

Ajax的學習筆記