Ajax這個(gè)概念的最早提出者Jesse James Garrett認為： Ajax是Asynchronous JavaScript and XML的縮寫(xiě)。
Ajax并不是一門(mén)新的語(yǔ)言或技術(shù),它實(shí)際上是幾項技術(shù)按一定的方式組合在一在同共的協(xié)作中發(fā)揮各自的作用,它包括
使用XHTML和CSS標準化呈現;
使用DOM實(shí)現動(dòng)態(tài)顯示和交互;
使用XML和XSLT進(jìn)行數據交換與處理;
使用XMLHttpRequest進(jìn)行異步數據讀取;
最后用JavaScript綁定和處理所有數據;
Ajax的工作原理相當于在用戶(hù)和服務(wù)器之間加了—個(gè)中間層,使用戶(hù)操作與服務(wù)器響應異步化。并不是所有的用戶(hù)請求都提交給服務(wù)器,像—些數據驗證和數據處理等都交給Ajax引擎自己來(lái)做,只有確定需要從服務(wù)器讀取新數據時(shí)再由Ajax引擎代為向服務(wù)器提交請求。
雖然Garrent列出了7條Ajax的構成技術(shù)，但個(gè)人認為，所謂的Ajax其核心只有JavaScript、XMLHTTPRequest和DOM，如果所用數據格式為XML的話(huà)，還可以再加上XML這一項(Ajax從服務(wù)器端返回的數據可以是XML格式，也可以是文本等其他格式)。
在舊的交互方式中,由用戶(hù)觸發(fā)一個(gè)HTTP請求到服務(wù)器,服務(wù)器對其進(jìn)行處理后再返回一個(gè)新的HTHL頁(yè)到客戶(hù)端,每當服務(wù)器處理客戶(hù)端提交的請求時(shí),客戶(hù)都只能空閑等待,并且哪怕只是一次很小的交互、只需從服務(wù)器端得到很簡(jiǎn)單的一個(gè)數據,都要返回一個(gè)完整的HTML頁(yè),而用戶(hù)每次都要浪費時(shí)間和帶寬去重新讀取整個(gè)頁(yè)面。
而使用Ajax后用戶(hù)從感覺(jué)上幾乎所有的操作都會(huì )很快響應沒(méi)有頁(yè)面重載（白屏）的等待。
1、XMLHTTPRequest Ajax的一個(gè)最大的特點(diǎn)是無(wú)需刷新頁(yè)面便可向服務(wù)器傳輸或讀寫(xiě)數據(又稱(chēng)無(wú)刷新更新頁(yè)面),這一特點(diǎn)主要得益于XMLHTTP組件XMLHTTPRequest對象。這樣就可以向再發(fā)桌面應用程序只同服務(wù)器進(jìn)行數據層面的交換,而不用每次都刷新界面也不用每次將數據處理的工作提交給服務(wù)器來(lái)做,這樣即減輕了服務(wù)器的負擔又加快了響應速度、縮短了用戶(hù)等候時(shí)間。
最早應用XMLHTTP的是微軟,IE（IE5以上）通過(guò)允許開(kāi)發(fā)人員在Web頁(yè)面內部使用XMLHTTP ActiveX組件擴展自身的功能,開(kāi)發(fā)人員可以不用從當前的Web頁(yè)面導航而直接傳輸數據到服務(wù)器上或者從服務(wù)器取數據。這個(gè)功能是很重要的,因為它幫助減少了無(wú)狀態(tài)連接的痛苦,它還可以排除下載冗余HTML的需要,從而提高進(jìn)程的速度。Mozilla（Mozilla1.0以上及NetScape7以上）做出的回應是創(chuàng )建它自己的繼承XML代理類(lèi)：XMLHttpRequest類(lèi)。Konqueror (和Safari v1.2,同樣也是基于KHTML的瀏覽器)也支持XMLHttpRequest對象,而Opera也將在其v7.6x+以后的版本中支持XMLHttpRequest對象。對于大多數情況，XMLHttpRequest對象和XMLHTTP組件很相似,方法和屬性也類(lèi)似,只是有一小部分屬性不支持。
XMLHttpRequest的應用：
XMLHttpRequest對象在JS中的應用
var xmlhttp = new XMLHttpRequest();
微軟的XMLHTTP組件在JS中的應用
var xmlhttp = new ActiveXObject(Microsoft.XMLHTTP);
var xmlhttp = new ActiveXObject(Msxml2.XMLHTTP);
XMLHttpRequest 對象方法
/**
* Cross-browser XMLHttpRequest instantiation.
*/
if (typeof XMLHttpRequest == ‘undefined‘) {
XMLHttpRequest = function () {
var msxmls = [‘MSXML3‘, ‘MSXML2‘, ‘Microsoft‘]
for (var i=0; i < msxmls.length; i++) {
try {
return new ActiveXObject(msxmls[i]+‘.XMLHTTP‘)
} catch (e) { }
}
throw new Error("No XML component installed!")
}
}
function createXMLHttpRequest() {
try {
// Attempt to create it "the Mozilla way"
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
// Guess not - now the IE way
if (window.ActiveXObject) {
return new ActiveXObject(getXMLPrefix() + ".XmlHttp");
}
}
catch (ex) {}
return false;
};
XMLHttpRequest 對象方法
| 方法 | 描述 |
| abort() | 停止當前請求 |
| getAllResponseHeaders() | 作為字符串返問(wèn)完整的headers |
| getResponseHeader("headerLabel") | 作為字符串返問(wèn)單個(gè)的header標簽 |
| open("method","URL"[,asyncFlag[,"userName"[, "password"]]]) | 設置未決的請求的目標 URL, 方法, 和其他參數 |
| send(content) | 發(fā)送請求 |
| setRequestHeader("label", "value") | 設置header并和請求一起發(fā)送 |
XMLHttpRequest 對象屬性
| 屬性 | 描述 |
| onreadystatechange | 狀態(tài)改變的事件觸發(fā)器 |
| readyState | 對象狀態(tài)(integer):
0 = 未初始化
1 = 讀取中
2 = 已讀取
3 = 交互中
4 = 完成 |
| responseText | 服務(wù)器進(jìn)程返回數據的文本版本 |
| responseXML | 服務(wù)器進(jìn)程返回數據的兼容DOM的XML文檔對象 |
| status | 服務(wù)器返回的狀態(tài)碼, 如：404 = "文件末找到" 、200 ="成功" |
| statusText | 服務(wù)器返回的狀態(tài)文本信息 |
2、JavaScript JavaScript是一在瀏覽器中大量使用的編程語(yǔ)言，，他以前一直被貶低為一門(mén)糟糕的語(yǔ)言（他確實(shí)在使用上比較枯燥），以在常被用來(lái)作一些用來(lái)炫耀的小玩意和惡作劇或是單調瑣碎的表單驗證。但事實(shí)是，他是一門(mén)真正的編程語(yǔ)言，有著(zhù)自已的標準并在各種瀏覽器中被廣泛支持。
3、DOM Document Object Model。
DOM是給 HTML 和 XML 文件使用的一組 API。它提供了文件的結構表述，讓你可以改變其中的內容及可見(jiàn)物。其本質(zhì)是建立網(wǎng)頁(yè)與 Script 或程序語(yǔ)言溝通的橋梁。
所有WEB開(kāi)發(fā)人員可操作及建立文件的屬性、方法及事件都以對象來(lái)展現（例如，document 就代表“文件本身“這個(gè)對像，table 對象則代表 HTML 的表格對象等等）。這些對象可以由當今大多數的瀏覽器以 Script 來(lái)取用。
一個(gè)用HTML或XHTML構建的網(wǎng)頁(yè)也可以看作是一組結構化的數據，這些數據被封在DOM（Document Object Model）中，DOM提供了網(wǎng)頁(yè)中各個(gè)對象的讀寫(xiě)的支持。
4、XML 可擴展的標記語(yǔ)言（Extensible Markup Language）具有一種開(kāi)放的、可擴展的、可自描述的語(yǔ)言結構，它已經(jīng)成為網(wǎng)上數據和文檔傳輸的標準。它是用來(lái)描述數據結構的一種語(yǔ)言，就正如他的名字一樣。他使對某些結構化數據的定義更加容易，并且可以通過(guò)他和其他應用程序交換數據。
5、綜合 Jesse James Garrett提到的Ajax引擎，實(shí)際上是一個(gè)比較復雜的JavaScript應用程序，用來(lái)處理用戶(hù)請求，讀寫(xiě)服務(wù)器和更改DOM內容。
JavaScript的Ajax引擎讀取信息，并且互動(dòng)地重寫(xiě)DOM，這使網(wǎng)頁(yè)能無(wú)縫化重構，也就是在頁(yè)面已經(jīng)下載完畢后改變頁(yè)面內容，這是我們一直在通過(guò)JavaScript和DOM在廣泛使用的方法，但要使網(wǎng)頁(yè)真正動(dòng)態(tài)起來(lái)，不僅要內部的互動(dòng)，還需要從外部獲取數據，在以前，我們是讓用戶(hù)來(lái)輸入數據并通過(guò)DOM來(lái)改變網(wǎng)頁(yè)內容的，但現在，XMLHTTPRequest，可以讓我們在不重載頁(yè)面的情況下讀寫(xiě)服務(wù)器上的數據，使用戶(hù)的輸入達到最少。
基于XML的網(wǎng)絡(luò )通訊也并不是新事物，實(shí)際上FLASH和JAVA Applet都有不錯的表現，現在這種富交互在網(wǎng)頁(yè)上也可用了，基于標準化的并被廣泛支持和技術(shù)，并且不需要插件或下載小程序。
Ajax是傳統WEB應用程序的一個(gè)轉變。以前是服務(wù)器每次生成HTML頁(yè)面并返回給客戶(hù)端（瀏覽器）。在大多數網(wǎng)站中，很多頁(yè)面中至少90%都是一樣的，比如：結構、格式、頁(yè)頭、頁(yè)尾、廣告等，所不同的只是一小部分的內容，但每次服務(wù)器都會(huì )生成所有的頁(yè)面再返回給客戶(hù)端，這無(wú)形之中是一種浪費，不管是對于用戶(hù)的時(shí)間、帶寬、CPU耗用，還是對于ISP的高價(jià)租用的帶寬和空間來(lái)說(shuō)。如果按一頁(yè)來(lái)算，只能幾K或是幾十K可能并不起眼，但像SINA每天要生成幾百萬(wàn)個(gè)頁(yè)面的大ISP來(lái)說(shuō)，可以說(shuō)是損失巨大的。而AJAX可以所為客戶(hù)端和服務(wù)器的中間層，來(lái)處理客戶(hù)端的請求，并根據需要向服務(wù)器端發(fā)送請求，用什么就取什么、用多少就取多少，就不會(huì )有數據的冗余和浪費，減少了數據下載總量，而且更新頁(yè)面時(shí)不用重載全部?jì)热?，只更新需要更新的那部分即可，相對于純后臺處理并重載的方式縮短了用戶(hù)等待時(shí)間，也把對資源的浪費降到最低，基于標準化的并被廣泛支持和技術(shù)，并且不需要插件或下載小程序，所以Ajax對于用戶(hù)和ISP來(lái)說(shuō)是雙盈的。
Ajax使WEB中的界面與應用分離（也可以說(shuō)是數據與呈現分離），而在以前兩者是沒(méi)有清晰的界限的，數據與呈現分離的分離，有利于分工合作、減少非技術(shù)人員對頁(yè)面的修改造成的WEB應用程序錯誤、提高效率、也更加適用于現在的發(fā)布系統。也可以把以前的一些服務(wù)器負擔的工作轉嫁到客戶(hù)端，利于客戶(hù)端閑置的處理能力來(lái)處理。
Ajax理念的出現，揭開(kāi)了無(wú)刷新更新頁(yè)面時(shí)代的序幕，并有代替傳統web開(kāi)發(fā)中采用form(表單)遞交方式更新web頁(yè)面的趨勢，可以算是一個(gè)里程碑。但Ajax都不是適用于所有地方的，它的適用范圍是由它的特性所決定的。
舉個(gè)應用的例子，是關(guān)于級聯(lián)菜單方面的Ajax應用。
我們以前的對級聯(lián)菜單的處理是這樣的：
為了避免每次對菜單的操作引起的重載頁(yè)面，不采用每次調用后臺的方式，而是一次性將級聯(lián)菜單的所有數據全部讀取出來(lái)并寫(xiě)入數組，然后根據用戶(hù)的操作用JavaScript來(lái)控制它的子集項目的呈現，這樣雖然解決了操作響應速度、不重載頁(yè)面以及避免向服務(wù)器頻繁發(fā)送請求的問(wèn)題，但是如果用戶(hù)不對菜單進(jìn)行操作或只對菜單中的一部分進(jìn)行操作的話(huà)，那讀取的數據中的一部分就會(huì )成為冗余數據而浪費用戶(hù)的資源，特別是在菜單結構復雜、數據量大的情況下（比如菜單有很多級、每一級菜又有上百個(gè)項目），這種弊端就更為突出。
如果在此案中應用Ajax后，結果就會(huì )有所改觀(guān)：
在初始化頁(yè)面時(shí)我們只讀出它的第一級的所有數據并顯示，在用戶(hù)操作一級菜單其中一項時(shí)，會(huì )通過(guò)Ajax向后臺請求當前一級項目所屬的二級子菜單的所有數據，如果再繼續請求已經(jīng)呈現的二級菜單中的一項時(shí)，再向后面請求所操作二級菜單項對應的所有三級菜單的所有數據，以此類(lèi)推……這樣，用什么就取什么、用多少就取多少，就不會(huì )有數據的冗余和浪費，減少了數據下載總量，而且更新頁(yè)面時(shí)不用重載全部?jì)热?，只更新需要更新的那部分即可，相對于后臺處理并重載的方式縮短了用戶(hù)等待時(shí)間，也把對資源的浪費降到最低。
此外，Ajax由于可以調用外部數據，也可以實(shí)現數據聚合的功能（當然要有相應授權），比如微軟剛剛在3月15日發(fā)布的在線(xiàn)RSS閱讀器BETA版；還可以利于一些開(kāi)放的數據，開(kāi)發(fā)自已的一些應用程序，比如用Amazon的數據作的一些新穎的圖書(shū)搜索應用。
總之，Ajax適用于交互較多，頻繁讀數據，數據分類(lèi)良好的WEB應用。
1、減輕服務(wù)器的負擔。因為Ajax的根本理念是“按需取數據”，所以最大可能在減少了冗余請求和響影對服務(wù)器造成的負擔； 2、無(wú)刷新更新頁(yè)面，減少用戶(hù)實(shí)際和心理等待時(shí)間； 首先，“按需取數據”的模式減少了數據的實(shí)際讀取量，打個(gè)很形象的比方，如果說(shuō)重載的方式是從一個(gè)終點(diǎn)回到原點(diǎn)再到另一個(gè)終點(diǎn)的話(huà)，那么Ajax就是以一個(gè)終點(diǎn)為基點(diǎn)到達另一個(gè)終點(diǎn)；
其次，即使要讀取比較大的數據，也不用像RELOAD一樣出現白屏的情況，由于A(yíng)jax是用XMLHTTP發(fā)送請求得到服務(wù)端應答數據，在不重新載入整個(gè)頁(yè)面的情況下用Javascript操作DOM最終更新頁(yè)面的，所以在讀取數據的過(guò)程中，用戶(hù)所面對的也不是白屏，而是原來(lái)的頁(yè)面狀態(tài)（或者可以加一個(gè)LOADING的提示框讓用戶(hù)了解數據讀取的狀態(tài)），只有當接收到全部數據后才更新相應部分的內容，而這種更新也是瞬間的，用戶(hù)幾乎感覺(jué)不到?？傊脩?hù)是很敏感的，他們能感覺(jué)到你對他們的體貼，雖然不太可能立竿見(jiàn)影的效果，但會(huì )在用戶(hù)的心中一點(diǎn)一滴的積累他們對網(wǎng)站的依賴(lài)。
3、更好的用戶(hù)體驗； 4、也可以把以前的一些服務(wù)器負擔的工作轉嫁到客戶(hù)端，利于客戶(hù)端閑置的處理能力來(lái)處理，減輕服務(wù)器和帶寬的負擔，節約空間和帶寬租用成本； 5、Ajax由于可以調用外部數據； 6、基于標準化的并被廣泛支持和技術(shù)，并且不需要插件或下載小程序； 7、Ajax使WEB中的界面與應用分離（也可以說(shuō)是數據與呈現分離）； 8、對于用戶(hù)和ISP來(lái)說(shuō)是雙盈的。 更好的Ajax應用，需要更多的客戶(hù)端的開(kāi)發(fā)，和對當前的WEB應用理念的思考，而且良好的用戶(hù)體驗，來(lái)源于為處處用戶(hù)考慮的理念，而不單純是某種技術(shù)。
