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