目前的Web應用開發基本上都是圍繞富互連網應用（Rich Internet Application，RIA）展開。RIA的實現技術有很多種：Ajax、Flash、JavaFX和Sliverlight等。Ajax技術的優點在於它是構建在開放標準之上，不存在廠商鎖定的問題；同時也不需要額外的瀏覽器外掛程式支援。Ajax應用對搜尋引擎也比較友好。對開發人員來說，Ajax所需技術的學習曲線也較平滑，容易上手。本文簡要介紹了Ajax應用開發的各個方面以及相關的最佳實務，但對一些細節內容沒有展開討論。
Ajax簡介Ajax 技術的出發點在於改變傳統Web應用使用時的“操作-等待頁面載入-操作”的使用者互動模式。這種互動模式會打斷使用者正常的使用流程，降低使用者的工作效率。Ajax技術的互動模式是“操作-操作-操作”。使用者並不需要顯式地等待頁面重新載入完成，而是可以不斷地與頁面進行互動。頁面上的某個局部會動態重新整理來給使用者提供反饋。整個互動過程更加平滑和順暢。這是Ajax技術得以流行的一個重要原因。
Ajax構建於一系列標準技術之上，包括HTML、JavaScript和CSS等。在這些技術中，HTML是作為應用的骨架而存在的，展示給使用者最基本的內容。CSS則為HTML表示的內容提供易於使用者閱讀的樣式。JavaScript則為應用添加豐富的互動行為，為使用者提供良好的使用體驗。
Ajax技術的出現使得應用中一部分的邏輯從伺服器端遷移到了瀏覽器端。瀏覽器的作用從簡單的渲染頁面和表單處理，上升到了處理一部分商務邏輯。
一般來說有兩種類型的Ajax應用風格，一種是僅少量使用Ajax技術來適當增強使用者體驗（Ajax Lite），另外一種則是大量使用Ajax技術來達到與案頭應用相似的使用者體驗（Ajax Deluxe），提供諸如滑鼠右鍵、拖拽和串聯功能表等。開發人員應該根據應用的特徵選用合適的風格。
瀏覽器安全色性開發Ajax應用的時候要面對的一個重要問題就是瀏覽器安全色性。雖然Ajax技術基於HTML、JavaScript和CSS等標準技術，但是不同的瀏覽器廠商對於這些標準的實現程度有著很大的差別。同一瀏覽器的不同版本之間也會有一些不同。新版本可能會修複舊版本上的問題，也可能會帶來新的問題。不過總體的趨勢是瀏覽器的實現越來越向標準靠攏。
解決瀏覽器安全色性的第一步是確定應用要支援的瀏覽器種類和版本。這個決策取決於應用的目標使用者和特定的應用需求。對於一般的通用Ajax應用來說，可以按照瀏覽器的市場份額和支援某種瀏覽器所需的代價來確定。雅虎提出的分級式瀏覽器支援（Graded Browser Support）是一個很好的參照，從其中給出的A級瀏覽器開始是一個不錯的選擇。從特定的應用需求來說，某些使用了ActiveX控制項的Ajax應用就只能在IE上運行；而開發針對iPhone的應用則只需要考慮移動版WebKit就可以了。
就 Ajax應用的三個組成部分來說，HTML的相容性問題比較少，畢竟目前主流的HTML 4.01規範已經有10年的曆史了；在JavaScript方面，JavaScript語言核心部分基本上沒什麼問題，而文件物件模型（DOM）和瀏覽器物件模型（BOM）部分的相容性問題相對較多，這主要是因為瀏覽器長生對規範的支援程度不同以及各自添加了私人實現。使用一個流行的JavaScript庫就可以解決這些問題；CSS方面的相容性目前是問題最多的，而且沒有比較好的庫的支援。在下面會著重介紹CSS的相容性問題。
富含語義的HTMLHTML 語言本身上手比較簡單，只是一些元素的集合，只需要瞭解這些元素及其屬性的含義即可。這些元素既有與文檔結構相關和富含語義的元素，也有與頁面的展示相關的元素。一個好的實踐是只使用與文檔結構相關和富含語義的元素。從HTML語言規範的曆史也可以看到這個趨勢。HTML語言規範的曆史比較長。在HTML最初的草案和HTML 2.0中，HTML只包含描述文檔結構的元素。在HTML 3.2中，很多與展示相關的元素被引入進來。HTML 4.01規範試圖解決這個問題，許多與展示相關的元素被標記為廢棄的，不推薦使用。HTML 5更進一步，引入了更多的富含語義的元素，同時移除了一些在HTML 4.01中被廢棄的元素。應用這種實踐進一步劃分清楚了HTML和CSS在Ajax應用中的職責。
編寫HTML文檔的時候首先需要選用合適的文件類型聲明（DTD）。目前來說最合適的HTML 4.01過渡型，即<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">。在編寫HTML文檔的時候，需要使用合適的元素。HTML規範中的一些元素，如<em>、<strong>、<abbr>、<blockquote>、<cite> 和<code>等，對開發人員來說比較陌生。但是這些元素富含語義，有適合它們使用的情境。如果使用的是<div> 和<span>等通用元素，需要使用富含語義的class屬性來增加語義，說明元素的作用。在HTML文檔編寫完成之後，最好使用W3C提供的HTML文檔驗證器來驗證文檔。
CSSCSS的文法非常簡單，包含的元素也非常少，其中最主要的是樣式規則集。樣式規則集是一系列樣式聲明規則的集合。每個樣式規則由選取器和聲明兩部分組成。選取器用來選擇文檔中的元素。這些元素將被應用上與選取器對應的樣式聲明。CSS不同版本規範所支援的選取器類型不同，盡量使用常用並且簡單的選取器以獲得更好的瀏覽器安全色性，如ID選取器、class選取器和元素選取器。
使用CSS的時候會遇到的一個很大的問題是瀏覽器安全色性。經常會遇到的情況是某種樣式在A和C瀏覽器上應用正常，而在B瀏覽器上則使用不正常。等到把B瀏覽器調好了之後，卻發現C瀏覽器上顯示出現錯誤。解決這個問題的基本原則是要首先確定幾個基準的瀏覽器和開發基本的配置樣式表。基準瀏覽器一般是所要支援的瀏覽器中對CSS規範支援較好的瀏覽器。基本的配置樣式表保證在基準瀏覽器上應用的頁面配置是正確的。目前的瀏覽器在CSS頁面配置這一塊的相容性最差，尤其在盒模型（box model）、浮動定位等方面。而在顯示樣式，如字型大小和顏色等方面，則基本上沒有什麼問題。
接下來要做的是讓基本的配置樣式表在除基準瀏覽器外的其它瀏覽器上正確工作。這個時候就需要對某種版本的瀏覽器來應用特殊的樣式，從而修正樣式上的不一致。一種做法是利用一些招數（hack）。招數是利用瀏覽器本身對CSS規範支援的不完善或是實現上的bug來識別瀏覽器並應用樣式。另外一種做法是通過JavaScript來檢測當前瀏覽器並應用樣式。招數可能會隨著瀏覽器的版本更新而變得不可用，因此盡量少使用。
在一般Ajax應用，最常被應用招數的是IE 6。因為IE 6對CSS規範支援不完善，而且存在比較多的bug，但是IE 6的使用者目前還是數量眾多，還是有支援的必要。對IE瀏覽器應用特殊樣式的更好做法是使用IE專屬的條件注釋。
當應用所包含的CSS檔案比較多的時候，開發和維護這些CSS檔案就成為一件比較困難的事情。一個解決辦法是把物件導向的思想引入到CSS的編寫過程中。兩種重要的原則是組件化和單一職責。組件化的做法是開發出針對頁面上某類元素的樣式組件。這些樣式組件可以在不同的頁面中任意組合使用。單一職責指的是把表示結構和外觀的樣式分開。與結構相關的樣式包括大小和位置，外觀的樣式包括字型大小、顏色和背景圖片等。
DOM查詢與操作DOM 操作是Ajax應用中頁面動態和局部重新整理的實現基礎。DOM定義了文檔的邏輯結構，以及對文檔進行訪問和操作的方式。通過DOM，開發人員可以在文檔中自由導航，也可以添加、更新和刪除其中的元素和內容。通過DOM規範提供的API就可以完成對文檔的查詢與操作。不過DOM的原生API使用起來比較繁瑣，最好使用JavaScript庫來完成查詢和操作。
通過DOM操作對當前頁面進行修改一般都是通過響應使用者的事件而發生的。這些DOM操作中一部分是純瀏覽器端實現的，另外一部分則需要伺服器端的支援。伺服器端可以選擇返回資料或HTML片段。返回資料的好處是傳輸的資料量小，易於與第三方應用整合。不足之處在於瀏覽器端需要額外的操作來完成展示。瀏覽器端可以使用DOM操作或是模板技術來產生HTML片段。伺服器端也可以通過JSP和Apache Velocity等模板技術來產生HTML片段，並直接返回給瀏覽器。瀏覽器只需要直接使用即可。這種做法的好處是瀏覽器端實現簡單。不足之處在於與展示相關的邏輯同時存在於伺服器端和瀏覽器端，不容易維護。
有一些比較好的實踐可以提高DOM操作的效能。首先是使用文檔片段（document fragment）。當需要插入大量節點的時候，首先把這些節點添加到一個文檔片段中，再把此文檔片段添加到文檔上。這樣可以減少頁面的重新排列。其次是使用innerHTML來更新文檔內容，速度比使用DOM API要快。最後是通過cloneNode()來建立多個結構相同的元素。
事件處理Ajax 應用與使用者的互動是通過響應使用者事件的方式來完成的。瀏覽器負責捕獲使用者的行為併產生各種不同的事件，應用處理這些事件。瀏覽器中可以產生的事件種類比較多。事件產生之後，會按照一定的過程在當前文檔樹中傳播。事件所產生的節點稱為目標節點。完整的事件傳播流程是從文檔的根節點開始向下傳播到目標節點（捕獲階段），然後再往上傳播回根節點（冒泡階段）。當事件傳播到某個節點上的時候，就會觸發此節點上綁定的處理方法。（IE只支援冒泡階段。）需要注意的是事件處理方法中this所指向的對象的值，有可能是當前節點或是window對象。通過JavaScript庫提供的支援來綁定事件處理方法，可以避免這些不一致。
在綁定事件處理方法的時候，可以利用事件的傳播機制來減少事件監聽器的數量。如當需要為一系列<li>元素添加滑鼠點擊的事件時，可以把該事件添加到其父節點<ul>上。在完成對事件的處理之後，可以終止事件的傳播，還可以阻止瀏覽器的預設行為。
選用合適的JavaScript架構目前存在非常多的JavaScript架構，有開源的也有商業的。比較流行的有jQuery、Dojo、YUI、ExtJs、MooTools和Prototype等。選用流行架構的好處是有比較大的社區支援，遇到問題的時候容易獲得協助。流行架構的文檔和樣本也比較豐富。使用不同的架構會給應用帶來不同的實現風格。jQuery的使用者對方法的級聯情有獨鐘，Dojo的愛好者則傾向於把頁面上的不同部分劃分成dijit來實現。
選用什麼樣的架構的因素很多，技術的和非技術的都有。一般來說，輕量級的架構，如jQuery和Prototype，上手比較容易，但是可複用的組件較少；而比較龐大的架構，如Dojo和ExtJs，則學習曲線較陡，但是可複用的組件非常多，適合快速開發複雜的Ajax應用。
構建過程Ajax應用也需要一個完整的構建過程。構建過程的主要目的是提高Ajax應用的品質和效能。這個構建過程可以包含的步驟有：
Ajax 應用的測試包含伺服器端和瀏覽器端兩部分。對於伺服器端來說，測試的技術和工具都已經比較成熟。只需要根據伺服器端採用的技術來進行選擇即可。一個比較重要的原則是伺服器端和瀏覽器端盡量實行鬆散耦合，以方便測試。從這個角度出發，伺服器端返回資料，而不是HTML片段是更好的做法。可以通過工具來測試伺服器端返回的結果是否正確。
瀏覽器端的測試目前情況不是非常理想。已經有一些單元測試的架構，如QUnit, Dojo D.O.H等，也存在一些整合測試的工具，如DOH robot和Selenium等。就單元測試來說，目前對僅用JavaScript實現的純邏輯代碼較容易實現，而對於包含了與頁面上節點互動的代碼則較難實現。不管是單元測試還是整合測試，目前自動化程度都不是很高。
為了便於測試，Ajax應用中各部分之間的耦合應儘可能的小。事件處理方法的方法體應儘可能的簡單。
調試Ajax 應用的調試一直是一個比較麻煩的問題，其主要原因是不同瀏覽器之間存在著各種各樣的相容性問題，同一瀏覽器的不同版本之間也會存在很多不同。為了在所支援的瀏覽器上達到一致的效果，開發人員往往費勁了周折。目前的情況要好了不少，不同的瀏覽器都有了自己比較好用的調試工具，如Firefox上的 Firebug，IE上的developer toolbar等。當出現問題的時候，可以通過這些工具來直接修改頁面上的DOM結構和CSS樣式來進行實驗。找到正確的解法之後再用代碼來實現。很多工具都支援直接在控制台輸入JavaScript語句來執行，通過這種方式可以快速的查看程式中變數的值以及調用JavaScript方法來改變應用的內部狀態，從而發現問題的原因。
記憶體泄露Web應用記憶體泄露的問題一直存在，Ajax應用的出現把這個問題進一步暴露出來。目前很多的Ajax應用都是單頁面應用（Single-page Application，SPA）。使用者通常會在單個頁面上使用比較長的時間而不關閉瀏覽器。在使用者操作過程中產生的一些小的記憶體泄露會累積起來，導致瀏覽器佔用記憶體不斷增加，應用運行起來越來越緩慢。
面對記憶體泄露問題，一般來說需要注意下面幾點：
Ajax 的出現並沒有解決存在的一些安全問題，同時也帶來了一些新的安全隱患。傳統Web應用中存在的跨網站指令碼攻擊（XSS）、SQL注入和跨網站請求偽造（CSRF）等安全問題在Ajax應用中仍然需要解決。對於XSS來說，一般的解決辦法是不信任使用者的任何輸入。輸出的時候對所有的東西進行轉義（escape）。只對那些明確知道是安全的（白名單）的東西恢複轉義（unescape）。對於CSRF的解決辦法是對所有的請求添加一個驗證令牌，用來確保請求是來自於自己的網站。
Ajax 帶來的新的安全隱患主要與JSON有關。一部分Ajax應用的伺服器端暴露JSON格式的資料。JSONP允許通過<script>標籤來擷取資料，而不受瀏覽器同源策略（Same -origin Policy）的影響。不過JSONP可能造成資料被惡意的第三方竊取。攻擊者還可能通過重定義JavaScript對象方法（如Array）的方式來竊取資料。
效能Ajax應用的效能是一個非常重要的方面，應該在應用開始開發的第一天就把效能這個因素考慮進來，並貫穿整個開發過程。如果在開發後期才考慮效能的話，就可能與陷入一個兩難的境地。一方面應用的效能達不到使用者的要求，造成使用者的抱怨和流失；另一個方面為了提升效能就需要對應用已有的架構做出非常大甚至是顛覆性的調整。
Ajax應用效能的決定因素在前端。簡單來說有下面幾條基本的原則：
Google的Steve Souders在前端效能這一領域做了很多開創性的工作。他寫的兩本書《高效能網站》和《更快速網站》都是非常好的總結性材料，值得深入研讀。
簡歷
成富，目前任職於IBM中國開發中心，參與IBM產品的開發工作。對前端開發和Dojo架構有著比較豐富的經驗。對新興的Web 2.0技術也有比較濃厚的興趣。他的個人網站是http://www.cheng-fu.com。
參考資料
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
