5个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文件包面中，但是，只有当该页面很小而且仅想优化少量资源时，才适合采用这一方式