利用AJAX技术提升Web应用性能的设计

2014-11-12黄华峰黄华林

科技视界 2014年24期

黄华峰黄华林

(1.广州景联信息科技有限公司，广东广州 510520；2.广东女子职业技术学院，广东广州 511450)

AJAX，Asynchronous JavaScript and XML，就是异步JavaScript及XML。AJAX并非一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。通过AJAX，设计人员可使用JavaScript的XMLHttpRequest对象来直接与服务器进行通信。通过XMLHttpRequest对象，JavaScript可以在不重载页面的情况下与Web服务器交换数据。

AJAX在浏览器与Web服务器之间使用异步方式传输数据，可以只向服务器请求页面中局部变化的数据，获得服务器返回的信息和数据后只做页面的局部刷新，而不需要重载整个页面，通信数据量大大减少，同时为用户提供非常棒的Web体验。

AJAX是Web2.0时代的标志性技术，在AJAX中使用的Web标准已被良好定义，并被所有的主流浏览器支持。AJAX应用程序独立于浏览器和平台，已经得到广泛的应用和支持。众多非AJAX技术的传统Web应用也纷纷改造升级，投向AJAX阵营。

1 AJAX原理及流程

AJAX是异步JavaScript及XML，而JavaScript原本却是一种单线程执行的脚本语言。JavaScript的单线程表现在其任一函数都要从头到尾逐句执行完毕之后，才会执行另一函数，对于浏览器来说，也就是无法在渲染页面的同时执行代码。这样，界面的更新、鼠标事件的响应处理、setTimeout计时器、setInterval计时器等任务的执行都要先排队，后依据队列先后顺序执行。这样一来，若有一段JavaScript代码执行时间比较长，那么在这段代码执行期间任何界面渲染都会被阻塞，界面事件处理也会停止响应。AJAX技术采用了JavaScript的异步编程模式，能够将代码的运行打散或者让IO调用在后台运行，这样能让界面更新和其他事件处理能够及时地进行。

JavaScript的异步编程模式可以利用异步IO让UI运行更加流畅，比如AJAX通过 XMLHTTPRequest的异步通信获取服务器数据，在接收服务器回应后再更新界面，在异步获取数据的时候不会阻碍UI的更新。目前，在众多HTML5设备API的设计中都充分采用了异步编程模式。

AJAX技术的核心之一是XMLHttpRequest对象，这是一种可以支持异步请求的技术。换句话来说，XMLHttpRequest可以将用户信息以异步方式发送到服务器端，并接收服务器响应信息和数据。XMLHttpRequest对象在大部分浏览器上已经实现而且拥有一个简单的接口允许数据从客户端传递到服务端，且不会打断用户当前的操作。使用XMLHttpRequest传送的数据可以是任何格式，但以XML格式的数据为多。程序员可以使用XMLHttpRequest对象的open方法启用一个AJAX调用向服务器发出请求，然后等待，得到服务器回应时，将在其onreadyStateChange事件响应中指定的处理函数来处理服务器的回应。

在建立Web应用时，AJAX为客户端页面的刷新提供很大的方便。例如，在投票系统中，AJAX技术可以对投票总数进行及时更新，每次更新只需服务器端返回更新后的投票总数量数据，仅刷新显示投票总数的一个页面元素，不需要重新载入整个页面，传输的数据量大大减少，能显著提升Web服务的性能。

2 AJAX的优势

2.1 AJAX技术可以在网页内部与服务器间达到通信的效果，减轻服务器的负担。由于AJAX的根本理念是“按需取数据”，可以最大可能的减少了冗余请求和响影对服务器造成的负担，又可以做到无须刷新整个页面就可以更新变化的部分，给用户带来流畅而友好的体验。

2.2 无需客户端任何安装，即可被绝大多数主流浏览器所支持；可以使数据和表现分离；平衡了前、后端的负载，原本数据大多由后端负责处理，借由AJAX让客户端分担些工作，减低了后端的负载。

2.3 AJAX技术不仅可以保障Web应用保留自己B/S结构的优点，也具备C/S结构应用比较强大的功能和用户感受。AJAX可以进行实时数据验证，这使Web应用程序更接近于桌面应用程序。

3 利用AJAX技术提升Web应用性能的设计

3.1 Web服务于AJAX技术相结合的应用设计

一般情况下，Web服务网站应用结构如图1所示。

图1 未引入AJAX技术的Web服务应用模型

图2 引入AJAX技术的Web应用模型图

由图1可以看出，整个网站有两个比较明显的特征。首先整个网站是由多个Web服务组合而成，其次所有的Web服务的访问都是在服务器端展开。基于这种模式，Web服务对客户端浏览器来讲是一个完全透明的状态，浏览器不必清楚的知道Web的功能机位置，只要和服务器进行交互即可。如此一来，整个网络系统会出现瓶颈，因为Web服务对浏览器来说是透明的，此时服务器就要担负起全部的输入、输出的计算工作，无法采用客户端的计算机的计算能力。在Web服务网站系统的基础上引入AJAX技术就可以有效改善上述瓶颈。引入AJAX技术之后的网站应用模型如图2所示。

由图可知，在Web服务中引入AJAX技术之后，浏览器可以直接跟Web服务相交互，中间不用服务器端进行中转，在一定程度上提升网络带宽的利用效率。且浏览器还可以采用JavaScript语言对Web服务返回数据展开相应的处理，缩减服务器端的计算量，提升系统的性能。

3.2 基于AJAX技术访问Web服务的设计

3.2.1 Web访问技术

在浏览器中可以采用不同的技术对Web服务进行访问。例如：微软公司为Wiodows系统研发的Webservice行为组件，采用这些组件用户可以之间在浏览器与服务器端进行交互操作。但这些技术并没有得到广泛的应用，首先这些技术是浏览器厂商自己开发的私有扩展，没有比较统一的标准无法大范围推广，其次是其不支持异步Web服务访问，无法展开异步访问会导致网页加载的时间过长，用户无法接受长时间的等待。引入AJAX技术可以有效改善上述情况，AJAX技术可以支持Windows、MacOS等这些主流操作系统，也支持IE/firefox/Opear等众多主流浏览器。

3.2.2 分析XMLHttpRequest对象访问Web服务的方法

基于AJAX技术的Web服务访问主要采用XMLHttpRequest对象来实现，在IE以外的浏览器之中建立一个XMLHttpRequest对象比较容易，只需要下列代码：

xmlHttp=new XMLHttpRequest();

在IE浏览器中建立XMLHttpRequest对象则离不开MSXML组件。首先可以在编写代码时采用新版本的MSXML6.0组件创建XMLHttpRequest对象，如果失败则采用IE6.0自带的MSXML3.0组件创建，如果再次失败则尝试运用IE6.0以下的版本浏览器附带MSXML组件，如果失败就采用非IE浏览器支持的XMLHttpRequest()函数来创建XMLHttpRequest对象。如果依然失败就可以抛出异常，说明用户应用的浏览器不支持AJAX功能。

3.3 AJAX技术进行客户端数据处理

3.3.1 处理XML文档

在标准的AJAX程序中，浏览器与服务器进行信息交换采用XML格式。XML在服务器端进行处理时通常不会出现问题，主流平台可以各自给出比较完善的SAX和DOM对象，这些对象也较多的第三方支持，可以依照需要选取。在浏览器进行XML文档处理时采用W3C XML DOM标准就可进行，只是必须注意IE浏览器与个别浏览器创建DOM对象方法上的不同之处。以下的代码是IE和个别浏览器创建DOM对象的方法。通常通过AJAX状态值和状态码判断访问成功与否，再将服务器获取的XML文档httpRequest.responseText在浏览器中进行解析。以下是一段样例代码：

3.3.2 处理JSON数据

JSON，JavaScript Object Notation，是一种简单的数据格式，是JavaScript原生格式，比XML要轻巧得多，在JavaScript中处理JSON数据不需要任何特殊的API或工具包。JSON数据的访问比XML访问简单很多，可以像访问JavaScript对象一样去访问JSON数据。当前，很多AJAX架构使用JSON部分取代了XML，同时提升其JavaScript对象特性。JSON数据格式比较简单，易于读写，易于解析，支持多种服务器端语言，已广泛使用。例如，某次AJAX请求获得服务器以JSON格式返回学生信息列表，想要对学生的信息进行访问，JavaScript样例代码片段如下：