基于Ajax通信的数据传输优化

肖 斌，汪 敏

(西南石油大学 a.计算机科学学院; b.电子信息工程学院，四川 成都 610500)

0 引言

Ajax通过对XHTML、CSS、DOM、JavaScript、XML等多项传统技术进行的修改、整合和发扬，在浏览器和服务器之间加入Ajax层，从而改变了传统的Web应用模型[1]。基于Ajax Web应用模型，Ajax向服务器发送和接收数据，减少了信息通信量，实现页面局部刷新，提高了网络反映速度。

当运用Ajax技术来开发一个健壮的软件系统时，Web应用程序不只依赖于高质量、快速和健壮的网络通信，更需考虑Ajax的可移植性、效用性和可用性等非功能性因素。而在Ajax 与服务器异步交互的过程中如何高效地传递响应数据则是很重要的一个环节。现从Ajax的数据响应角度进行分析，构建一个高效的Ajax应用程序，提出了一套优化网络通信并尽可能减少故障的方案。

1 Ajax Web应用模型分析

要对Ajax的性能实施优化，首先要考虑的是Ajax的基本工作原理。Ajax采用异步交互方式，在用户与服务器之间引入了一个用JavaScript编写的Ajax引擎，来代替用户与服务器进行交互。这样用户可以无需等待响应，继续其他的Web交互。基于Ajax的Web 应用模式如图1[2]所示。

如图1所示，用户界面通过Ajax引擎，使用XHR对象[4-5]，由JavaScript调用服务器通信，收到请求后，服务器端进行数据处理，完成通信解码，服务器端产生XML、纯文本、JSON等数据形式的响应返回给客户端，客户端通过JavaScript和DOM 程序进行局部更新。数据传输过程中数据传输量及其对数据的解析都会影响该Web应用程序的整体性能。

图1 基于Ajax 的Web 应用模式

2 性能优化策略

基于Ajax的性能分析，制约Ajax性能的主要因素包括数据传输的数据量及其数据格式。提高其性能的主要目标是发送最少的数据量、不请求多余数据、不重复数据请求。其对应的优化策略为使用恰当的数据格式并使用数据压缩和缓存技术。

2.1 数据格式的确定

2.1.1 数据量

数据格式影响传输效率，有些数据格式，相对于其结构数据内容更少，会造成大量数据空间的浪费。如发送数据value1,value2…..valueN

若采用XML格式发送其发送信息为：

可以看到，若服务器端返回的是XML格式的数据，除了冗余的开始结束标签之外，还必须确保该XML文档含有特定内容的首部信息，如XML版本号和编码格式；而JSON是一种轻量级的数据交换格式，使用的结构化符号短小精悍，这将在很大程度上减少浏览器和服务器之间传输的数据量。随着应用程序中的数据交换量的增长，数据结构的复杂化，JSON数据量小的优势将更明显。

2.1.2 客户端解析效率

在Ajax web应用系统中，如果客户端的请求返回（服务器端的接收数据）是XML文档，首先要进行XML解析以在内存中建立一个DOM（文档对象模型）树来描述文档；然后，使用JavaScript的标准DOM方法来操纵这个对象树并访问每个元素、属性以及树里的其它文本，最后进行相应的处理。

如果从服务器端返回的数据格式为JSON，对数据的处理仅需两个步骤：接收JSON数据；并将JSON数据格式化，再通过Javascript处理呈现给用户。

通过对上述代码的分析，JSON数据处理代码编写简单、易懂、快速、高效，其数据解析效率远比XML高，即使用JSON作为响应数据载体能会加快页面响应速度。

2.2 HTTP压缩

HTTP压缩：对诸如XHTML,CSS,JavaScript和XML这样的HTTP响应中的文本负载使用标准的GZIP或者其它压缩方法，使得在传输前减少响应的大小[3]。以下通过比较是否使用压缩技术的两个Web服务器：Jigsaw和Apache，并给出了所节省的发送包（Pa）以及以秒为单位的下载时间（Sec）的数目。

表1 压缩比和下载时间

表2 图像/HTML 混合情况下的压缩比和下载时间

从这些研究不难看出，好的压缩比是可能的，而且也可以通过 HTTP 压缩加速 Web 内容的下载时间。若有图像，图像占负荷的很大一部分并且在下载时间上有 20 %到30 % 的改进。当负荷只包含 HTML 内容时，下载时间可以加快将近 65 %。很明显，对于那些图像较少，HTML 内容较多的 Web 应用程序，下载时间的整体改进将接近 65%，而不是 20% 或30 %。这些研究表明在Web应用程序中部署HTTP压缩可以加速下载并改善用户体验。

为实现压缩，可通过查看报头开始压缩，如果没有设置报头，内容没有压缩可以正常发送，压缩后，编码后的数据与数据源发生了改变，压缩接近80%，但在浏览器中显示时，压缩与否显示内容完全一样。

2.3 缓存

网络通信中，服务器避免重复发送相同的数据到客户端，网络中对相同的数据采用缓存机制实现，避免回到网络中取数据而继续在用户本地缓存中获取数据。当需要缓存时，如果浏览器不能完成，使用ajax响应缓存。首先设置请求中的缓存响应属性为true;

当开启缓存时，库需要检查缓存中是否存在记录，如果数据存在，调用_handleCacheResonse()，否则才发送请求。

3 结语

这里基于传统 Web应用模型的通信缺陷,并结合 Ajax的工作原理，给出了数据压缩和缓存技术来提高网络的反映速度，提高Ajax框架的性能。经过验证,我们发现该方法在B/S应用中非常有效,有较大的推广价值。

[1] 波维尔.Ajax :The Complete Reference[M].北京:电子工业出版社,2009:501.

[2] 谭力,杨宗源,谢瑾奎.Ajax技术得数据响应优化[J].计算机工程,2010,36(07):52-54.

[3] RADHAKRISHNAN SRINIVASAN.用 HTTP 压缩加快 Web 数据的发送[EB/OL].(2008-07-21) [2010-08-11] http://www.ibm.com/developerworks/cn/web/wa-httpcomp/.

[4] 张升平.Ajax 在优化 Web 系统中的应用[J].通信技术, 2009,42(02): 286-288.

[5] 徐帅彬,牛建强,余小永.基于移动设备的 Ajax 技术的研究与应用[J].通信技术, 2009,42(07):160-162.