Ajax技术研究及其Web应用

第２６卷第１１期　

２０１０年１１月　

赤峰学院学报（自然科学版）　

Ｊｏｕｒｎａｌ　ｏｆ　Ｃｈｉｆｅｎｇ　Ｕｎｉｖｅｒｓｉｔｙ（Ｎａｔｕｒａｌ　Ｓｃｉｅｎｃｅ　Ｅｄｉｔｉｏｎ）　

Ｖ０１．２６　Ｎｏ．１１　

ＮＯＶ．２０１０　

Ａｊａｘ技术研究及其Ｗｅｂ应用　

张铃丽，朱永杰　

（许昌学院，河南

摘

许昌４６１０００）　

要：ａｊａｘ技术是多种现有技术的结合，通过浏览器与服务器之间的异步通信，实现了无刷新更新页面，提高了用户的　

体验．介绍了ａｊａｘ的技术原理、核心技术及工作流程，列举了ａｊａｘ技术一些典型应用，并指出ａｊａｘ的发展趋势．　

关键词：ａｊａｘ；ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ；ＪａｖａＳｃｒｉｐｔ；ＤＯＭ；ＸＭＬ　

中图分类号：ＴＰ３９３　文献标识码：Ａ　文章编号：１６７３—２６０Ｘ（２０１０）１　１－００２０—０３　

随着Ｗｅｂ应用技术的不断发展，用户已经不满足于像　

浏览器端　服　筹器竭　

以前那样填写表单，点击“提交”按钮，然后等待页面跳转的　

ＨＴＭ　ｆ．‘　’Ｉ　

用　ＣＳＳ　数据　Ｉ

同步请求／响应模式，用户需要的是一种像任何桌面应『｝ｊ程　

户　Ａｌ

Ｉ

　Ｗｅｂ　

数据　Ｉ　

序那样流畅、快捷和人性化的Ｗｅｂ体验．另外，大多数的网　

界　引　

ａｘ　

Ｉ　服　

●—一　存储　Ｉ

与后　Ｉ

整　Ｉ　务　

＿－　台处　Ｉ　

页具有一些相同的内容，ｌ尤其是同一网站中的网页．以往打　

面　ＪａｖａＳｃｒｉｐｔ　ＨＴＴＰ　Ｉ　器　理　Ｉ　

开这些网页的时都是从服务器上全部下载到客户端，这造　

调用　请求　Ｉ　Ｉ　

成了巨大的服务器的负担，其实可以采用新的技术来避免　

图２　Ａｊａｘ　Ｗｅｂ模型　

重复内容的请求．因而，Ａｊａｘ技术应运而生并获得广泛应用。　

行交互＿引．Ａｊａｘ引擎是用ＪａｖａＳｃｒｉｐｔ语言所编写，且通常放在　

Ａｊａｘ是Ａｓｙｎｃｈｒｏｎｏｕｓ　ｊａｖａＳｃｒｉｐｔ　ａｎｄ　ＸＭＬ的缩写，是　

一

个隐藏ｆｒａｍｅ中，该引擎负责绘制用户界面以及与服务器　

由ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ、ＣＳＳ、ＸＭＬ、ＤＯＭ和ＪａｖａＳｅｒｉｐｔ等技术结　

端通信目．并不是所有的用户请求都提交给服务器，像一些数　

合而成的技术Ⅲ．它是基于ＪａｖａＳｃｒｉｐ！脚本和ＸＭＬ封装数据　

据验证和数据处理等都交给Ａｊａｘ弓ｌ擎来做，只有确定需要　

的服务器和客户端的异步交互技术，能够实现浏览器与服　

从服务器读取新数据时再由Ａｊａｘ引擎向服务器提交请求，　

务器的异步通信，使Ｂ／Ｓ结构的应用程序根据用户输入实　

这样，把以前的一些服务器负担的工作转嫁到客户端，利用　

现页面实时、局部、快速刷新，模拟类桌面应用程序的效果，　

客户端闲置的处理能力来处理，减轻服务器和带宽的负担．　

从而不仅节省了带宽，而且显著地提高用户的体验．　

通过Ａｊａｘ的技术原理可知，Ａｊａｘ的最大特点是无刷新　

１　Ａｌａｘ的技术原理　

更新页面，减少用户心理和实际的等待时间；Ａｊａｘ能够按需　

传统的Ｗｅｂ应用采用同步交互方式，用户发送一个　读取数据，避免了在网络上发送那些不发生改变的信息．但　

Ｈ３３＂Ｐ请求到服务器，服务器对其进行处理后再返回一个新　

Ａｊａｘ并不是完美的技术，它也有自身的缺陷．浏览器兼容性　

的Ｗｅｂ页面到浏览器　当服务器正在处理的时候，用户则一　差；前进后退按钮失效；一些手持设备现在还不能很好的支　

直处于等待状态，这样，不会产生较好的体验，而且完整页　

持Ａｊａｘ；运行效率不高；开发难度加大；对搜索引擎不太友　

面的传输会加重网络负荷和服务器的工作量．　

好．　

Ａｊａｘ是多种技术的结合，通过协作发挥各自的作用：使　

２　Ａｉａ×的核心技术　

用ＸＨＴＭＬ和ＣＳＳ标准化呈现；使用ＤＯＭ实现动态显示和　

ａｊ　的核心技术是ＸＭＩＭｔｔｐＲｅｑｕｅｓｔ、ＪａｖａＳｃｒｉｐｔ、ＣＳＳ、　

交互；使用ＸＭＬ和ＸＳＴＬ进行数据交换与处理；使用ＸＭＬ—　

ＤＯＭ和ＸＭ　Ｌ＿　

Ｈｔｌｐ—Ｒｅｑｕｅｓｔ对象进行异步数据读取；使用ＪａｖａＳｃｒｉｐｔ绑定　

ｘＭＬＨｔｔｐＲｅｑｕｅｓｔ是Ａｊａｘ中最为核心的技术，是ｘＭ　

和处理所有数据［１】．　

Ｈｉｔｐ组件的一个对象，最早是由微软１９９５在ＩＥ５．０浏览器　

中率先推出的ｆ４］．它直接把数据传到服务器上或者从服务器　

………■　

浏　用　

ＨＴＭＬ＋ＣＳＳ数据　数据　服　

上读取数据，实现上述所介绍无刷新更新页面的功能．与此　

Ｗｅｂ　

览　户　

．．　

服　１于Ｉ晤　务　

对应，ｏｐｅｒａ、Ｍｏｚｉｌｌａ和ｓａｆａｒｉ等浏览器也实现了类似的对象，　

器　接　

务　与后　器　

ＸＭＬＨ１ＩｐＲｅｑｕｅｓｔ是目前该技术的正式名称．ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ　

端　口　

台处　端　

ＨＴＴＰｉ￣求　

器　

Ｉ　

理　

技术的出现打破了长久以来的Ｗｅｂ应用开发模式，这样既　

减轻了服务器的负担又加快了响应速度、缩短了用户等待　

１传统的Ｗｅｂ模型　

时间，提升了用户的体验．　

ａｊ　采用异步交互方式，在用户和服务器之间引入一　

ＪａｖａＳｅｒｉｐｔ是一种基于对象和事件驱动并具有较高安全　

个用ＪａｖａＳｃｒｉｐｔ编写的Ａｊ　引擎，崩来代替用户与服务器进　

性能的脚本语言，拥有自己的编程标准，可以使用浏览器中　

２０一　

的很多对象，包括ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ．在ａｊａｘ中，ＪａｖａＳｃｒｉｐｔ通　

３　Ｍａｘ的工作流程　

过调用ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ对象的方法和属性与服务器端进　

行数据交互，同时还可以利用ＤＯＭ的ＡＰＩ来解析从服务器　

端返回的ＸＭＬ数据和更新ＨＴＭＬ页面的内容．由于　

ＪａｖａＳｃｒｉｐｔ可以直接在客户端进行一些事件的处理，充分发　

挥了客户端的运算能力，所以就不需要将用户所提交的简　

单请求传到服务器处理再传回来，从而大大减轻了服务器　

的负担．ＪａｖａＳｃｆｉｐｔ在客户端的浏览器执行，ＪａｖａＳｃｒｉｐｔ代码不　

Ａ　实现异步请求／响应模式步骤如下：　

３．１创建ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ对象　

在使用ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ对象发送请求和处理响应之　

前，必须先创建一个ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ对象．代码如下：　

ｉｆ（ｗｉｎｄｏｗ．ＡｃｔｉｖｅＸＯｂｊｅｃｔ）｛　

ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ＝ｎｅｗ　ＡｃｔｉｖｅＸＯｂｊｅｃｔ　

ＸＭＬＨＴｒＰ”）；　

ｌ　

Ｍｉｃｒｏｓｏｆｔ．　

应太多，否则会使得客户端运行很慢，ＪａｖａＳｃｒｉｐｔ应用最多的　

就是表单验证同．　

ＤＯＭ是Ｄｏｃｕｍｅｎｔ　Ｏｂｊｅｃｔ　Ｍｏｄｅｌ的缩写，即文档对象模　

ｅｌｓｅ　ｉｆ（ｗｉｎｄｏｗ．ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ）｛　

ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ＝ｎｅｗ　ＸＭＬＨｔｔｐ—Ｒｅｑｕｅｓｔ０；　

型，为文档提供了结构化表示，并定义了如何通过脚本来访　

问文档结构．它是个Ｗ３Ｃ规范，独立于平台和语言．ＤＯＭ定　

义了如何表示和修改文档所需要的对象，也定义了这些对　

象的行为和属性，以及对象之间的关系．使用ＪａｖａＳｃｒｉｐｔ可以　

访问文档中的所有结点，即所有对象．通过改变这些对象的　

属性，用户可以控制页面的局部行为，将动态获取的数据插　

入到文档中，实现局部刷新的目的．用户还可以利用ＤＯＭ模　

型增加和删除文档结点，实现界面元素的动态变化．在应用　

ｊａａｘ技术时，可以通过ＤＯＭ来解析处理ＸＭＬ文档和更新　

ＨＴＭＬ页面的内容．　

ＸＭＬ是Ｅｘｔｅｎｓｉｂｌｅ　Ｍａｒｋｕｐ　Ｌａｎｇｕａｇｅ的缩写，即可扩展　

标记语言，可以规范地定义结构化数据，是网上传输的数据　

和文档符合统一标准［６］．它与ＨＴＭＬ的性质完全相同，更准　

确的说，ＸＭＬ正是从ＨＴＭＬ转化而来，目前，已经成为Ｉｎ—　

ｔｅｍｅｔ上数据和文档传输的标准．ＸＭＬ作用很大而且广为接　

受，它为跨平台、跨领域的应用提供了一种通信手段．在应用　

Ａｊｘａ技术时，ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ对象可以选择使用ＸＭＬ作为　

与服务器端通信的数据格式．　

ＣＳＳ是Ｗｅｂ设计沿用已久的部分，同样，在ａｊａｘ中，　

ＣＳＳ担当着界面表现的重任，其重要性甚至超过了传统的　

Ｗｅｂ程序设计．ＪａｖａＳｃｒｉｐｔ通过ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ对象和服务　

器进行交互，通常获取的都是单纯的数据，不包括表现元　

素，如果此时使用ＪａｖａＳｃｒｉｐｔ操作标记的属性来控制其外　

观，会使代码更加复杂且难以维护，使用ＣＳＳ则能很好的解　

决这些问题．样式表可以定义一些明显的样式元素，例如颜　

色、边框、背景图片、透明度和大小等．此外，ＣＳＳ还可以定义　

元素相互之间的布局及简单的交互功能．图３显示了Ａｊａｘ　

技术的核心技术如何配合工作来完成客户端与服务器的异　

步操作．　

图３　ａｊａｘ的五个主要组件　

）　

由于ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ不是一个Ｗ３Ｃ标准，Ｉｎｔｅｍｅｔ　

Ｅｘｐｌｏｒｅｒ把ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ实现为一个ＡｃｔｉｖｅＸ对象，其他　

浏览器（如Ｆｉｒｅｆｏｘ、Ｓａｆａｒｉ和Ｏｐｅｒａ）把它实现为一个本地　

ＪａｖａＳｃｒｉｐｔ对象．由于存在这些差别，ＪａｖａＳｃｒｉｐｔ代码中必须包　

含有关的逻辑，从而使用ＡｃｔｉｖｅＸ技术或者使用本地　

ＪａｖａＳｅｒｉｐｔ对象技术来创建ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ对象，以确保和　

浏览器兼容．　

３．２发出ＨＴｒＰ请求和回调函数　

创建了ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ对象之后，就可以使用ｘＭＬ－　

ＨｔｔｐＲｅｑｕｅｓｔ对象中的ｏｐｅｎ０方法和ｓｅｎｄ０方法来向服务器　

发送请求，如下所示：　

ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ：ｏｐｅｎ（ｓｔｒＭｅｔｈｏｄ，ｓｔｒＵｄ，ｂｏｏｌＡｓｙｎｃ，ｓｉ￣Ｕｓｅｒ，　

ｓｔｒＰａｓｓｗｏｒｄ）；　

ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ．ｓｅｎｄ（ｖａｒＢｏｄｙ）；　

ｏｐｅｎＯ方法的ｓｔｒＭｅｔｈｏｄ参数，字符串型，表示ＨｒｒＩ’Ｐ请　

求的方法，可以为ＰＯＳＴ、ＧＥＴ、ＰＵＴ、ＨＥＡＤ、ＤＥＬＥＴＥ等；　

ｓｔｒＵｒｌ，字符串型，表示请求的ＵＲＬ地址，可以为绝对地址，　

也可以为相对地址；ｂｏｏｌＡｓｙｎｃ，布尔型，指定此请求是否为　

异步方式，默认为ｔｒｕｅ，如果为ｆａｌｓｅ，表示此次请求为同步请　

求模式；ｓｔｒＵｓｅｒ和ｓｔｒＰａｓｓｗｏｒｄ，字符串型，可选参数．　

ｏｐｅｎ调用完毕后要调用ｓｅｎｄ方法，ｓｅｎｄ的参数ｖａ卜　

Ｂｏｄｙ，表示通过请求发送的数据，ｖａｒｉａｎｔ型，可以是字符串，　

ＤＯＭ树，或其它数据流．当使用ＧＥＴ方法提交请求，或者没　

有需要发送的数据时，可以ｓｅｎｄ（ｎｕｌｌ１）或直接省略参数ｓｅｎｄ　

Ｏ．　

在发送请求后，还要指定回调函数．创建ＸＭＬＨｔｔｐＲｅ—　

ｑｕｅｓｔ对象向服务器发送一个Ⅲ　ｒＰ请求后，要决定当收到　

服务器的响应后，需要做什么．这需要告诉ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ　

对象用哪一个函数来处理这个响应．通常把该处理函数叫做　

回调函数．ｘＭＬＨｔｔｐＲｅｑｕｅｓｔ对象提供了ｏｎｒｅａｄｙ—　ｓｔａｔｅ—　

ｃｈａｎｇｅ属性来指定回调函数，例如：　

ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ．ｏｎｒｅａｄｙｓｔａｔｅｃｈａｎｇｅ＝ＣａＵ—ＢａｃｋＦｕｎｃｔｉｏｎ—　

Ｎａｍｅ；　

也可以用ＪａｖａＳｃｒｉｐｔ即时定义函数的方式定义响应函　

数，例如：　

ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ．ｏｎｒｅａｄｙｓｔａｔｅｃｈａｎｇｅ＝ｆｕｎｃｔ—ｉｏｎ０（Ｊ；　

３．３处理服务器返回的信息　

当ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ对象的ｒｅａｄｙＳｔａｔｅ发生变化时将触　

一

２１—　

发ｒｅａｄｙｓｔａｔｅｃｈａｎｇｅ事件．通过将处理函数赋给ＸＭＬＨｔｔｐＲｅ—　

ｑｕｅｓｔ对象的ｏｎｒｅａｄｙ—ｓｔａｔｅｃｈａｎｇｅ属性，可以为该事件指定　

事件处理函数．如果ｒｅａｄｙＳｔａｔｅ值是４，代表服务器已经返回　

所有的信息，可以开始处理信息并更新页面内容．服务器返　

回信息后，通过访问ＸＭＬＨｔｔｐ—Ｒｅｑｕｅｓｔ对象的ｓｔａｌｕｓ属性来　

获取当前ＨＴｒＰ请求的状态，以此来判断请求是否成功．其　

中，２００代表页面正常．　

在ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ对象完成一次ＨＴＩ＇Ｐ请求后，可以　

通过访问其ｒｅｓｐｏｎｓｅＴｅｘｔ或ｒｅｓｐｏｎｓｅ—ＸＭＬ属性来获取返回　

的数据．　

ｒｅｓｐｏｎｓｅＴｅｘｔ将返回的数据作为字符串格式返回，ｒｅ—　

ｓｐｏｎｓｅＸＭＬ将返回的数据格式化为ＸＭＬ文档返回．　

以ＸＭＬ文档方式返回的数据，需要使用ＤＯＭ来解析，　

从中提取响应数据，ＤＯＭ也提供了对页面中各个对象的读　

写支持，通过ＤＯＭ可以方便地完成对页面内容的更新．　

３ｌ４取消当前请求　

如果需取消一个正在进行中的请求，可以调用ｘＭＬ＿　

ＨｔｔｐＲｅｑｕｅｓｔ对象的ａｂｏｒｔ方法，如下所示：　

ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ．ａｂｏｒｔＯ；　

调用后该方法后，ＸＭＬＨ．ｐＲｅｑｕｅｓｔ对象重新回到未初　

始化状态．　

４　Ａｊａｘ技术的应用　

ＡＪＡｘ的技术特点在于异步交互、动态更新Ｗｅｂ页面，　

因此它的适用范围是交互较多、频繁读取数据的Ｗｅｂ应用．　

Ａｊｘａ主要可以用于数据验证、级联菜单和自动更新页面等．　

在填写表单时，有些数据需要保证唯一性，如在用户注　

册的过程中，需要检验待注册的用户名是否唯一．传统的方　

法是采用ｗｉｎｄｏｗ．ｏｐｅｎ的弹出窗口或ｗｉｎｄｏｗ．ｓｈｏｗＭｏｄａｌＤｉａ－　

ｌｏｇ的对话框，两者都需要打开窗口．而Ａｊ／Ｉｘ采用异步方式　

直接将参数提交至服务器，用ｗｉｎｄｏｗ．ａｌｅｒｔ将服务器返回的　

校验信息显示出来，这样可以快速完成验证又不加重服务　

器的负担．　

以往在网页中应用级联菜单时，一次性地将级联菜单　

的所有数据全部读出并写入数组，然后根据用户的操作用　

ＪａｖａＳｅｒｉｐｔ来控制它的子集项目的呈现．这种方法避免了页　

面的刷新，但由于用户对于菜单项的单击是不均匀的，在菜　

单结构复杂数据量大的时候会产生相当大的冗余，造成资　

一

２２　

源的浪费．应用Ａｊａｘ技术之后，在初始化页面时只读出它的　

第一级的所有数据并显示，在用户操作一级菜单中的某一　

项时，会通过Ａｊａｘ向后台请求该菜单项所属的二级子菜单　

的所有数据，以此类推……这样，减少了数据下载总量，在　

真正意义上实现“按需取数据”局部更新页面．　

在有些Ｗｅｂ应用中数据更新速度很快，如聊天室的聊　

天记录等等．在ＡＪａｘ出现之前，用户想看到最新消息必须手　

动刷新或者利用页面提供的定时刷新功能．而Ａｊａｘ在页面　

加载后会通过引擎轮询服务器，查看是否有需要更新的内　

容．若有，只需将新数据下载，在页面上进行动态更新并给出　

提示．这样既避免用户手工刷新页面的不便，也不会因频繁　

刷新而造成资源浪费．　

然而Ａｊａｘ不是万能的，只有在适宜的场合才能充分发　

挥长处，改善系统性能和用户体验．　

５结语　

Ａｊｘａ技术是多种技术的结合，实现了无刷新更新页面；　

它将原来一些服务器端的工作利用客户端闲置的能力来处　

理，从而减轻服务器的负担，减少用户的等待时间，提升了　

用户体验．通过运用Ａｊａｘ技术，可以构建更为动态和响应更　

灵敏的Ｗｅｂ引用程序，用户体验逐步接近桌面应用．随着　

ｊＡａｘ技术的成熟和各种浏览器的支持，Ａｊａｘ技术将会得到　

更加广泛的应用．　

参考文献：　

［１］Ａｓｌｅｓｏｎ　Ｒ．Ａｊａｘ基础教程【Ｍ】．北京：人民邮电出版社，　

２００６．　

［２］游丽贞．ＡｊａＸ引擎的原理与应用Ⅱ】．微计算机信息，２００６，２２　

ｆ２）：５０６—２０６．　

［３］谭力，杨宗源，谢瑾奎．Ａｊａｘ技术的数据响应优化卟计算　

机工程，２０１０，３６（７）：５２—５４．　

［４］王净，占凯．Ａｊａｘ技术和ｗｅｂ应用Ｕ】．舰船电子工程，２００９，　

２９（１１）：１２７—１３１．　

［５］奈名高，王程根，邓浩，李纬．基于ｗｅｂ２．０的Ａｊａｘ技术的　

开发Ⅱ】计算机技术与发展，２００７，１７（５）：２０３—２０６．　

［６］昊吉义，平玲娣．Ｗｅｂ２．０主流应用技术——Ａｊａｘ性能分　

析Ⅱ】．计算机工程与设计，２００８，２９（８）：１９１３—１９１４，１９４５．