本文所介紹的5個(gè)***實(shí)踐，可以應(yīng)用到Web應(yīng)用程序Ajax開(kāi)發(fā)工作中：

　　一、最小化調(diào)用

　　二、讓數(shù)據(jù)變小

　　三、預(yù)加載組件

　　四、輕松實(shí)現(xiàn)錯(cuò)誤處理

　　五、使用現(xiàn)有工具

　　這些***實(shí)踐，有助于開(kāi)發(fā)者編寫(xiě)更加健壯的JavaScript代碼，并使您的Ajax代碼執(zhí)行的更快，這可以給用戶帶來(lái)益處。

　　Ajax概述

　　Ajax用于描述存在已久的技術(shù)：JavaScript代碼、XML、以及能夠通過(guò)HTTP進(jìn)行異步調(diào)用的對(duì)象。Ajax常用于避免提交并重新加載整個(gè)網(wǎng)頁(yè)，特別是在用戶執(zhí)行的動(dòng)作不需要重新加載整個(gè)網(wǎng)頁(yè)時(shí)。

　　在過(guò)去幾年中，支持Ajax的站點(diǎn)在不斷的完善，作為此類(lèi)站點(diǎn)的開(kāi)發(fā)工具，Ajax的應(yīng)用也越來(lái)越廣泛。使用本文的實(shí)踐通過(guò)Ajax和JavaScript來(lái)構(gòu)建更優(yōu)的Web應(yīng)用程序。

　　最小化調(diào)用

　　聽(tīng)起來(lái)可能很明顯，但使用Ajax技術(shù)提高Web應(yīng)用程序性能，惟一能做的就是最小化的調(diào)用數(shù)量。

　　最小化調(diào)用數(shù)量的方法之一是將大量調(diào)用合并成少量調(diào)用。如果數(shù)據(jù)量相對(duì)?。ㄒ?jiàn)“讓數(shù)據(jù)變小”），那么在大多數(shù)網(wǎng)絡(luò)中，主要問(wèn)題就在于延遲。延遲是瀏覽器真正獲取服務(wù)器與服務(wù)的連接所需的時(shí)間，有時(shí)它會(huì)占去大部分連接時(shí)間。用戶所感受到的總延遲由幾個(gè)部分組成，包括瀏覽器的緩存設(shè)置、DNS客戶端、以及物理連接。

　　沒(méi)有簡(jiǎn)易公式或代碼片段供閱讀來(lái)了解如何減小Web應(yīng)用程序調(diào)用。然而，只需一個(gè)簡(jiǎn)單的練習(xí)，就可以演示如何對(duì)從客戶端到服務(wù)器的Ajax調(diào)用數(shù)量進(jìn)行控制?？紤]購(gòu)買(mǎi)二手摩托車(chē)的Web應(yīng)用程序（見(jiàn)圖1）。

　　圖1.搜索二手摩托車(chē)的示例Web頁(yè)面

　　首先，用戶選擇摩托車(chē)的年份。然后，用戶選擇摩托車(chē)的構(gòu)造。***用戶選擇摩托車(chē)的型號(hào)。從始至終，Ajax一直在后臺(tái)運(yùn)行，更新Web應(yīng)用程序中的下拉框來(lái)為用戶過(guò)濾清單，以方便用戶選擇。

　　要開(kāi)始這一練習(xí)，首先要為客戶端及服務(wù)器創(chuàng)建一個(gè)簡(jiǎn)單圖表（有一個(gè)文本框）。然后為瀏覽器進(jìn)行的Ajax調(diào)用畫(huà)線，來(lái)從服務(wù)器獲取用戶數(shù)據(jù)，如圖2所示。

　　圖2.繪制Ajax調(diào)用

　　可通過(guò)將對(duì)品牌和型號(hào)進(jìn)行的調(diào)用合并到一個(gè)調(diào)用中，來(lái)優(yōu)化設(shè)計(jì)。不是對(duì)品牌進(jìn)行一次調(diào)用，然后針對(duì)型號(hào)進(jìn)行另一次調(diào)用，而是對(duì)型號(hào)進(jìn)行緩存，這樣，當(dāng)用戶選擇品牌時(shí)，新代碼只檢索緩存中可用的型號(hào)列表。從本地緩存中獲取數(shù)據(jù)要比從服務(wù)獲取相同數(shù)據(jù)快得多?；乇茴~外的服務(wù)調(diào)用，開(kāi)發(fā)人員就可以避免服務(wù)調(diào)用的延遲。新的通信情況如圖3所示。

　　圖3.合并獲取品牌調(diào)用與獲取型號(hào)調(diào)用后的Ajax調(diào)用

　　到目前為止，新設(shè)計(jì)在瀏覽器與服務(wù)器之間的通信中去掉了一個(gè)調(diào)用?？衫们鍐?中的代碼進(jìn)一步減少調(diào)用數(shù)量，其中的一些關(guān)鍵行可用于存儲(chǔ)在數(shù)組中檢索到的數(shù)據(jù)，供以后查找使用。

　　清單1.在緩存中存儲(chǔ)本地?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è)不同的型號(hào)，Web應(yīng)用程序會(huì)使用本地緩存數(shù)據(jù)，而不是發(fā)起附加服務(wù)調(diào)用。僅緩存靜態(tài)數(shù)據(jù)——至少是在用戶會(huì)話持續(xù)階段。不要因?yàn)榫彺媪瞬粦?yīng)緩存的數(shù)據(jù)，而引起一系列問(wèn)題。

　　正如本例所展示的，可通過(guò)減少客戶端與服務(wù)器之間的交互次數(shù)，以及在可能的情況下緩存數(shù)據(jù)，來(lái)最小化調(diào)用。

　　讓數(shù)組變得很小

　　為提高數(shù)據(jù)處理性能，需要讓服務(wù)器與客戶端之間出傳輸?shù)臄?shù)據(jù)盡量的小。為高效地完成這一任務(wù)，必須已經(jīng)控制了從服務(wù)層，到能夠指定從服務(wù)到客戶端的消息類(lèi)型的部分。

　　有充足的理由證明，XML適合作為客戶端到服務(wù)器的通用消息格式。理由之一是存在足夠多的庫(kù)或者框架，來(lái)用于XML序列化。

　　然而，當(dāng)與JavaScript Serialized Object Notation（JSON）對(duì)比時(shí)，XML顯得很冗長(zhǎng)，而前者更加簡(jiǎn)明。目前已經(jīng)有很多可以將消息方便地構(gòu)建成JSON格式的庫(kù)，這樣就可以通過(guò)JSON的方式將數(shù)據(jù)從服務(wù)端傳送的客戶端。

　　很多客戶端庫(kù)，比如Dojo Toolkit，允許定義服務(wù)所采用的傳輸格式。如果服務(wù)響應(yīng)使用JSON，可通過(guò)提供一個(gè)參數(shù)來(lái)使用相同的客戶端對(duì)象。

　　仔細(xì)研究一下清單2中的代碼，其展示了使用XML的摩托車(chē)對(duì)象的表示。

　　清單2.使用XML的摩托車(chē)數(shù)據(jù)

<motorcycle>　 <year>2010</year>　 <make>Motocool</make>　 <model>Uberfast</model> </motorcycle>

　　現(xiàn)在來(lái)看一下清單3，其展示了使用JSON的相同數(shù)據(jù)。注意，它的代碼量減少了大約25%（如果去掉空格）。

　　清單3.使用JSON的摩托車(chē)數(shù)據(jù)

{　 "motorcycle" : {　　　 "year" : "2010",　　　 "make" : "Motocool",　　　 "model" : "Uberfast"　　　}　}

　　由于數(shù)據(jù)量變小了，不僅減少了從服務(wù)端到客戶端的傳輸時(shí)間，而且，由于字符串的減小還節(jié)省了解析時(shí)間。

　　在設(shè)計(jì)需要傳輸?shù)臄?shù)據(jù)時(shí)，其所包含的字符越少越好。

　　預(yù)加載組件

　　可通過(guò)在Ajax調(diào)用中加載JavaScript文件與圖像之類(lèi)的組件，來(lái)充分利用瀏覽器的緩存。需要注意的是，預(yù)加載JavaScript文件和圖像，僅對(duì)那些開(kāi)啟緩存功能的用戶有益，不過(guò)大多數(shù)用戶的瀏覽器都開(kāi)啟了緩存功能。

　　想要預(yù)加載外部JavaScript文件，將JavaScript文件包面中，但是，只有當(dāng)該頁(yè)面很小而且僅想優(yōu)化少量資源時(shí)，才適合采用這一方式。例如，當(dāng)有一個(gè)將工作流引入用戶的相對(duì)輕量級(jí)的頁(yè)面時(shí)，預(yù)加載非常有用?？紤]最小化調(diào)用部分中購(gòu)買(mǎi)摩托車(chē)的例子?？稍诹鞯脑缙陧?yè)面中預(yù)加載用于包含下拉框的頁(yè)面的、包含全部Ajax代碼的JavaScript代碼。

　　如果要用Ajax調(diào)用的方法更新圖片，預(yù)加載圖像會(huì)提供很大方便。預(yù)加載圖像后，當(dāng)用戶將鼠標(biāo)移動(dòng)到元素時(shí)、從下拉框中進(jìn)行選擇時(shí)、或者單擊按鈕時(shí)，不必等待瀏覽器對(duì)圖像進(jìn)行檢索。即使Ajax以異步方式發(fā)生，也需要花費(fèi)一些時(shí)間將圖像從服務(wù)器傳送到客戶端，并且在圖像全部下載完畢之前，它不會(huì)在客戶端中顯示。

　　在清單4所展示的例子中，用戶進(jìn)行從清單中選擇摩托車(chē)這一操作時(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è)面預(yù)加載圖像時(shí)，JavaScript的位置很重要。開(kāi)發(fā)人員一定不希望因?yàn)樵贖TML中加入了JavaScript代碼而影響頁(yè)面的加載速度。一般的規(guī)則是，可將<script>元素當(dāng)中的JavaScript代碼放到HTML頁(yè)面的***部分，因?yàn)樵诳紤]可同時(shí)下載多少資源時(shí)，瀏覽器的能力就相對(duì)有限了。如果可能，將腳本加到HTML頁(yè)面的***部分，來(lái)幫助瀏覽器更快速加載圖像和其他資源。

　　在HTML5中，可使用<script>標(biāo)記的新async屬性。這將告訴瀏覽器異步運(yùn)行JavaScript代碼，這樣，它可以在頁(yè)面中運(yùn)行其他東西時(shí)執(zhí)行。

　　輕松處理錯(cuò)誤

　　在JavaScript代碼中定義的每個(gè)函數(shù)，都要假設(shè)會(huì)有惡意輸入發(fā)生，因?yàn)?，防御性能?qiáng)的代碼比使用try... catch語(yǔ)句所編寫(xiě)的代碼更善于處理錯(cuò)誤。例如，如果想使用JavaScript函數(shù)來(lái)根據(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語(yǔ)句與錯(cuò)誤回調(diào)。清單6演示了在JavaScript代碼中使用try... catch語(yǔ)句來(lái)捕獲錯(cuò)誤。

　　清單6.使用try... catch語(yǔ)句來(lái)處理錯(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í)，對(duì)錯(cuò)誤回調(diào)的使用。錯(cuò)誤參數(shù)是可選的，因此可以很容易地跳過(guò)錯(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);

　　如何處理頁(yè)面上的錯(cuò)誤，這既是個(gè)業(yè)務(wù)問(wèn)題，也是個(gè)技術(shù)問(wèn)題。要詢問(wèn)客戶，在出現(xiàn)問(wèn)題時(shí)，想讓用戶看到什么消息，因?yàn)槿魏握故窘o用戶的消息，都會(huì)對(duì)業(yè)務(wù)造成影響。適當(dāng)時(shí)，客戶能夠幫助提供在出現(xiàn)異常時(shí)有效的默認(rèn)處理方式。

　　***，不要象清單8中那樣，在JavaScript提示對(duì)話框中顯示錯(cuò)誤描述。您的用戶不是軟件工程師，因此，這類(lèi)提示信息對(duì)于用戶來(lái)說(shuō)沒(méi)有任何意義。除了不要為用戶提供無(wú)意義的信息之外，提示對(duì)話框應(yīng)當(dāng)要求客戶取消該對(duì)話框，來(lái)返回Web頁(yè)面。

　　清單8.在錯(cuò)誤處理中避免JavaScript提示對(duì)話框

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）綜合癥。通過(guò)使用現(xiàn)有工具（框架與平臺(tái)），可有效利用其資源。大多數(shù)成熟的技術(shù)人員，會(huì)使用已在多個(gè)平臺(tái)上測(cè)試過(guò)，并具有跨瀏覽器兼容性的工具?，F(xiàn)有工具的大部分特性可用于部署到自己的項(xiàng)目中。

　　很多現(xiàn)有的優(yōu)秀工具，除了能提供Ajax調(diào)用之外，還能支持很多其他函數(shù)與特性，比如動(dòng)畫(huà)。表1中列出了其中一些工具。

　　表1.為Ajax調(diào)用提供方法的JavaScript工具

結(jié)束語(yǔ)

　　在Web應(yīng)用程序中使用Ajax，可為用戶提供整潔的Web應(yīng)用程序界面。Ajax已對(duì)整個(gè)HTML頁(yè)面的傳遞提供了一些優(yōu)化，然而，通過(guò)了解本文中描述的***實(shí)踐，可幫助您構(gòu)建更加優(yōu)化的Ajax應(yīng)用程序。

　　作者簡(jiǎn)介：

[[50177]]Nathan A. Good居住在明尼蘇達(dá)州的雙子城。他的專(zhuān)長(zhǎng)是軟件開(kāi)發(fā)、軟件架構(gòu)和系統(tǒng)管理。平時(shí)不編寫(xiě)軟件時(shí)，他喜歡組裝PC和服務(wù)器、閱讀和撰寫(xiě)技術(shù)文章，并鼓勵(lì)他的所有朋友轉(zhuǎn)用開(kāi)源軟件。他是許多書(shū)籍和文章的作者或合著者，包括Professional Red Hat Enterprise Linux 3, Regular Expression Recipes: A Problem-Solution Approach和Foundations of PEAR: Rapid PHP Development。