五个Ajax最佳实践

日期: 2011-11-06 作者:Nathan A. Good 来源:TechTarget中国 英文

  本文所介绍的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页面

  图 1. 搜索二手摩托车的示例web页面

  首先,用户选择摩托车的年份。然后,用户选择摩托车的构造。最后用户选择摩托车的型号。从始至终,Ajax一直在后台运行,更新web应用程序中的下拉框来为用户过滤清单,以方便用户选择。

  要开始这一练习,首先要为客户端及服务器创建一个简单图表(有一个文本框)。然后为您浏览器进行的Ajax调用画线,来从服务器获取用户数据,如图 2 所示。

图 2. 绘制Ajax调用

图 2. 绘制Ajax调用

  可通过将对品牌和型号进行的调用合并到一个调用中,来优化设计。不是对品牌进行一次调用,然后针对型号进行另一次调用,而是对型号进行缓存,这样,当用户选择品牌时,新代码只检索缓存中可用的型号列表。从本地缓存中获取数据要比从服务获取相同数据快得多。回避额外的服务调用,您就可以避免服务调用的延迟。新的通信情况如图 3 所示。

图 3. 合并获取品牌调用与获取型号调用后的Ajax调用

图 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>
<!– 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 页面的最后部分,来帮助浏览器更快速加载图像和其他资源。

  在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应用程序。

我们一直都在努力坚持原创.......请不要一声不吭,就悄悄拿走。

我原创,你原创,我们的内容世界才会更加精彩!

【所有原创内容版权均属TechTarget,欢迎大家转发分享。但未经授权,严禁任何媒体(平面媒体、网络媒体、自媒体等)以及微信公众号复制、转载、摘编或以其他方式进行使用。】

微信公众号

TechTarget微信公众号二维码

TechTarget

官方微博

TechTarget中国官方微博二维码

TechTarget中国

相关推荐