ajax返回多個值:5個Ajax最佳實務

來源:互聯網
上載者:User

導讀:通過對5個最佳實務的學習,開發人員可將其應用到日常的Asynchronous JavaScript + XML( Ajax )開發工作中。文章包括了資料格式、錯誤處理、以及一些採用Ajax的Rich Internet Applications(RIAs)開發工具。掌握這些最佳實務,有助於開發人員編寫更加高效且健壯的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... --> 
<script type="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所示。 本文連結http://www.cxybl.com/html/wyzz/JavaScript_Ajax/20121127/34435.html

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。