AJAX當我在前兩年第一次看到這個名字的時候，我有些感覺頭大。因為又出了一門新語言，自從WEB應用流行起來時，就層出不窮的新技術。那時在網上看到《Ajax實戰》，很郁悶，又是500多頁的新技術…。但自從接觸WEB以來，很多看似復雜而艱難的東西就像窗戶紙一樣。AJAX也不例外，不是就對當前頁面數據的更新嗎！（說大話了，雖然我還沒用熟它。但它確實沒有相像中的那么難。）
開始整理！
一、AJAX簡介
1. AJAX簡介
AJAX全稱為“Asynchronous JavaScript and XML”（異步JavaScript和XML），是一種創建交互式網頁應用的網頁開發技術。根據Ajax提出者Jesse James Garrett建議[1]，它：
1. 使用XHTML+CSS來表示信息；
2. 使用JavaScript操作DOM（Document Object Model）進行動態顯示及交互；
3. 使用XML和XSLT進行數據交換及相關操作；
4. 使用XMLHttpRequest對象與Web服務器進行異步數據交換；
5. 使用JavaScript將所有的東西綁定在一起。
6. 使用SOAP以XML的格式來傳送方法名和方法參數。
類似于DHTML或LAMP，AJAX不是指一種單一的技術，而是有機地利用了一系列相關的技術。事實上，一些基于AJAX的“派生／合成”式（derivative/composite）的技術正在出現，如“AFLAX”。
AJAX的應用使用支持以上技術的Web瀏覽器作為運行平臺。這些瀏覽器目前包括：Internet Explorer、Mozilla、Firefox、Opera、Konqueror及Mac OS的Safari。但是Opera不支持XSL格式對象，也不支持XSLT[2]。
比如google搜索的提示框，google的地圖都是使用AJAX來實現的。
AJAX技術，不用刷新整個頁面即可完成與服務器通訊并更新頁面顯示數據。
AJAX不用刷新整個頁面便可與服務器通訊的辦法——XMLHttpRequest：該對象是對 JavaScript 的一個擴展，可使網頁與服務器進行通信。是創建 Ajax 應用的最佳選擇。實際上通常把 Ajax 當成 XMLHttpRequest 對象的代名詞，XMLHttpRequest是核心！
2.AJAX工具包
通過簡介我們知道，AJAX不是一項獨有的新技術是多種技術的創新混合。
a) 服務器端語言：服務器需要具備向瀏覽器發送特定信息的能力，Ajax與服務器端語言無關。
b) XML (eXtensible Markup Language，可擴展標記語言) 是一種描述數據的格式。Aajx 程序需要某種格式化的格式來在服務器和客戶端之間傳遞信息，XML 是其中的一種選擇。
c) XHTML（eXtended Hypertext Markup Language,使用擴展超媒體標記語言）和 CSS（Cascading Style Sheet,級聯樣式單）標準化呈現。
d) DOM（Document Object Model,文檔對象模型）實現動態顯示和交互。
e) 使用XMLHTTP組件XMLHttpRequest對象進行異步數據讀取。
f) 使用JavaScript綁定和處理所有數據。
3.AJAX的缺陷
老佟在講解新技術時，時常說的話——沒有完美的技術。AJAX也不例外：
a) 由 Javascript 和 AJAX 引擎的不同導致的瀏覽器的兼容。
b) 頁面局部刷新，導致后退等功能失效。
c) 對流媒體的支持沒有FLASH、Java Applet好。
d) 一些手持設備（如手機、PDA等）支持性差。
AJAX具有這些缺陷，但它帶給人們的體驗和技術的發展是功不可沒的！
二、XMLHttpRequest
1.簡介
XMLHttprequest最早是在IE5中以ActiveX實現的，但它至今仍不是W3C的標準。XMLHttpRequest的創建方法有兩大陣營，微軟自己的ActiveX單兵和其他瀏覽器以JavaScript對象為一個陣營。雖然XMLHttpRequest的創建不同，但它們的接口和屬性相同。
2.創建XMLHttpRequest對象
我們將它單獨拿出來做成一個函數，因為只創建XMLHttpRequest對象一次即可：
| function getXMLHttpRequest(){ if(window.XMLHttpRequest){ return new XMLHttpRequest(); }else if(window.ActiveXObject){ return new ActiveXObject("Microsoft.XMLHTTP"); }else{ return null; } } |
在需要XMLHttpRequest對象的地方，直接調用上面的方法獲得即可！
3.XMLHttpRequest的方法
| 方法 | 描述 |
| abort() | 停止當前的請求 |
| getAllResponseHeader() | 將HTTP請求的所有響應首部作為鍵/值返回 |
| getResponseHeader(“header”) | 返回指定首部的串值 |
| Open(“method”,”url”) | 建立服務器的調用。Method可以是GET、POST或PUT，URL可以是相對URL或絕對URL。 |
| Seng(content) | 向服務器發送請求。 |
| setRequestHeader(“header”,”value”) | 把指定首部設置為所提供的值。在設置任何首部之前必須先調用open()。 |
4.XMLHttpRequest的屬性
| 屬性 | 描述 |
| readyState | 請求狀態，狀態值：0，未初始化。1，正在加載。2，已經加載。3，交互中。4，完成。 |
| onreadystatechange | 當readyState狀態值被改變時，都會調用這個屬性指定的JavaScript函數。 |
| responseText | 服務器的響應，表示為一個串。 |
| responseXML | 服務器的XML響應，可以解析為 DOM對象。 |
| status | 服務器響應的HTTP狀態碼。 |
| statusText | 服務器響應的HTTP狀態碼的相應文本。 |
三、XMLHttpRequest發送與接收請求
XMLHttpRequest與服務器進行通訊包含以下三個關鍵部分：
1. onreadystatechange事件處理函數
2. open方法
3. seng方法
在發送和接收請求之前先了解XMLHttpRequest的onreadystatechange屬性。為此屬性指定一個無參數的函數。在onreadystatechange指定的函數中通過判斷XMLHttpRequest的readyState值，來進行相應的處理。比如，readyState為4時說明服務器處理XMLHttpRequest的請求完成，這時我們就可以獲取服務器的響應數據。readyState值是被服務器改變的。
1．發送請求
1) 準備請求
XMLHttpRequestObj .open(method, url, asynch)，open 方法允許程序員用一個Ajax調用向服務器發送請求：
method：請求類型，類似 “GET”或”POST”的字符串。若只想從服務器檢索一個文件，而不需要發送任何數據，使用GET(可以在GET請求里通過附加在URL上的查詢字符串來發送數據，不過數據大小限制為2000個字符)。若需要向服務器發送數據，用POST。在某些情況下，有些瀏覽器會把多個XMLHttpRequest請求的結果緩存在同一個URL。如果對每個請求的響應不同，就會帶來不好的結果。在此將時間戳追加到URL的最后(url+”?time=”+new Date())，就能確保URL的唯一性，從而避免瀏覽器緩存結果。
url：路徑字符串，指向你所請求的服務器上服務的路徑。可以是絕對路徑或相對路徑。
asynch：表示請求是否要異步傳輸，默認值為true。指定true，在讀取后面的腳本之前，不需要等待服務器的響應。指定false，當腳本處理過程經過這點時，會停下來，一直等到Ajax請求執行完畢再繼續執行。
2) 發送請求
XMLHttpRequestObj .send(data)，send 方法可為已經待命的請求（open設置的準備就地正法）發送指令：
data：將要傳遞給服務器的字符串。若選用的是 GET 請求，則不會發送任何數據， 給 send 方法傳遞 null 即可：request.send(null);。當向send()方法提供參數時，要確保open()中指定的方法是POST，如果沒有數據作為請求體的一部分發送，則使用null。
3) 請求信息頭
XMLHttpRequestObj .setRequestHeader(header,value)：
當瀏覽器向服務器請求頁面時，它會伴隨這個請求發送一組首部信息。這些首部信息是一系列描述請求的元數據(metadata)。首部信息用來聲明一個請求是 GET 還是 POST。Ajax 請求中，發送首部信息的工作可以由 setRequestHeader該完成。
header： 首部的名字.
value：首部的值。
如果用POST 請求向服務器發送數據，需要將“Content-type”的首部設置為 “application/x-www-form-urlencoded”。它會告知服務器正在發送數據，并且數據已經符合URL編碼了。該方法必須在open()之后才能調用。
2.接收請求
當一個請求被響應后，XMLHttpRequest的如下屬性被設置（看前邊的表它們分別代表什么意思）：readyState、status、responseText、responseXML。
1) readyState，表示Ajax請求的當前狀態。
n 0 代表未初始化，還沒有調用 open 方法。
n 1 代表正在加載，open 方法已被調用，但 send 方法還沒有被調用。
n 2 代表已加載完畢，send 已被調用請求已經開始。
n 3 代表交互中，服務器正在發送響應。
n 4 代表完成，服務器響應發送完畢。
每次 readyState 值的改變，都會觸發 readystatechange 事件。如果把 onreadystatechange 事件處理函數指定為一個函數，那么每次 readyState 值的改變都執行該函數。
readyState 值的變化會因瀏覽器的不同而有所差異。但是，當請求結束的時候，每個瀏覽器都會把 readyState 的值統一設為 4。我們常處理readyState為4的應用。
2) 服務器的響應信息頭，三位數的狀態碼是服務器發送的響應中最重要的頭部信息，并且屬于超文本傳輸協議中的一部分。常用狀態碼及其含義：
l 404 沒找到頁面(not found)
l 403 禁止訪問(forbidden)
l 500 內部服務器出錯(internal service error)
l 200 一切正常(ok)
l 304 沒有被修改(not modified)
在 XMLHttpRequest 對象中，服務器發送的狀態碼都保存在 status 屬性里。通過把這個值和 200 或 304 比較，可以確保服務器是否已發送了一個成功的響應！我們以此為標記，決定是否處理響應信息哦！~
3) responseText，此屬性包含了從服務器發送的數據。它是一個HTML，XML或普通文本，這取決于服務器發送的內容。
當 readyState 屬性值變成 4 時，responseText 屬性可用，表明 Ajax 請求已經結束。我們通過此取獲取服務器響應的信息，一般為HTML或JSON信息。我們可以直接使用HTML響應內容，如果響應內容為JSON，我們必須獲取JSON體中的休息。
4) responseXML
如果服務器返回的是XML，那么數據將儲存在responseXML 屬性中。
只用服務器發送了帶有正確首部信息的數據時， responseXML 屬性才是可用的。 MIME 類型必須為 text/xml。我們通過此取獲取服務器響應的信息，一般為XML信息。我們可以使用DOM獲取XML中的響應內容。
三、XMLHttpRequest響應內容的數據格式
在服務器端 AJAX 是一門與語言無關的技術，在業務邏輯層使用何種服務器端語言都可以。
從服務器端接收數據的時候，那些數據必須以瀏覽器能夠理解的格式來發送。服務器端的編程語言只能以如下 3 種格式返回數據：
l XML
l JSON
l HTML
1.HTML
還記得最初編寫的Serlvet嗎？在Serlvet中直接向輸出流打印HTML信息，JSP頁面被翻譯為Servlet時，也是通過輸出流向瀏覽器輸出HTML信息。瀏覽器，直接顯示即可。所以在XMLHttpRequest處理請求信息時，可以直接使用DOM對象的innerHtml屬性或JQuery對象的html()方法，將responseText文本內容直接添加到頁面元素節點中。
雖然這使用HTML做為響應數據格式十分方便快捷，但當需要更新一篇文檔的多個部分時HTML就不大合適了，并且innerHtml不是w3c的標準。
2.XML
XML是WEB的世界能用語言，我們可以自定義XML格式，并且可以通過DOM對象完全操作XML。使用XML作為響應數據的格式，必須保證XML的頭部信息正確，比如：“<?xml version="1.0" encoding="utf-8"?>”。若這個格式不正確，那么responseXML的值將是空的。
使用XML的最大難處是，如果XML的內容龐大或復雜，使用DOM解析XML數據是痛苦的。
3. JSON
這個東西在我接觸WEB時就看見它，甚至在GWT的也有看見它。當時感覺比較神秘！~~JSON是什么呢？
JSON（JavaScript Object Notation）一種簡單的數據格式，比xml更輕巧。JSON是JavaScript原生格式，這意味著在JavaScript中處理JSON數據不需要任何特殊的API或工具包。
JSON的規則很簡單：對象是一個無序的“‘名稱/值’對”集合。一個對象以“{”（左括號）開始，“}”（右括號）結束。每個“名稱”后跟一個“:”（冒號）；“‘名稱/值’對”之間使用“,”（逗號）分隔。如：
| var $itcast = { "name":"itcast", "birthday":"2000", "contact":"123456789", "address":[{"country":"china","city":"beijing"}, {"country":"america","city":"newyork"}] } |
JSON，使用:取代=號。每一條賦值語句使用,號分隔。整體使用{}包圍，也可以{}潛逃使用。數組使用[]包圍，成員之間使用,號分隔。
JSON中的成員值可以是字符串，數字或者布爾值也可以是函數。
如使用“$ itcast.name”獲得“itcast”，使用“$ itcast.address[0].country”獲取“china”。
JSON 只是一種文本字符串。它被存儲在 responseText 屬性中為了讀取存儲在 responseText 屬性中的 JSON 數據，需要使用 JavaScript 的 eval函數。eval 會把字符串參數當作 JavaScript 代碼來執行。因為 JSON 的字符串就是由 JavaScript 代碼構成的，所以它本身是可執行的。
JSON提供了json.js包，下載http://www.json.org/json.js后，可以使用parseJSON()方法將字符串解析成 JS 對象。
使用JSON做為響應內容的數據格式十分靈巧，而且不需要設置數據格式。但它的語法過于嚴謹，并且eval函數存在風險，比如服務器發送了一個無限循環的JSON內容…。
若應用程序不需要與其他應用程序共享數據的時候，使用 HTML 片段來返回數據是最簡單的。
如果數據需要重用，JSON 文件是個不錯的選擇，其在性能和文件大小方面有優勢。
當遠程應用程序未知時，XML 文檔是首選，因為 XML 是 web 服務領域的 “世界語”。
四、使用JQuery操作AJAX
使用JQuery操作AJAX十分簡便，在 jQuery 中最底層的方法是$.ajax()，第二層是load()，$.get() 和 $.post()，第三層是 $.getScript() 和 $.getJSON()。
1.load方法
load(url, [data], [callback])，它前將響應信息中的HTML數據直接插入到DOM中。比如$(“#id”).load(url,data,callbackfunc);直接將響應信息插入到id指向的元素節點中。
我們也可以使用選擇器或過濾器來選取響應數據中的某一部分內容，方法是在url參數后邊加上過濾器，中間使用空格分隔。如，$(“#id”).load(url+” ”+”a:first”,data,callbackfunc);，就是選取返回信息中的第一個a元素插入到id指定的元素中。
data與callback可以根據需要指定或不指定。當指定data時，load函數會設置請求方式為post，否則為get。Callbackfunc在處理完成才能繼續的操作，這個回調函數有三個參數：代表請求返回內容的 data、代表請求狀態的 textStatus 對象和 XMLHttpRequest 對象。
2.get或post方法
get()和post()方法使用get和post方式來進行異步請求。它的結構是：get(url, [data], [callback], [type]);和post(url, [data], [callback], [type]);。
它們的回調函數只有兩個參數：data代表返回的內容，可以是XML文檔、JSON 文件或HTML片段等；textstatus代表請求狀態，其值可能為：succuss、error、notmodify、timeout 四種。
get()和post()方法是JQuery中的全局函數，而find()等方法都是對JQuery對象進行操作的方法。
（具體細節可以查看JQuery的幫助手冊）
3.序列化元素
JQuery為準備“發送到服務器的 key/value 數據”提供了一個簡化的方法：serialize()，該方法作用于一個JQuery對象，能將DOM元素內容序列化為字符串，用于 Ajax 請求。
比如，我們有一個登陸表單：
$.get(“ajax/login”,{“username”:$(“#username”).val(),”password”:$(“#password”).val()},function(data,textStatus){alert(data)});
如果這是一個用戶注冊的表單呢？需要手動填寫所有這些信息？No，serialize可以幫我們解決這個問題。如下：
$.get(“ajax/login”,$(“#loginform”).serialize() ,function(data,textStatus){alert(data)});
OK，這樣就搞定了。Serialize不僅可以用于Form表單，還可以用在其他有“key/value”的地方。
使用 serialize() 方法可以自動完成對參數的 url 編碼。
因為該方法作用于JQuery 對象, 所以不光只要表單能使用，其它選擇器選取的元素也能使用它。
五、其他
JQuery BlockUI Plugin一個比較實用的JQuery插件，將用戶向服務器提交請求時，它會獨占整個頁面并顯示“Please wait…”。直到服務器響應完成時，它才退出顯示，將頁面交還給用戶。我們只需要在“$(function(){…}”中添加下面兩句代碼即可，別忘記引入插件的js文件哦！
| $().ajaxStart($.blockUI); $().ajaxStop($.unblockUI); |
Ok！加油！