通過五個Ajax最佳實踐編寫更強壯的代碼
本文所介紹的5個***實踐，可以應用到Web應用程序Ajax開發工作中：
一、最小化調用
二、讓數據變小
三、預加載組件
四、輕松實現錯誤處理
五、使用現有工具
這些***實踐，有助于開發者編寫更加健壯的JavaScript代碼，并使您的Ajax代碼執行的更快，這可以給用戶帶來益處。
Ajax概述
Ajax用于描述存在已久的技術：JavaScript代碼、XML、以及能夠通過HTTP進行異步調用的對象。Ajax常用于避免提交并重新加載整個網頁，特別是在用戶執行的動作不需要重新加載整個網頁時。
在過去幾年中，支持Ajax的站點在不斷的完善，作為此類站點的開發工具，Ajax的應用也越來越廣泛。使用本文的實踐通過Ajax和JavaScript來構建更優的Web應用程序。
最小化調用
聽起來可能很明顯，但使用Ajax技術提高Web應用程序性能，惟一能做的就是最小化的調用數量。
最小化調用數量的方法之一是將大量調用合并成少量調用。如果數據量相對小（見“讓數據變小”），那么在大多數網絡中，主要問題就在于延遲。延遲是瀏覽器真正獲取服務器與服務的連接所需的時間，有時它會占去大部分連接時間。用戶所感受到的總延遲由幾個部分組成，包括瀏覽器的緩存設置、DNS客戶端、以及物理連接。
沒有簡易公式或代碼片段供閱讀來了解如何減小Web應用程序調用。然而，只需一個簡單的練習，就可以演示如何對從客戶端到服務器的Ajax調用數量進行控制。考慮購買二手摩托車的Web應用程序（見圖1）。
圖1.搜索二手摩托車的示例Web頁面
首先，用戶選擇摩托車的年份。然后，用戶選擇摩托車的構造。***用戶選擇摩托車的型號。從始至終，Ajax一直在后臺運行，更新Web應用程序中的下拉框來為用戶過濾清單，以方便用戶選擇。
要開始這一練習，首先要為客戶端及服務器創建一個簡單圖表（有一個文本框）。然后為瀏覽器進行的Ajax調用畫線，來從服務器獲取用戶數據，如圖2所示。
圖2.繪制Ajax調用
可通過將對品牌和型號進行的調用合并到一個調用中，來優化設計。不是對品牌進行一次調用，然后針對型號進行另一次調用，而是對型號進行緩存，這樣，當用戶選擇品牌時，新代碼只檢索緩存中可用的型號列表。從本地緩存中獲取數據要比從服務獲取相同數據快得多。回避額外的服務調用，開發人員就可以避免服務調用的延遲。新的通信情況如圖3所示。
圖3.合并獲取品牌調用與獲取型號調用后的Ajax調用
到目前為止，新設計在瀏覽器與服務器之間的通信中去掉了一個調用。可利用清單1中的代碼進一步減少調用數量，其中的一些關鍵行可用于存儲在數組中檢索到的數據，供以后查找使用。
清單1.在緩存中存儲本地數據
var choices = new Array(); function fillChoiceBoxes(year) { // see resources for links to dojo toolkit... if (dojo.indexOf(choices, year) == -1) { // go get the } else { // make the ajax call and fill the choices. choices[year] = result; // result of ajax call. } // calling a function to fill the values... fillSelect(dojo.byId('makes'), choices[year]); }
如果用戶在反復考慮兩個不同的型號，Web應用程序會使用本地緩存數據，而不是發起附加服務調用。僅緩存靜態數據——至少是在用戶會話持續階段。不要因為緩存了不應緩存的數據，而引起一系列問題。
正如本例所展示的，可通過減少客戶端與服務器之間的交互次數，以及在可能的情況下緩存數據，來最小化調用。
讓數組變得很小
為提高數據處理性能，需要讓服務器與客戶端之間出傳輸的數據盡量的小。為高效地完成這一任務，必須已經控制了從服務層，到能夠指定從服務到客戶端的消息類型的部分。
有充足的理由證明，XML適合作為客戶端到服務器的通用消息格式。理由之一是存在足夠多的庫或者框架，來用于XML序列化。
然而，當與JavaScript Serialized Object Notation（JSON）對比時，XML顯得很冗長，而前者更加簡明。目前已經有很多可以將消息方便地構建成JSON格式的庫，這樣就可以通過JSON的方式將數據從服務端傳送的客戶端。
很多客戶端庫，比如Dojo Toolkit，允許定義服務所采用的傳輸格式。如果服務響應使用JSON，可通過提供一個參數來使用相同的客戶端對象。
仔細研究一下清單2中的代碼，其展示了使用XML的摩托車對象的表示。
清單2.使用XML的摩托車數據
<motorcycle> <year>2010</year> <make>Motocool</make> <model>Uberfast</model> </motorcycle>
現在來看一下清單3，其展示了使用JSON的相同數據。注意，它的代碼量減少了大約25%（如果去掉空格）。
清單3.使用JSON的摩托車數據
{ "motorcycle" : { "year" : "2010", "make" : "Motocool", "model" : "Uberfast" } }
由于數據量變小了，不僅減少了從服務端到客戶端的傳輸時間，而且，由于字符串的減小還節省了解析時間。
在設計需要傳輸的數據時，其所包含的字符越少越好。
預加載組件
可通過在Ajax調用中加載JavaScript文件與圖像之類的組件，來充分利用瀏覽器的緩存。需要注意的是，預加載JavaScript文件和圖像，僅對那些開啟緩存功能的用戶有益，不過大多數用戶的瀏覽器都開啟了緩存功能。
想要預加載外部JavaScript文件，將JavaScript文件包面中，但是，只有當該頁面很小而且僅想優化少量資源時，才適合采用這一方式。例如，當有一個將工作流引入用戶的相對輕量級的頁面時，預加載非常有用。考慮最小化調用部分中購買摩托車的例子。可在流的早期頁面中預加載用于包含下拉框的頁面的、包含全部Ajax代碼的JavaScript代碼。
如果要用Ajax調用的方法更新圖片，預加載圖像會提供很大方便。預加載圖像后，當用戶將鼠標移動到元素時、從下拉框中進行選擇時、或者單擊按鈕時，不必等待瀏覽器對圖像進行檢索。即使Ajax以異步方式發生，也需要花費一些時間將圖像從服務器傳送到客戶端，并且在圖像全部下載完畢之前，它不會在客戶端中顯示。
在清單4所展示的例子中，用戶進行從清單中選擇摩托車這一操作時，所采用的圖像就是使用標準JavaScript代碼預加載的。
<html> <head><title>Preload example</title></head><body> <!-- web page... --> <scripttype="text/javascript"language="javascript"> var img = new Image(); img.src = "http://path/to/motocool.jpg"; </script> </body> </html>
為頁面預加載圖像時，JavaScript的位置很重要。開發人員一定不希望因為在HTML中加入了JavaScript代碼而影響頁面的加載速度。一般的規則是，可將<script>元素當中的JavaScript代碼放到HTML頁面的***部分，因為在考慮可同時下載多少資源時，瀏覽器的能力就相對有限了。如果可能，將腳本加到HTML頁面的***部分，來幫助瀏覽器更快速加載圖像和其他資源。
在HTML5中，可使用<script>標記的新async屬性。這將告訴瀏覽器異步運行JavaScript代碼，這樣，它可以在頁面中運行其他東西時執行。
輕松處理錯誤
在JavaScript代碼中定義的每個函數，都要假設會有惡意輸入發生，因為，防御性能強的代碼比使用try... catch語句所編寫的代碼更善于處理錯誤。例如，如果想使用JavaScript函數來根據用戶輸入進行計算，在計算前檢查輸入，如清單5所示。
清單5.檢查用戶輸入
function caculateDistance(source,dest) { if (! isNaN(source) || ! isNan(dest)) { dojo.byId("errors").innerHTML = "Please provide a valid number."; } }
即使代碼具有防御能力，在適當時候，也可使用try... catch語句與錯誤回調。清單6演示了在JavaScript代碼中使用try... catch語句來捕獲錯誤。
清單6.使用try... catch語句來處理錯誤
function calculateDistance(source,dest) { try { // do some calculations... } catch (error) { dojo.byId("errors").innerHTML = "An error occurred while adding the numbers"; } }
清單7演示了在調用Dojo Toolkit中所提供的xhrGet()方法時，對錯誤回調的使用。錯誤參數是可選的，因此可以很容易地跳過錯誤處理器的定義。
清單7.使用具有xhrGet()的錯誤回調
var args = { url: "/moin_static185/js/dojo/trunk/dojo/../dojo/NoSuchFile", handleAs: "text", preventCache: true, load: function(data) { // do something when successful... }, error: function(error) { dojo.byId("errors").innerHTML = "An error occurred while getting the data.."; } } var ajx = dojo.xhrGet(args);
如何處理頁面上的錯誤，這既是個業務問題，也是個技術問題。要詢問客戶，在出現問題時，想讓用戶看到什么消息，因為任何展示給用戶的消息，都會對業務造成影響。適當時，客戶能夠幫助提供在出現異常時有效的默認處理方式。
***，不要象清單8中那樣，在JavaScript提示對話框中顯示錯誤描述。您的用戶不是軟件工程師，因此，這類提示信息對于用戶來說沒有任何意義。除了不要為用戶提供無意義的信息之外，提示對話框應當要求客戶取消該對話框，來返回Web頁面。
清單8.在錯誤處理中避免JavaScript提示對話框
function calculateDistance(source,dest) { try { // do some calculations... } catch (error) { // Bad: // alert(error.message); // Better: dojo.byId("errors").innerHTML = "An error occurred while calculating data..."; } }
使用現有工具
***，作為***實踐之一，要盡量避免Not Invented Here（NIH）綜合癥。通過使用現有工具（框架與平臺），可有效利用其資源。大多數成熟的技術人員，會使用已在多個平臺上測試過，并具有跨瀏覽器兼容性的工具。現有工具的大部分特性可用于部署到自己的項目中。
很多現有的優秀工具，除了能提供Ajax調用之外，還能支持很多其他函數與特性，比如動畫。表1中列出了其中一些工具。
表1.為Ajax調用提供方法的JavaScript工具
結束語
在Web應用程序中使用Ajax，可為用戶提供整潔的Web應用程序界面。Ajax已對整個HTML頁面的傳遞提供了一些優化，然而，通過了解本文中描述的***實踐，可幫助您構建更加優化的Ajax應用程序。
作者簡介：
Nathan A. Good居住在明尼蘇達州的雙子城。他的專長是軟件開發、軟件架構和系統管理。平時不編寫軟件時，他喜歡組裝PC和服務器、閱讀和撰寫技術文章，并鼓勵他的所有朋友轉用開源軟件。他是許多書籍和文章的作者或合著者，包括Professional Red Hat Enterprise Linux 3, Regular Expression Recipes: A Problem-Solution Approach和Foundations of PEAR: Rapid PHP Development。
