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