基于XML的異步JavaScript，簡稱AJAX，是當前Web創新(稱為Web2.0)中的一個王冠。感謝組成AJAX的各種技術，Web應用的交互如Flickr, Backpack和Google在這方面已經有質的飛躍。這個術語源自描述從基于網頁的Web應用到基于數據的應用的轉換。在基于數據的應用中，用戶需求的數據如聯系人列表，可以從獨立于實際網頁的服務端取得并且可以被動態地寫入網頁中，給緩慢的Web應用體驗著色使之像桌面應用一樣。

　　雖然大部分開發人員在過去使用過XMLHttp或者使用Iframe來加載數據，但僅到現在我們才看到傳統的開發人員和公司開始采用這些技術。就像新的編程語言或模型伴隨著更多的痛苦，開發人員需要學習新的技巧及如何最好利用這些新技術。這篇文章講述了開發人員使用AJAX枰褂玫墓ぞ吆圖際酢?lt;br />

　　AJAX模式

　　許多重要的技術和AJAX開發模式可以從現有的知識中獲取。例如，在一個發送請求到服務端的應用中，必須包含請求順序、優先級、超時響應、錯誤處理及回調，其中許多元素已經在Web服務中包含了，就像現在的SOA。AJAX開發人員擁有一個完整的系統架構知識。同時，隨著技術的成熟還會有許多地方需要改進，特別是UI部分的易用性。

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

　　綜合各種變化的技術和強耦合的客戶服務端環境，AJAX提出了一種新的開發方式。AJAX開發人員必須理解傳統的MVC架構，這限制了應用層次之間的邊界。同時，開發人員還需要考慮CS環境的外部和使用AJAX技術來重定型MVC邊界。最重要的是，AJAX開發人員必須禁止以頁面集合的方式來考慮Web應用而需要將其認為是單個頁面。一旦UI設計與服務架構之間的范圍被嚴格區分開來后，開發人員就需要更新和變化的技術集合了。

　　時刻想著用戶

　　AJAX的最大機遇在于用戶體驗。在使應用更快響應和創新的過程中，定義Web應用的規則正在被重寫;因此開發人員必須更注重用戶?，F在用戶已經逐漸習慣如何使用Web應用了。例如用戶通常希望每一次按鈕點擊會導致幾秒的延遲和屏幕刷新，但AJAX正在打破這種長時間的狀況。因此用戶需要重新體驗按鈕點擊的響應了。

　　可用性是AJAX另人激動的地方而且已經產生了幾種新穎的技術。其中最引人注目的是一種稱為“黃色隱出”的技術，他在數據更新之前時將用戶界面變為黃色，更新完成后立刻恢復原來的顏色。AJAX開發人員將用戶從Web應用的負載中解放出來;小心地利用AJAX提供的豐富接口，不久桌面開發人員會發現AJAX是他們的方向。

　　幾種工具和技術

　　隨著AJAX迅速地引人注目起來，我想開發人員對這種技術的期待也迅速地增加。就像任何新技術，AJAX的興旺也需要一整個開發工具/編程語言及相關技術系統來支撐。

　　JavaScript

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

　　XMLHttpRequest

　　XMLHttpRequest對象在大部分瀏覽器上已經實現而且擁有一個簡單的接口允許數據從客戶端傳遞到服務端，但并不會打斷用戶當前的操作。使用XMLHttpRequest傳送的數據可以是任何格式，雖然從名字上建議是XML格式的數據。

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

　　CSS

　　為了正確的瀏覽AJAX應用，CSS是一種AJAX開發人員所需要的重要武器。CSS提供了從內容中分離應用樣式和設計的機制。雖然CSS在AJAX應用中扮演至關重要的角色，但他也是構建創建跨瀏覽器應用的一大阻礙，因為不同的瀏覽器廠商支持各種不同的CSS級別。

　　服務器端

　　但不像在客戶端，在服務端AJAX應用還是使用建立在如Java,.Net和PHP語言基礎上機制;并沒有改變這個領域中的主要方式。

　　既然如此，我們對Ruby on Rails框架的興趣也就迅速增加了。在一年多前，Ruby on Rails已經吸引了大量開發人員基于其強大功能來構建Web和AJAX應用。雖然目前還有很多快速應用開發工具存在，Ruby on Rails看起來已經儲備了簡化構建AJAX應用的能力。

　　開發工具

　　在實際構建AJAX應用中，你需要的不只是文本編輯器。既然是JavaScript非編譯的，他可以容易地編寫和運行在瀏覽器中;然而，許多工具提供了有用的擴展如語法高亮和智能完成。

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

　　另一個JavaScript和AJAX開發中的問題是調試困難。不同的瀏覽器提供不同的通常是隱藏的運行時錯誤信息，而JavaScript的缺陷如雙重變量賦值(通常是由于缺少數據類型)使得調試更加困難。在AJAX的開發中，調試就更復雜了，因為其需要標識究竟是客戶端還是服務端產生的錯誤。在過去，JavaScript調試的方法是刪除所有代碼然后一行行的增加直到錯誤出現?，F在，更多開發人員回到為IE準備的Microsoft Script Debugger和為Mozilla瀏覽器準備的Venkman。

　　瀏覽器兼容性

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

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

　　展望

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

　　總的來說，AJAX開發人員必須盡快地跟進最新的技術并利用高產的工具集。成功的AJAX開發人員還需要留心他們的使用者以避免將任何問題擴大化。并且AJAX開發人員還需要持續地創新來創建增強Web應用易用性的新方法。

　　作者

　　Dave Johnson是加拿大Vancouver一家軟件咨詢公司eBusiness Applications創始人和傳道者，擁有七年以上的XML相關工作經驗。

　　Resources

　　? AJAX開發人員的編譯模式:http://www.ajaxpatterns.org

　　? XMLHttpRequest教程：“動態網頁接口”:http://www.xml.com/pub/a/2005/02/09/xml-http-request.html

　　? JavaScript性能基準:http://blogs.ebusiness-apps.com/dave/?p=14

　　? AJAX資源:http://www.ajaxmatters.com

　　? JavaScript規范:http://www.ecma-international.org/publications/standards/Ecma-262.htm

　　? 介紹JavaScript對象標識:http://www.crockford.com/JSON/index.html

　　? Mozilla 的Venkman JavaScript調試器:http://www.mozilla.org/projects/venkman/

　　? XML DOM參考:http://msdn.microsoft.com/library/default.asp?url=/library/en-us/

　　xmlsdk/html/e9da2722-7879-4e48-869c-7f16714e2824.asp

　　? Microsoft Dynamic HTML reference: http://msdn.microsoft.com/library/default.asp?url=/

　　workshop/author/dhtml/reference/dhtml_reference_entry.asp

　　? Gecko DOM Reference: http://www.mozilla.org/docs/dom/domref/

　　? "“移植IE應用到Mozilla”

　　http://www-128.ibm.com/developerworks/web/library/wa-ie2mozgd/

　　? Mozilla XUL reference:

　　http://www.xulplanet.com/

　　? Microsoft XAML reference:

　　http://windowssdk.msdn.microsoft.com/library/default.asp?url=/library/

　　en-us/wcp_conceptual/html/0ff5f36e-dd84-44d1-aa3e-5bb4f147b169.asp?frame=true

　　? James Jesses Garret introduced the term AJAX in his article "AJAX: A New Approach to Web Applications," (Adaptive Path, February 2005): “AJAX：新的網頁應用開發方式”

　　http://www.adaptivepath.com/publications/essays/archives/000385.php

　　? JetBrains IntelliJ IDEA:

　　http://www.jetbrains.com/

　　? Microsoft Visual Studio:

　　http://msdn.microsoft.com/vstudio/

　　? JSEditor:

　　http://jseditor.sourceforge.net/

　　? JSEclipse:

　　http://www.interaktonline.com/Products/Eclipse/JSEclipse/Overview/

　　? ActiveState Komodo:

　　http://www.activestate.com/Products/Komodo/

　　? XHTML:

　　http://www.w3.org/TR/xhtml1/

　　? Document Object Model:

　　http://www.w3.org/DOM/

　　? Cascading Style Sheets:

　　http://www.w3.org/Style/CSS/

　　? Extensible Stylesheet Language:

　　http://www.w3.org/Style/XSL/

　　? XForms:

　　http://www.w3.org/MarkUp/Forms/

　　? Scaling Vector Graphics:

　　http://www.w3.org/Graphics/SVG/

　　? XPath:

　　http://www.w3.org/TR/xpath

　　? AJAX.Net:

　　http://ajax.schwarz-interactive.de/csharpsample/default.aspx

　　? Backbase:

　　http://www.backbase.com

　　? Bitkraft:

　　http://www.tiggrbitz.com/

　　? Django:

　　http://www.djangoproject.com/

　　? Dojo:

　　http://www.dojotoolkit.org/

　　? DWR (Direct Web Reporting):

　　http://getahead.ltd.uk/dwr/

　　? MochiKit:

　　http://mochikit.com/

　　? Prototype:

　　http://prototype.conio.net/

　　? Rico:

　　http://openrico.org/rico/home.page

　　? Sajax:

　　http://www.modernmethod.com/sajax/

　　? Sarissa:

　　http://sarissa.sourceforge.net/doc/

　　? Script.aculo.us:

　　http://script.aculo.us/

　　? Ruby on Rails:

　　http://www.rubyonrails.org/

　　? For more on AJAX and DWR, read "AJAX Made Simple with DWR," Cloves Carneiro Jr. (JavaWorld, June 2005): 關于AJAX和DWR，請閱讀“AJAX使用DWR更簡單”

　　http://www.javaworld.com/javaworld/jw-06-2005/jw-0620-dwr.html

　　? For more articles on Java development tools, browse the Development Tools section of JavaWorld's Topical Index: 更多Java開發工具的文章，請瀏覽JavaWorld的開發工具部分索引頁

　　http://www.javaworld.com/channel_content/jw-tools-index.shtml

　　? For more articles on XML, browse the Java and XML section of JavaWorld's Topical Index: 更多XML的文章，請瀏覽JavaWorld的Java和XML部分索引頁

　　http://www.javaworld.com/channel_content/jw-xml-index.shtml

　　? For more articles on UI design, browse the User Interface Design section of JavaWorld's Topical Index: 更多UI設計的文章，請瀏覽JavaWorld的UI設計部分索引頁

　　http://www.javaworld.com/channel_content/jw-ui-index.shtml