基于AJAX的异步Web开发模式

龙源期刊网

基于ＡＪＡＸ的异步Ｗｅｂ开发模式

作者：赵定远

来源：《现代电子技术》2008年第10期

摘 要：随着Web应用开发的不断深入和普及，基于互联网的应用程序越来越多，现有网

络应用程序中的请求-处理-等待模式越来越不适应用户需求，页面重载成为Web开发应用中最

大的可用性障碍。AJAX设计模式的出现，实现了平滑滚屏互联网应用。在这种模式下，各种

Web应用程序互相配合，能使网站无缝运作。提出利用AJAX异步机制实现Web应用程序开

发，Web页面不用打断交互流程进行重新加载就可以动态更新。使用AJAX，可以创建接近本

地桌面应用的、直接的、高可用的、更丰富的、动态的Web用户接口界面，极大地改善了

Web应用的可用性和用户的交互体验。

关键词：AJAX；JavaScript；XMLHttpRequest；DOM；

中图分类号：TP393 文献标识码：B

文章编号：1004-373X(2008)10-079-

Abstract：Along with the depth and popularization of Web application development,more and

more applications based on internet request-process-wait mode in current Web

application is unbearable to reloading becomes the handicap to the

appearance of AJAX design mode brings many new function-smooth screen scrolling in Web

using this design mode,different Web application cooperate with each other,making

webs running flawless,like computer program running in personal article is mainly

about development web application based on AJAX asynchronous using AJAX,pages can be

reloaded to update dynamically without interruption,also can create

immediate,useful,abundant,dynamic Web UI,it greatly improves availability of Web and interactive

Keywords：AJAX；JavaScript；XMLHttpRequest；DOM；

1 引 言

AJAX是异步JavaScript和XML单词的缩写为Asynchronous JavaScript and XML。AJAX

是目前在浏览器中通过JavaScript脚本可以使用的所有技术的集合，例如Java技术、XML、以

龙源期刊网

及JavaScript技术，他是当前Web创新(称为Web 2.0)中的一个热点。AJAX是使用客户端脚本

与Web服务器交换数据的Web应用开发方法，Web页面不用打断交互流程进行重新加裁，就

可以动态更新。使用AJAX，可以创建接近本地桌面应用的，直接的、高可用的、更丰富的、

更动态的Web用户接口界面。AJAX并不仅是一个技术，他更像是一套技术组合而成的设计模

式,是用来标志并描述设计技巧的一种方法，对于刚了解他的许多开发人员来说，他是一种新

的感觉。即使实现AJAX的所有组件都已存在了许多年，然而AJAX以一种崭新的方式来使用

所有的这些技术，在构建基于Java技术的Web应用时，打破了使用页面重载的惯例。AJAX

动态的WebUI，尤其是Google的GMail与Maps应用系统、与照片共享网站Flickr，充分地使

用后台通道，这就是“Web 2.0”概念。

2 AJAX核心技术

具体来说，AJAX基于下列这些核心技术

XHTML:对应W3C的XHTML规范，目前是XHTML1.0；CSS:对应W3C的CSS规范，

目前是CSS2.0；这里的DOM主要是指HTML DOM，XML DOM包括在下面的XML

中；JavaScript:对应于ECMA的ECMAScript规范；XML:对应W3C的XML DOM，XSLT，

XPath等规范；XMLHttpRequest:对应WhatWG的Web Applications 1.0规范的一部分；AJAX

使用XHTML和CSS标准化呈现，使用DOM实现动态显示和交互，用XML和XSLT进行数

据交换和处理，使用XMLHttpRequest进行异步数据处理，最后用JavaScript绑定和处理所有

数据。

在上述的这些AJAX的核心技术中，最核心的技术就是XMLHttpRequest。他正是AJAX

技术与众不同的地方。简而言之，XMLHttpRequest为运行在浏览器中的JavaScript脚本提供了

一种在页面之内与服务器通信的手段。页面内的JavaScript可以在不刷新页面的情况下从服务

器获取数据，或者向服务器提交数据。而在这个技术出现之前，浏览器只能通过HTML表单

的提交向服务器提交数据，从服务器获取数据只能通过点击一个超链接，这些操作一般都会带

来一次全页面的刷新。

3 基于AJAX的异步机制开发模式

AJAX开发模式最重要的特色是异步机制。异步是描述的一个客户端与一个服务器端的交

互的侧面，当一个AJAX应用程序交互的时候，那种可以更新展示在屏幕上的信息块而不需要

刷新或者重载他的所有内容的方式就是异步的，因为能够在服务器端构建很多不同的调用而不

需要在等待服务器响应的时候(表现形式就是客户阻塞)一直不停的盯着一个空白的屏幕。图1

所示为AJAX具体的过程模型。

许多重要的技术和AJAX开发模式可以从现有的知识中获取。例如，在一个发送请求到服

务端的应用中，必须包含请求顺序、优先级、超时响应、错误处理及回调，其中许多元素已经

龙源期刊网

包含在Web服务中。AJAX开发人员拥有一个完整的系统架构知识。同时，随着技术的成熟还

会有许多地方需要改进，特别是UI部分的易用性。

AJAX开发与传统的CS开发有很大的不同。这些不同引入了新的编程问题，最大的问题

在于易用性。由于AJAX依赖浏览器的JavaScript和XML，浏览器的兼容性和支持的标准也变

得和JavaScript的性能一样重要。这些问题中的大部分来源于浏览器、服务器和技术的组合，

因此必须理解这些区别才能最好地使用这些技术。

4 异步Web开发模式的优点

将AJAX实现的Web应用模式跟传统Web应用模式进行比对，如图2所示。

由图2可知，AJAX的工作原理相当于在用户和服务器之间加一个中间层，使用户操作与

服务器响应异步化。这样把以前的一些服务器负担的工作转移到客户端，利于客户端闲置的处

理能力来处理，减轻服务器和带宽的负担，从而达到节约ISP的空间及带宽租用成本的目的。

使用AJAX的优势在于：

(1) 减轻服务器的负担，可以最大限度地减少冗余请求；

(2) 无刷新更新页面，减少等待时间；

(3) 可以把服务器的负担转嫁一部分到客户端，减轻服务器端负担，节约空间和宽带成

本；

(4) 可以调用外部数据；

(5) 基于标准化的并被广泛支持的技术，不需要下载插件或小程序；

(6) 进一步促进的页面表示和数据的分离。

由上述优势可以看出，AJAX发展在于Web应用开发的不断改进。在使应用更快响应和创

新的过程中，重心定义Web应用的规则。原来用户通常每一次按钮点击会导致几秒的延迟和

屏幕刷新，AJAX的应用改变了这种等待的状况。

5 AJAX异步开发模式的实现

一个AJAX交互从一个称为XMLHttpRequest的JavaScript对象开始。如同名字所暗示

的，他允许一个客户端脚本来执行HTTP请求，并且将会解析一个XML格式的服务器响应。

龙源期刊网

AJAX处理过程中的第一步是创建一个XMLHttpRequest实例。使用HTTP方法(GET或POST)

来处理请求，并将目标URL设置到XMLHttpRequest对象上。

下面给出的示例用于创建一个简单的HTML页面，用文本框接受用户的年龄输入，当用

户输入完毕后，鼠标离开文本框后，页面自动将用户信息提交到服务器处理，服务器判断用户

年龄，如果年龄大于等于18，就返回信息“permission”，否则返回信息“no permission”，处理完

毕后客户端页面自动显示服务器返回信息。

下面分步编写AJAX设计模式代码完成上述功能。

5.1 创建新的XMLHttpRequest对象并发送请求

为了使Javascript能够向服务器发送HTTP请求，必须实例化XMLHttpRequest对象，但是

由于各个浏览器的不同，对XMLHttpRequest实例化的过程也不一样。下述代码能够在不同的

浏览器中实例化一个XMLHttpRequest对象。代码如下：

deMimeType("text/h

龙源期刊网

htt

("不能创建XMLHttpRequest实例

return fals

}

5.2 指定响应处理函数

龙源期刊网

开发人员只要将相应的处理函数的名字赋给XMLHttpRequest对象的属性

onreadystatechange即可。这就是当服务器返回信息时AJAX客户端处理的方式。下述代码指定

processRequest()方法来处理服务器端发回的请求。

ystatechange=processRequest

5.3 发出HTTP请求

这将进一步调用XMLHttpRequest对象的open和send方法。

(null);

Open()的第一个参数是HTTP请求的方法，可选值为Get，Post或Head。

5.4 处理服务器返回信息

一般开发人员用响应处理函数处理服务器返回的信息。

mentBy

龙源期刊网

{

alert("您请求的页面有异常

}

当readyState值为4时，说明服务器已经处理请求完毕并已经发回响应信息，可以在id

为”info”的组件中显示服务器返回的信息。

5.5 服务器端应用

下面代码用于服务器端处理客户端的请求，服务器采用JSP代码，判断客户端输入的年龄

大小，如果年龄大于等于18岁，就返回”permission”信息，否则返回”no permission”信息。

%>

龙源期刊网

6 结 语

synchronous Javascript and Xml(Ajax)是当前非常流行的Web开发技术，作为Rich Internet

Application(RIA)的一种实现技术，AJAX不仅可以改善用户体验，还可以简化Web开发，通

过将页面高度模块化，数据与表现分离，从而可以使服务器端和客户端都可以很好的解耦，降

低开发的复杂度。

AJAX是Javascript一些相对比较高级的特性的综合应用为此，与其他RIA实现技术(如

Flash，Java Applet)相比，不需要在客户端安装特殊的插件，具有更广泛的浏览器兼容性。

AJAX使得Web应用更加动态，带来了更高的智能，并且提供了表现能力丰富的AJAX

UI组件。创建一个成功的AJAX应用需要一系列的方法即从JavaScript UI设计到服务器端架

构。AJAX就是Web标准和Web应用的可用性理论的集大成者。他极大地改善了Web应用的

可用性和用户的交互体验，最终得到了用户和市场的广泛认可。

参 考 文 献

［1］David ript权威指南[M].北京:机械工业出版社

［2］柯自聪.AJAX开发简略

［3］Dave Crane Eric in ActionManning Publications Company,2006:96-98.

作者简介

赵定远 男，1955年出生。研究方向为软件测试、数据采集与通信、嵌入式系统。