五個Ajax最佳實務

最後更新：2018-12-05 來源：互聯網

上載者：User

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

　　本文所介紹的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代碼預先載入的。

　　清單 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 頁面的最後部分，來協助瀏覽器更快速載入映像和其他資源。

　　在HTML 5中，可使用<script>標記的新async屬性。這將告訴瀏覽器非同步運行JavaScript代碼，這樣，它可以在頁面中運行其他東西時執行。

　　輕鬆處理錯誤

　　在JavaScript代碼中定義的每個函數，都要假設會有惡意輸入發生，因為，防禦效能強的代碼比使用try... catch語句所編寫的代碼更善於處理錯誤。例如，如果想使用JavaScript函數來根據使用者輸入進行計算，在計算前檢查輸入，如清單 5 所示。

　　清單 5. 檢查使用者輸入

以下是引用片段：
function caculateDistance(source,dest) {
    if (! isNaN(source) || ! isNan(dest)) {
        dojo.byId("errors").innerHTML = "Please provide a valid number.";
    }
}

　　即使代碼具有防禦能力，在適當時候，也可使用try... catch語句與錯誤回調。清單 6 示範了在JavaScript代碼中使用try... catch語句來捕獲錯誤。

　　清單 6. 使用try... catch語句來處理錯誤

以下是引用片段：
function calculateDistance(source,dest) {
    try {
        // do some calculations...
    } catch (error) {
        dojo.byId("errors").innerHTML = "An error occurred while adding the numbers";

    }
}

　　清單 7 示範了在調用Dojo Toolkit中所提供的xhrGet()方法時，對錯誤回調的使用。錯誤參數是可選的，因此可以很容易地跳過錯誤處理器的定義。

　　清單 7. 使用具有xhrGet()的錯誤回調

以下是引用片段：
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);

　　如何處理頁面上的錯誤，這既是個業務問題，也是個技術問題。要詢問客戶，在出現問題時，想讓使用者看到什麼訊息，因為任何展示給使用者的訊息，都會對業務造成影響。適當時，客戶能夠協助提供在出現異常時有效預設處理方式。

　　最後，不要象清單8中那樣，在JavaScript提示對話方塊中顯示錯誤描述。您的使用者不是軟體工程師，因此，這類提示資訊對於使用者來說沒有任何意義。除了不要為使用者提供無意義的資訊之外，提示對話方塊應當要求客戶取消該對話方塊，來返回web頁面。

　　清單 8. 在錯誤處理中避免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...";
}
}

　　使用現有工具

　　最後，作為最佳實務之一，要盡量避免Not Invented Here（NIH）綜合症。通過使用現有工具（架構與平台），可有效利用其資源。大多數成熟的技術人員，會使用已在多個平台上測試過，並具有跨瀏覽器安全色性的工具。現有工具的大部分特性可用於部署到您自己的項目中。

　　很多現有的優秀工具，除了能提供Ajax調用之外，還能支援很多其他函數與特性，比如動畫。表 1 中列出了其中一些工具。

　　表 1. 為Ajax調用提供方法的JavaScript工具

工具	描述
Dojo Toolkit	Dojo Toolkit是免費的JavaScript工具套件。它為一般web頁面提供Ajax調用方法，以及Representational State Transfer（REST）服務。Dojo Toolkit方法支援XML、JSON以及明文的訊息格式。
Google Web Toolkit（GWT）Designer	Google最近收購了Instantiations Developer Tools並重新推出一系列免費產品。其中之一是GWT Designer，可將其安裝到現有的 Eclipse 中。可利用設計器來輔助構建採用GWT的介面。GWT用於構建採用Ajax的複雜web應用程式，這使得web應用程式可以如同本地應用程式一樣複雜。與Rich Ajax Platform（RAP）類似，GWT不單單是一個JavaScript架構，而且還是編譯到Ajax-enabled HTML中的基於Java的工具集。
jQuery	jQuery是另一個JavaScript庫，它能提供全套的Ajax功能。jQuery還支援不同的訊息格式以及其他基於Ajax的方法，比如getScript()，它可用於下載並執行JavaScript檔案（是預載組件最佳實務的起源）。
Prototype	Prototype也是個JavaScript架構，可用於方便地發起Ajax調用。利用Ajax.PeriodicalUpdater之類的方法，可基於策略來更新Ajax頁面中的值，這樣，就可為已耗用時間較長的服務進程實現進度條或者其他方式的控制。
Rich Ajax Platform (RAP)	與表中列出的其他架構不同，RAP是個完整的平台，使得您可以利用Eclipse整合式開發環境（IDE）和Java（不是指令碼）代碼來構建Ajax-enabled的更優網站。類似於構建一個Swing或者Standard Widget Toolkit（SWT）應用程式。對於不想使用複雜的HTML、CSS以及JavaScript代碼的Java程式員來說，RAP之類的平台工具是非常不錯的選擇。　　RAP文檔提示說不要將其作為外掛程式安裝到現有Eclipse中。然而，可從Eclipse網站下載Eclipse for Rich Client Platform（RCP）and RAP Developers包，並將其安裝到單獨的位置。相關備忘單展示了如果匯入樣本項目。

　　結束語

　　在web應用程式中使用Ajax，可為您的使用者提供整潔的web應用程式介面。Ajax已對整個HTML頁面的傳遞提供了一些最佳化，然而，通過瞭解本文中描述的最佳實務，可協助您構建更加最佳化的Ajax應用程式。

采自： http://www.searchsoa.com.cn/showcontent_54832.htm

本文章原先以中文撰寫並發佈於 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