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

最後更新：2017-02-28 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

導讀：通過對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>

<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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More