AJAX介紹及技術(shù)

　　AJAX介紹

　　國內(nèi)通常的讀音為“阿賈克斯”和阿賈克斯足球隊(duì)讀音一樣。Web應(yīng)用的交互如Flickr, Backpack和Google在這方面已經(jīng)有質(zhì)的飛躍。這個(gè)術(shù)語源自描述從基于網(wǎng)頁的Web應(yīng)用到基于數(shù)據(jù)的應(yīng)用的轉(zhuǎn)換。在基于數(shù)據(jù)的應(yīng)用中，用戶需求的數(shù)據(jù)如聯(lián)系人列表，可以從獨(dú)立于實(shí)際網(wǎng)頁的服務(wù)端取得并且可以被動(dòng)態(tài)地寫入網(wǎng)頁中，給緩慢的Web應(yīng)用體驗(yàn)著色使之像桌面應(yīng)用一樣。 雖然大部分開發(fā)人員在過去使用過XMLHttp或者使用Iframe來加載數(shù)據(jù)，但僅到現(xiàn)在我們才看到傳統(tǒng)的開發(fā)人員和公司開始采用這些技術(shù)。就像新的編程語言或模型伴隨著更多的痛苦，開發(fā)人員需要學(xué)習(xí)新的技巧及如何最好利用這些新技術(shù)。

　　AJAX模式

　　許多重要的技術(shù)和AJAX開發(fā)模式可以從現(xiàn)有的知識(shí)中獲取。例如，在一個(gè)發(fā)送請(qǐng)求到服務(wù)端的應(yīng)用中，必須包含請(qǐng)求順序、優(yōu)先級(jí)、超時(shí)響應(yīng)、錯(cuò)誤處理及回調(diào)，其中許多元素已經(jīng)在Web服務(wù)中包含了，就像現(xiàn)在的SOA。AJAX開發(fā)人員擁有一個(gè)完整的系統(tǒng)架構(gòu)知識(shí)。同時(shí)，隨著技術(shù)的成熟還會(huì)有許多地方需要改進(jìn)，特別是UI部分的易用性。

　　AJAX開發(fā)與傳統(tǒng)的CS開發(fā)有很大的不同。這些不同引入了新的編程問題，最大的問題在于易用性。由于AJAX依賴瀏覽器的JavaScript和XML，瀏覽器的兼容性和支持的標(biāo)準(zhǔn)也變得和JavaScript的運(yùn)行時(shí)性能一樣重要了。這些問題中的大部分來源于瀏覽器、服務(wù)器和技術(shù)的組合，因此必須理解如何才能最好的使用這些技術(shù)。

　　綜合各種變化的技術(shù)和強(qiáng)耦合的客戶服務(wù)端環(huán)境，AJAX提出了一種新的開發(fā)方式。AJAX開發(fā)人員必須理解傳統(tǒng)的MVC架構(gòu)，這限制了應(yīng)用層次之間的邊界。同時(shí)，開發(fā)人員還需要考慮CS環(huán)境的外部和使用AJAX技術(shù)來重定型MVC邊界。最重要的是，AJAX開發(fā)人員必須禁止以頁面集合的方式來考慮Web應(yīng)用而需要將其認(rèn)為是單個(gè)頁面。一旦UI設(shè)計(jì)與服務(wù)架構(gòu)之間的范圍被嚴(yán)格區(qū)分開來后，開發(fā)人員就需要更新和變化的技術(shù)集合了。

　　時(shí)刻想著用戶

　　AJAX的最大機(jī)遇在于用戶體驗(yàn)。在使應(yīng)用更快響應(yīng)和創(chuàng)新的過程中，定義Web應(yīng)用的規(guī)則正在被重寫;因此開發(fā)人員必須更注重用戶?，F(xiàn)在用戶已經(jīng)逐漸習(xí)慣如何使用Web應(yīng)用了。例如用戶通常希望每一次按鈕點(diǎn)擊會(huì)導(dǎo)致幾秒的延遲和屏幕刷新，但AJAX正在打破這種長(zhǎng)時(shí)間的狀況。因此用戶需要重新體驗(yàn)按鈕點(diǎn)擊的響應(yīng)了。

　　可用性是AJAX令人激動(dòng)的地方而且已經(jīng)產(chǎn)生了幾種新穎的技術(shù)。其中最引人注目的是一種稱為“黃色隱出”的技術(shù)，它在數(shù)據(jù)更新之前時(shí)將用戶界面變?yōu)辄S色，更新完成后立刻恢復(fù)原來的顏色。AJAX開發(fā)人員將用戶從Web應(yīng)用的負(fù)載中解放出來;小心地利用AJAX提供的豐富接口，不久桌面開發(fā)人員會(huì)發(fā)現(xiàn)AJAX是他們的方向。

　　幾種工具和技術(shù)

　　隨著AJAX迅速地引人注目起來，我想開發(fā)人員對(duì)這種技術(shù)的期待也迅速地增加。就像任何新技術(shù)，AJAX的興旺也需要一整個(gè)開發(fā)工具/編程語言及相關(guān)技術(shù)系統(tǒng)來支撐。

　　JavaScript

　　如名字所示，AJAX的概念中最重要而最易被忽視的是它也是一種JavaScript編程語言。JavaScript是一種粘合劑使AJAX應(yīng)用的各部分集成在一起。在大部分時(shí)間，JavaScript通常被服務(wù)端開發(fā)人員認(rèn)為是一種企業(yè)級(jí)應(yīng)用不需要使用的東西應(yīng)該盡力避免。這種觀點(diǎn)來自以前編寫JavaScript代碼的經(jīng)歷：繁雜而又易出錯(cuò)的語言。類似的，它也被認(rèn)為將應(yīng)用邏輯任意地散布在服務(wù)端和客戶端中，這使得問題很難被發(fā)現(xiàn)而且代碼很難重用。在AJAX中JavaScript主要被用來傳遞用戶界面上的數(shù)據(jù)到服務(wù)端并返回結(jié)果。XMLHttpRequest對(duì)象用來響應(yīng)通過HTTP傳遞的數(shù)據(jù)，一旦數(shù)據(jù)返回到客戶端就可以立刻使用DOM將數(shù)據(jù)放到網(wǎng)面上。

　　XMLHttpRequest

　　XMLHttpRequest對(duì)象在大部分瀏覽器上已經(jīng)實(shí)現(xiàn)而且擁有一個(gè)簡(jiǎn)單的接口允許數(shù)據(jù)從客戶端傳遞到服務(wù)端，但并不會(huì)打斷用戶當(dāng)前的操作。使用XMLHttpRequest傳送的數(shù)據(jù)可以是任何格式，雖然從名字上建議是XML格式的數(shù)據(jù)。

　　開發(fā)人員應(yīng)該已經(jīng)熟悉了許多其他XML相關(guān)的技術(shù)。XPath可以訪問XML文檔中的數(shù)據(jù)，但理解XML DOM是必須的。類似的，XSLT是最簡(jiǎn)單而快速的從XML數(shù)據(jù)生成HTML或XML的方式。許多開發(fā)人員已經(jīng)熟悉Xpath和XSLT，因此AJAX選擇XML作為數(shù)據(jù)交換格式是有意義的。XSLT可以被用在客戶端和服務(wù)端，它能夠減少大量的用JavaScript編寫的應(yīng)用邏輯。

　　CSS

　　為了正確的瀏覽AJAX應(yīng)用，CSS是一種AJAX開發(fā)人員所需要的重要武器。CSS提供了從內(nèi)容中分離應(yīng)用樣式和設(shè)計(jì)的機(jī)制。雖然CSS在AJAX應(yīng)用中扮演至關(guān)重要的角色，但它也是構(gòu)建跨瀏覽器應(yīng)用的一大阻礙，因?yàn)椴煌臑g覽器廠商支持各種不同的CSS級(jí)別。

　　服務(wù)器端

　　但不像在客戶端，在服務(wù)端AJAX應(yīng)用還是使用建立在如Java,.Net和PHP語言基礎(chǔ)上機(jī)制;并沒有改變這個(gè)領(lǐng)域中的主要方式。

　　既然如此，我們對(duì)Ruby o n Rails框架的興趣也就迅速增加了。在一年多前，Ruby o n Rails已經(jīng)吸引了大量開發(fā)人員基于其強(qiáng)大功能來構(gòu)建Web和AJAX應(yīng)用。雖然目前還有很多快速應(yīng)用開發(fā)工具存在，Ruby o n Rails看起來已經(jīng)儲(chǔ)備了簡(jiǎn)化構(gòu)建AJAX應(yīng)用的能力。

　　開發(fā)工具

　　在實(shí)際構(gòu)建AJAX應(yīng)用中，你需要的不只是文本編輯器。既然JavaScript是非編譯的，它可以容易地編寫和運(yùn)行在瀏覽器中。然而，許多工具提供了有用的擴(kuò)展如語法高亮和智能完成。

　　不同的IDE提供了對(duì)JavaScript支持的不同等級(jí)。來自JetBrains的IntelliJ IDEA是一個(gè)用來JavaScript開發(fā)的更好的IDE，雖然許多開發(fā)人員也喜歡Microsoft’s Visual Studio產(chǎn)品(允諾會(huì)在最新的版本中改善對(duì)AJAX的支持)。Eclipse包含了兩個(gè)免費(fèi)的JavaScript編輯器插件和一個(gè)商業(yè)的來自ActiveStat的Komodo IDE。

　　另一個(gè)JavaScript和AJAX開發(fā)中的問題是調(diào)試?yán)щy。不同的瀏覽器提供不同的通常是隱藏的運(yùn)行時(shí)錯(cuò)誤信息，而JavaScript的缺陷如雙重變量賦值(通常是由于缺少數(shù)據(jù)類型)使得調(diào)試更加困難。在AJAX的開發(fā)中，調(diào)試就更復(fù)雜了，因?yàn)槠湫枰獦?biāo)識(shí)究竟是客戶端還是服務(wù)端產(chǎn)生的錯(cuò)誤。在過去，JavaScript調(diào)試的方法是刪除所有代碼然后一行行的增加直到錯(cuò)誤出現(xiàn)。現(xiàn)在，更多開發(fā)人員回到為IE準(zhǔn)備的Microsoft Script Debugger和為Mozilla瀏覽器準(zhǔn)備的Venkman。

　　瀏覽器兼容性

　　JavaScript編程的最大問題來自不同的瀏覽器對(duì)各種技術(shù)和標(biāo)準(zhǔn)的支持。構(gòu)建一個(gè)運(yùn)行在不同瀏覽器(如IE和火狐)是一個(gè)困難的任務(wù)。因此幾種AJAX JavaScript框架或者生成基于服務(wù)端邏輯或標(biāo)記庫的JavaScript，或者提供符合跨瀏覽器AJAX開發(fā)的客戶端JavaScript庫。一些流行的框架包括:AJAX.Net, Backbase, Bitkraft, Django, DOJO, DWR, MochiKit, Prototype, Rico, Sajax, Sarissa, and Script.aculo.us.

　　這些框架給開發(fā)人員更多的空間使得他們不需要擔(dān)心跨瀏覽器的問題。雖然這些框架提升了開發(fā)人員構(gòu)建應(yīng)用的能力，但由于廠商已經(jīng)開發(fā)了更細(xì)節(jié)的用戶界面的打包組件解決方案，因此在AJAX組件市場(chǎng)中需要考慮一些其他因素。例如提供通用用戶界面的組件如組合框和數(shù)據(jù)柵格的幾個(gè)廠商，都可以被用來在應(yīng)用中創(chuàng)建良好的通過類似電子數(shù)據(jù)表方式來查看和編輯數(shù)據(jù)的體驗(yàn)。但這些組件不僅是封裝了組件的用戶界面而且包括與服務(wù)端數(shù)據(jù)的通訊方式，這些組件通常使用基于標(biāo)記方式來實(shí)現(xiàn)如ASP.Net或JSF控件。

　　展望

　　最近IE和火狐之間的瀏覽器之爭(zhēng)變得火熱起來，因此AJAX開發(fā)人員需要足夠敏捷的作出反應(yīng)。關(guān)鍵點(diǎn)在一些問題如CSS或XML，雖然各種瀏覽器形成采用最新標(biāo)準(zhǔn)的不同陣營(如Mozilla擁抱SVG和E4X標(biāo)準(zhǔn)及在最新火狐BETA版本中使用XUL，而微軟使用自己的XAML技術(shù))。所有這些技術(shù)代表當(dāng)前AJAX主流JavaScript和XML的市場(chǎng)方向改變。

　　總的來說，AJAX開發(fā)人員必須盡快地跟進(jìn)最新的技術(shù)并利用高產(chǎn)的工具集。成功的AJAX開發(fā)人員還需要留心他們的使用者以避免將任何問題擴(kuò)大化。并且AJAX開發(fā)人員還需要持續(xù)地創(chuàng)新來創(chuàng)建增強(qiáng)Web應(yīng)用易用性的新方法。

　　主要包含了以下幾種技術(shù)

　　Ajax(Asynchronous JavaScript + XML)的定義

　　基于web標(biāo)準(zhǔn)(standards-based presentation)XHTML+CSS的表示;

　　使用 DOM(Document Object Model)進(jìn)行動(dòng)態(tài)顯示及交互;

　　使用 XML 和 XSLT 進(jìn)行數(shù)據(jù)交換及相關(guān)操作;

　　使用 XMLHttpRequest 進(jìn)行異步數(shù)據(jù)查詢、檢索;

　　使用 JavaScript 將所有的東西綁定在一起。英文參見Ajax的提出者Jesse James Garrett的原文,原文題目(Ajax: A New Approach to Web Applications)。

　　類似于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)。這些瀏覽器目前包括：Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式對(duì)象，也不支持XSLT。

　　發(fā)展史

　　該技術(shù)在1998年前后得到了應(yīng)用。允許客戶端腳本發(fā)送HTTP請(qǐng)求(XMLHTTP)的第一個(gè)組件由Outlook Web Access小組寫成。該組件原屬于微軟Exchange Server，并且迅速地成為了Internet Explorer 4.0的一部分。部分觀察家認(rèn)為，Outlook Web Access是第一個(gè)應(yīng)用了Ajax技術(shù)的成功的商業(yè)應(yīng)用程序，并成為包括Oddpost的網(wǎng)絡(luò)郵件產(chǎn)品在內(nèi)的許多產(chǎn)品的領(lǐng)頭羊。但是，2005年初，許多事件使得Ajax被大眾所接受。Google在它著名的交互應(yīng)用程序中使用了異步通訊，如Google討論組、Google地圖、Google搜索建議、Gmail等。Ajax這個(gè)詞由《Ajax: A New Approach to Web Applications》一文所創(chuàng)，該文的迅速流傳提高了人們使用該項(xiàng)技術(shù)的意識(shí)。另外，對(duì)Mozilla/Gecko的支持使得該技術(shù)走向成熟，變得更為易用。

　　AJAX前景非常樂觀，可以提高系統(tǒng)性能，優(yōu)化用戶界面。AJAX現(xiàn)有直接框架AjaxPro，可以引入AjaxPro.2.dll文件，可以直接在前臺(tái)頁面JS調(diào)用后臺(tái)頁面的方法。但此框架與FORM驗(yàn)證有沖突。另微軟也引入了AJAX組件，需要添加AjaxControlToolkit.dll文件，可以在控件列表中出現(xiàn)相關(guān)控件。

　　優(yōu)點(diǎn)和缺點(diǎn)

　　傳統(tǒng)的web應(yīng)用允許用戶填寫表單(form)，當(dāng)提交表單時(shí)就向web服務(wù)器發(fā)送一個(gè)請(qǐng)求。服務(wù)器接收并處理傳來的表單，然後返回一個(gè)新的網(wǎng)頁。這個(gè)做法浪費(fèi)了許多帶寬，因?yàn)樵谇搬醿蓚€(gè)頁面中的大部分HTML代碼往往是相同的。由于每次應(yīng)用的交互都需要向服務(wù)器發(fā)送請(qǐng)求，應(yīng)用的響應(yīng)時(shí)間就依賴于服務(wù)器的響應(yīng)時(shí)間。這導(dǎo)致了用戶界面的響應(yīng)比本地應(yīng)用慢得多。

　　與此不同，AJAX應(yīng)用可以僅向服務(wù)器發(fā)送并取回必需的數(shù)據(jù)，它使用SOAP或其它一些基于XML的web service接口，并在客戶端采用JavaScript處理來自服務(wù)器的響應(yīng)。因?yàn)樵诜?wù)器和瀏覽器之間交換的數(shù)據(jù)大量減少，結(jié)果我們就能看到響應(yīng)更快的應(yīng)用。同時(shí)很多的處理工作可以在發(fā)出請(qǐng)求的客戶端機(jī)器上完成，所以Web服務(wù)器的處理時(shí)間也減少了。

　　使用Ajax的最大優(yōu)點(diǎn)，就是能在不更新整個(gè)頁面的前提下維護(hù)數(shù)據(jù)。這使得Web應(yīng)用程序更為迅捷地回應(yīng)用戶動(dòng)作，并避免了在網(wǎng)絡(luò)上發(fā)送那些沒有改變過的信息。

　　Ajax不需要任何瀏覽器插件，但需要用戶允許JavaScript在瀏覽器上執(zhí)行。就像DHTML應(yīng)用程序那樣，Ajax應(yīng)用程序必須在眾多不同的瀏覽器和平臺(tái)上經(jīng)過嚴(yán)格的測(cè)試。隨著Ajax的成熟，一些簡(jiǎn)化Ajax使用方法的程序庫也相繼問世。同樣，也出現(xiàn)了另一種輔助程序設(shè)計(jì)的技術(shù)，為那些不支持JavaScript的用戶提供替代功能。

　　對(duì)應(yīng)用Ajax最主要的批評(píng)就是，它可能破壞瀏覽器后退按鈕的正常行為。在動(dòng)態(tài)更新頁面的情況下，用戶無法回到前一個(gè)頁面狀態(tài)，這是因?yàn)闉g覽器僅能記下歷史記錄中的靜態(tài)頁面。一個(gè)被完整讀入的頁面與一個(gè)已經(jīng)被動(dòng)態(tài)修改過的頁面之間的差別非常微妙;用戶通常都希望單擊后退按鈕，就能夠取消他們的前一次操作，但是在Ajax應(yīng)用程序中，卻無法這樣做。不過開發(fā)者已想出了種種辦法來解決這個(gè)問題，當(dāng)中大多數(shù)都是在用戶單擊后退按鈕訪問歷史記錄時(shí)，通過建立或使用一個(gè)隱藏的IFRAME來重現(xiàn)頁面上的變更。(例如，當(dāng)用戶在Google Maps中單擊后退時(shí)，它在一個(gè)隱藏的IFRAME中進(jìn)行搜索，然后將搜索結(jié)果反映到Ajax元素上，以便將應(yīng)用程序狀態(tài)恢復(fù)到當(dāng)時(shí)的狀態(tài)。)

　　一個(gè)相關(guān)的觀點(diǎn)認(rèn)為，使用動(dòng)態(tài)頁面更新使得用戶難于將某個(gè)特定的狀態(tài)保存到收藏夾中。該問題的解決方案也已出現(xiàn)，大部分都使用URL片斷標(biāo)識(shí)符(通常被稱為錨點(diǎn)，即URL中#后面的部分)來保持跟蹤，允許用戶回到指定的某個(gè)應(yīng)用程序狀態(tài)。(許多瀏覽器允許JavaScript動(dòng)態(tài)更新錨點(diǎn)，這使得Ajax應(yīng)用程序能夠在更新顯示內(nèi)容的同時(shí)更新錨點(diǎn)。)這些解決方案也同時(shí)解決了許多關(guān)于不支持后退按鈕的爭(zhēng)論。

　　進(jìn)行Ajax開發(fā)時(shí)，網(wǎng)絡(luò)延遲——即用戶發(fā)出請(qǐng)求到服務(wù)器發(fā)出響應(yīng)之間的間隔——需要慎重考慮。不給予用戶明確的回應(yīng) ，沒有恰當(dāng)?shù)念A(yù)讀數(shù)據(jù) ，或者對(duì)XMLHttpRequest的不恰當(dāng)處理，都會(huì)使用戶感到延遲，這是用戶不欲看到的，也是他們無法理解的。通常的解決方案是，使用一個(gè)可視化的組件來告訴用戶系統(tǒng)正在進(jìn)行后臺(tái)操作并且正在讀取數(shù)據(jù)和內(nèi)容。

　　一些手持設(shè)備(如手機(jī)、PDA等)現(xiàn)在還不能很好的支持Ajax;

　　用JavaScript作的Ajax引擎，JavaScript的兼容性和DeBug都是讓人頭痛的事;

　　Ajax的無刷新重載，由于頁面的變化沒有刷新重載那么明顯，所以容易給用戶帶來困擾――用戶不太清楚現(xiàn)在的數(shù)據(jù)是新的還是已經(jīng)更新過的;現(xiàn)有的解決有：在相關(guān)位置提示、數(shù)據(jù)更新的區(qū)域設(shè)計(jì)得比較明顯、數(shù)據(jù)更新后給用戶提示等;

　　對(duì)串流媒體的支持沒有FLASH、Java Applet好;