注冊 | 登陸
您的位置:阿里西西 > 前端技術 > 腳本技術 > 詳細內容

通過ajax返回多個值的代碼實例教程

  稿源:本站整理   2018-09-05   點擊:   撤稿糾錯
通過對5個最佳實踐的學習,開發人員可將其應用到日常的Asynchronous JavaScript + XML( Ajax )開發工作中。文章包括了數據格式、錯誤處理、以及一些采用Ajax的Rich Internet Applications(RIAs)開發工具。掌握這些最佳實踐,有助于開發人員編寫更加高效且健壯的Ajax代碼。
本站收錄這篇文章通過ajax返回多個值的代碼實例教程,詳細解說文章中相關ajax 技術與知識,歡迎能給大家一些在這方面的支持和幫助!下面是詳細內容:


導讀:通過對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所示。


關于通過ajax返回多個值的代碼實例教程的內容寫到這里就結束啦,您可以收藏本頁網址http://www.hmtlio.tw/web/a/2018090585785.shtml方便下次再訪問哦。


更多關于 ajax 的文章
相關閱讀

相關排行總榜

網頁教程

網站運營

特效排行

教你如何使用js+CSS寫出類似FLASH動畫的網
一款CSS3制作的帶尖角的按鈕實例代碼
目前主流瀏覽器對于HTML5與CSS3的支持情況
全面剖析前端Ajax技術原理及知識
分享一個HTML5 + JavaScript實現Flash動畫
用PHOTOSHOP把美女頭畫像制作成漂亮的仿手
淘寶網及新浪網等幾大官方IP查詢API接口地
用Photoshop制作淘寶大促雙十一電商促銷宣
用HTML5+css3制作HTML5驗證的網頁表單
通過html5代碼實現在網頁中插入和播放mp4
如何讓您的微信公眾號內容快速增加閱讀量
網站用戶界面設計(網頁設計)命名規范
分享一些企業微信營銷推廣的技巧與經驗
可以借鑒和學習的小米模式4大經驗要素
SEO優化中網站title標題優化總結及經驗分
為什么說建站要從網站用戶忠誠度著手,知
一個優秀的SEM進行百度搜索推廣賬號架構經
談談從了解用戶開始互聯網推廣的營銷策略
談談新手運營網站如何做好網站的廣告位投
清理您網站上的黑鏈的幾個招數
JS制作循環上下左右平移轉圈的圖層特效
原生js寫的貪食蛇網頁版小游戲特效代碼,
用CSS3實現的addidas阿迪達斯標志LOGO特效
HTML5打造的酷炫3D 360度圖片立體瀏覽特效
通用canvas代碼實現的JS畫圓圈動畫特效代
通過HTML5+SVG制作奔跑的小馬駒動畫特效
jquery實現拖拽進度條并顯示百分比的特效
用HTML5+canvas代碼繪制的星空月亮圖案特
簡單實用的純CSS實現的橫向多級導航特效代
原生JS寫的一個書架式的圖片縮放滾動展示
彩票25选5开奖结果