AJAX的原理及其在Web开发中的应用

维普资讯

王义勇’何月顺　

Ｗａｎｇ　Ｙｉｙｏｎｇ　Ｈｅ　Ｙｕｅｓｈｕｎ　

（１．东华理工学院，抚州３４４０００；２．东华理工学院长江学院，南昌　３３００１３）　

（１．Ｅａｓｔ　Ｃｈｉｎａ　Ｉｎｓｔｉｔｕｔｅ　ｏｆ　Ｔｅｃｈｎｏｌｏｇｙ，Ｆｕｚｈｏｕ　３４４０００；　

２．Ｙａｎｇｔｚｅ　Ｃｏｌｌｅｇｅ，Ｅａｓｔ　Ｃｈｉｎａ　Ｉｎｓｔｉｔｕｔｅ　ｏｆ　Ｔｅｃｈｎｏｌｏｇｙ，Ｎａｎｃｈａｎｇ　３３００１３）　

摘要：ＡＪＡＸ（异步Ｊａｖａ　Ｓｃｒｉｐｔ与可扩展标记语言）是Ｗｅｂ应用开发的一种新理念。它将现有的多种技术进行结合，可　

以构建更为动态和响应更灵敏的Ｗｅｂ应用程序。文章介绍了ＡＪＡ）（的主要技术，并以“部门绩效管理”为实例，探讨了ＡＪＡ）（在　

Ｗｅｂ开发中的应用。　

关键字：ＡＪＡ　ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ；ＸＭＬ；Ｗｅｂ开发　

中图分类号：ＴＰ３ｌ１．１１　文献标识码：Ａ　文章编号：１　６７１—４７９２一（２００６）７～００３６—０３　

Ａｂｓｔｒａｃｔ：Ａｊａｘ（Ａｓ　ｎｃｈｒｏｎｏｕｓ　ＪａｖａＳｃｒｉｐｔ　ａｎｄ　ＸＭＬ）　ｉＳ　ａ　ｎｅｗ　ｃｏｎｃｅｐｔ　ｆｏｒ　ｗｅｂ　ａｐｐｌｉｃａｔｉｏｎ　ｄｅｖｅｌｏｐｍｅｎｔ・Ｉｔ　

ｃｏｍｂｉｎｅｓ　ａ　ｎｕｍｂｅｒ　ｏｆ　ｅｘｉｓｔｉｎｇ　ｔｅｃｈｎＯｌＯｇｉｅｓ　ｔｏ　ｂｕｉ　Ｉｄ　ｍｏｒｅ　ｄｙｎａｍｉＣ　ａｎｄ　ｓｅｎｓｉｔｉｖｅ　ｗｅｂ　ａｐｐｌｉｃａｔｉｏｎｓ．Ｔｈｅ　ｐａｐｅｒ　

ｉｎｔｒｏｄｕｃｅｓ　Ａｊａｘ’Ｓ　ｍａｊｏｒ　ｔｅｃｈｎｏｌｏｇｉｅｓ．ａｎｄ　ｔａｋｅｓ“Ｓｅｃｔｏｒｓ’Ｐｅｒｆｏｒｍａｎｃｅ　Ｍａｎａｇｅｍｅｎｔ’’ａｓ　ｔｈｅ　ｅｘａｍｐｌｅ　ｔｏ　ｄｉｓｃｕｓｓｅｄ　

Ａｊａｘ’Ｓ　ａｐｐｌ　ｉｃａｔｉｏｎｓ　ｉｎ　ｔｈｅ　ｗｅｂ　ｄｅｖｅｌｏｐｍｅｎｔ．　

Ｋｅｖｗｏｒｄｓ：ＡＪＡＸ；×ＭＬＨｔｔｐＲｅｑｕｅｓｔ；ＸＭＬ；Ｗｅｂ　Ｄｅｖｅｌｏｐｍｅｎｔ　

Ｏ引言　

１．１　ＡＪＡＸ的工作原理　

目前，编写应用程序时有两种基本的选择：　

①桌面应用程序；　

②Ｗｅｂ应用程序。　

在传统的浏览器与服务器的交互方式中，采用同步方　

式，由用户触发一个Ｈｔｔｐ请求到服务器，服务器对其进行处　

理后再返回一个新的Ｗｅｂ页到浏览器。每次应用的交互都需　

要向服务器发送请求，应用的响应时间就依赖于服务器的响　

应时间。当服务器正在处理的时候，用户能做的只是等待，　

这样，不会产生很好的用户体验；而在前后两个页面中的大　

部分ＨＴＭＬ代码往往是相同的，也浪费了许多带宽。传统的　

其中桌面应用程序通常需要完全安装到您的计算机上，　

并在您的计算机上运行。Ｗｅｂ应用程序运行在Ｗｅｂ服务器　

上，只需通过Ｗｅｂ浏览器访问。　

不过，比这更为重要的是，应用程序的运行以及交互。　

桌面应用程序一般很快，具有漂亮的用户界面和较好的动态　

性，基本上不需要等待。另一方面，Ｗｅｂ应用程序是现在的　

潮流，它们提供了在桌面上不能实现的服务（比如电子购物、　

网上书店）。但是，伴随着Ｗｅｂ的强大而出现的是等待等待　

服务器响应，等待屏幕刷新，等待请求返回和生成新的页面。　

Ｗｅｂ应用程序所提供的体验和用户从桌面应用程序所得到的　

体验之间，产生了巨大的差距。　

ＡＪＡＸ的出现，正在缩小这两者之间的差距，成为建立　

Ｗｅｂ应用的新途径。　

１　ＡＪＡＸ技术相关　

ＡＪＡＸ是由Ａｄａｐｔｉｖｅ　Ｐａｔｈ公司的Ｊｅｓｓｅ　Ｊａｍｅｓ　Ｇａｒｒｅｔｔ　

图一传统的Ｗｅｂ应用模型（同步）　

使用ＡＪＡＸ后，相当于在客户端和服务器之间加了一个中　

间层——ＡＪＡｘ引擎。这样，并不是所有的用户请求都提交　

给服务器。一些数据的验证和处理由ＡＪＡＸ自己来做，只有确　

实需要从服务器读取新数据时，才由客户端通过ＪａｖａＳｃｒｉｐｔ　

命名的，系“异步ＪａｖａＳｃｒｉｐｔ和ＸＭＬ（ＡｓｙｎｃｈｒｏｎｏｕＳ　

ＪａｖａＳｃｒｉｐｔ　ａｎｄ　ＸＭＬ）”的英文缩写。　

维普资讯

调用ＡＪＡＸ引擎，向服务器端发出Ｈｔｔｐ请求，但它并不等待　

请求的响应，用户可以继续浏览或交互。当服务端的数据以　

ＸＭＬ形式返回时，ＡＪＡＸ引擎接收数据，并指定ＪａｖａＳｃｒｉｐｔ函　

数来完成相应的处理或页面的更新，而不是刷新整个页面，　

从而实现用户操作与服务器响应的异步化。最重要的是，Ｗｅｂ　

站点看起来是即时响应的，而服务器和浏览器之间交换的数　

据却大量减少，这在很大程度上缓解了服务器的数据处理压　

力。ＡＪＡＸ的Ｗｅｂ应用模型如图二所示。　

图二ＡＪＡＸ的Ｗｅｂ应用模型（异步）　

１．２　ＡＪＡＸ技术组成　

其实ＡＪＡＸ中所谓“ＡＪＡＸ引擎”，不是一个技术，它实际　

上是几种技术的组合，每种技术都有其独特之处，合在一起　

就成了一个功能强大的新技术。ＡＪＡＸ包括：　

・

基于标准化的ＸＨＴＭＬ和ＣＳＳ；　

・

通过ＤＯＭ实现动态显示和交互；　

・

通过ＸＭＬ和ＸＳＬＴ来进行数据交换和处理；　

・

ｘＭＬＨｔｔｐＲｅｑｕｅｓｔ通过异步方式获取数据；　

・

使用ＪａｖａＳｃｒｉｐｔ来整合以上所有的技术。　

一

般只需要使用到ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ、ＤＯＭ、ＸＭＬ、　

Ｊａ　ｖａＳ　Ｃ　ｒｉ　Ｐｔ及ｃ　ＳＳ，就可以完成异步交互了，其中　

ｘＭＬＨｔｔｐＲｅｑｕｅｓｔ是关键。　

（１）ｘＭＬＨｔｔｐＲｅｑｕｅｓｔ是ＸＭＬＨｔｔｐ组件的对象，是ＡＪＡＸ　

技术中最核心的技术。ＡＪＡｘ的无刷新更新页面特点，主要得　

益于ｘＭＬＨＴＴＰＲｅｑｕｅｓｔ对象。　

①ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ对象的常用属性有：　

ｏｎＲｅａｄｙｓｔａｔｅｃｈａｎｇｅ：状态变化时触发的事件句柄；

ＡＪ＞×的原理及其在、／＼，①　开发中的应用　

ＲｅａｄｙＳｔａｔｅ：当前状态（其中：４＝完成）；　

ｒｅｓｐｏｎｓｅＴｅｘｔ：以字符串形式返回响应；　

ｒｅｓｐｏｎｓｅＸＭＬ：以ＸＭＬ文档对象返回响应；　

ｓｔａｔｕｓ：服务器返回的状态码（例如４０４表示“文件未　

找到”，２００表示“成功”）；　

ｓｔａｔｕｓＴｅｘｔ：服务器返回的状态信息（例如“文件未找　

到”，“成功”）。　

②ｘＭＬＨｔｔｐＲｅｑｕｅｓｔ对象的常用方法有：　

ａｂｏｒｔ（）：停止当前请求；　

ｏｐｅｎ（“ｍｅｔｈｏｄ”，“ＵＲＬ”）：建立对服务器的调用；　

ｓｅｎｄ（ｃｏｎｔｅｎｔ）：向服务器发送请求；　

ｓｅｔＲｅｑｕｅｓｔＨｅａｄｅｒ（“ｈａｅｄｅｒ”，“ｖａｉｕｅ”）：设置ｈｅａｄｅｒ手Ｆ　

和请求一起发送。　

（２）ＤＯＭ（Ｄｏｃｕｍｅｎｔ　Ｏｂｊｅｃｔ　Ｍｏｄｅ１）为操作ＨＴＭＬ或ＸＭＬ　

文档对象的节点结构提供了一组方法。通过调用ＤＯＭ方法，　

可以创建、定义ＨＴＭＬ元素，并把元素附加到文档或者现有的　

元素中，从而实现ＨＴＭＬ的即时生成。在ＡＪＡＸ技术中当客户　

发出的异步请求得ＮＮ务端响应时，由客户端ＪａｖａＳｃｒｉｐｔ调　

用ＤＯＭ方法对页面元素进行修改，从而动态控制页面的显示　

内容。　

（３）ＸＭＬ是可扩展标记语言（ｅＸｔｅｎｓｉｂ１ｅ　Ｍａｒｋｕｐ　

Ｌａｎｇｕａｇｅ）的简称。它可以规范地定义结构化数据，使网上　

传输的数据和文档符合统一的标准。ＸＭＬｉ表述的数据和文档，　

可以很容易地让所有程序共享。　

（４）ＪａｖａＳｃｒｉｐｔ一直被定位为客户端的脚本语言，用　

来实现表单数据的校验和网页特效的处理。在ＡＪＡＸ技术中，　

一

方面，通过ＪａｖａＳｃｒｉｐｔ函数来操作ＸＭＬＨｔｔｐＲｅｑ．ｕｅｓｔ，访问　

应用服务器上应甩另一方面，当访问结果通过服务端以ＸＭＬ　

形式返回时，可以通过ｘＭＬＨｔｔｐＲｅｑｕｅｓｔ的ＲｅｓｐｏｎｓｅＸＭＬ文档　

对象读取数据。　

２　ＡＪＡＸ的应用实例　

下面这个实例来源于一个实际的项目：××部门绩效　

管理，使用．Ｎｅｔ开发。以绩效指标的分类浏览为例，来简述　

ＡＪＡＸ的应用。单击指标类型标签或分页连接，无须页面提交，　

就会加载此类的指标，如图三、四所示。　

图三指标数据加载中效果图　

０　～　篇怒　ｔ｜２｜０　ｓ　

睁　舾＿５　ｉ・ｌ＿ｅ　ｔ；　

每　鲤ｌ　睁　０　０　１＿　ｌ＿一ｌｌ　

嘲疆＿羲棚　明螂　棚啪蛀果＿１２　ｚ　。　

主　姆蚋井＿凑　＿ｅ　ｓ—ｓ　

图四　指标数据加载完毕效果图　

２．１服务器端处理请求的部分代码　

／／读取所需的指标信息　

ＤＡ＝ｎｅｗ　ｓｑ１ＤａｔａＡｄａｐｔｅｒ（Ｓｑｌ，Ｃｏｎｎ）；　

ＤＡ．Ｆｉｌｌ（ＤＳ，“Ｍａｒｋ“）；　

Ｄａｔ￡ＬＶｉｅｗ　ＤＶ－－ｎｅｗ　ＤａｔａＶｉｅｗ（ＤＳ．Ｔａｂｌｅｓ　Ｍａｒｋ“］）；　

／／将指标信息转化为ＸＭＬ　

Ｓ　ｔ　ｒ　ｘＭＬ．ＡＰ　Ｐ　ｅ　ｎ　ｄ（“＜？Ｘｍ　１　ｖ　ｅ　ｒ　ｓ　ｉ　ｏ　ｎ＝＼”１．０＼”　

ｅｎｃｏｄｉｎｇ＝＼“ＧＢ２３１２＼ｌｔ？＞“）；　

维普资讯

ＳｔｒＸＭＬ．Ａｐｐｅｎｄ（”＜Ｄａｔａｓｅｔ＞”）；　

Ｓｔｒ＝Ｓｔｒ＋”＜ＴＤ＞”十Ｔ．ｇｅｔＥｌｅｍｅｎｔｓＢｙＴａｇＮａｍｅ（”ＩＤ”）［０］．　

ｆｏｒ（ｉ－－Ｏ；ｉ＜ＤＶ．Ｃｏｕｎｔ；ｉ＋＋）　

ｆｉｒｓｔＣｈｉｌｄ．ｄａｔａ＋”＜／ＴＤ＞”；　

｛ＳｔｒＸＭＬ．Ａｐｐｅｎｄ（”＜Ｄａｔａ＞”）；　

ＳｔｒＸＭＬ．Ａｐｐｅｎｄ（”＜ＩＤ＞”十ＤＶ［ｉ］［Ｉ］十”＜／ＩＤ＞”）；　

Ｓｔｒ：Ｓｔｒ十”＜／ＴＲ＞”；’　

Ｓｔｒ＝Ｓｔｒ十”＜／ＴＡＢＬＥ＞’’；　

ＳｔｒＸＭＬ．Ａｐｐｅｎｄ（”＜／Ｄａｔａ＞”）；）　

／／将生成的Ｈｔｍｌ加入到页面中　

ＳｔｒＸＭＬ．Ａｐｐｅｎｄ（”＜／Ｄａｔａｓｅｔ＞”）；　

ｇｅｔＯｂｊｅｃｔ（　ｄａｔａ’）．ｉｎｎｅｒＨＴＭＬ＝Ｓｔｒ；　

ｆｆ输　ＸＭＬ　

）　

Ｒｅｓｐｏｎｓｅ．ＣｏｎｔｅｎｔＴｙｐｅ＝”ｔｅｘｔ／ｘｍｌ”；　３结束语　

Ｒｅｓｐｏｎｓｅ．Ｗｒｉｔｅ（ＳｔｒＸＭＬ）；　

ＡＪＡＸ带给我们的不仅仅是技术，更多的是以人为本的一　

２．２客户端的部分ＪａｖａＳｃｒｉｐｔ代码　种服务理念。不仅缓和了资源矛盾，也带来了丰富的用户体　

／／单击标签，触发以下ＪａｖａＳｃｒｉｐｔ代码　

验。　

ｆｕｎｃｔｉｏｎ　ａｊａｘＲｅａｄ（ｍ）　

在采用ＡＪＡＸ的开发上面，Ｇｏｏｇｌｅ公司所有的主要产品　

｛ｇｅｔＯｂｊｅｃｔ（’ｄａｔａ’）．ｉｎｎｅｒＨＴＭＬ＝”正在加载…　

都用了这项技术一Ｇｍａｉｌ、Ｇｏｏｇｌｅ　Ｇｒｏｕｐｓ、Ｇｏｏｇｌｅ　Ｓｕｇ—　

／／创建ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ对象　

ｇｅｓｔ和Ｇｏｏｇｌｅ　Ｍａｐｓ。在“Ｇｏｏｇｌｅ　Ｓｕｇｇｅｓｔ”中，按照你的　

ｉｆ（ｗｉｎｄｏｗ．ｘＭＬＨｔｔｐＲｅｑｕｅｓｔ）／／ｊ乍ＩＥ　

输入显示建议条目的更新速度，几乎是立即更新的。再看看　

｛ｒｅｐ＝ｎｅｗ　ｘＭＬＨｔｔｐＲｅｑｕｅｓｔ　０；）　

”Ｇｏｏｇｌｅ　Ｍａｐｓ”，利用鼠标来放大、缩小地图，几乎是立即　

ｅｌｓｅ　ｉｆ（ｗｉｎｄｏｗ．Ａｃｔｉｖｅｘ０ｂＪｅｃｔ）／／ＩＥ　

响应的，不用等待页面刷新。还有微软公司最近发布的Ｌｉｖｅ　

｛ｒｅｐ＝ｎｅｗ　Ａｃｔｉｖｅｘ０ｂＪｅｃｔ（”Ｍｉｃｒｏｓｏｆｔ．ＸＭＬＨＴＴＰ”）；）　

系列服务，像Ｌｉｖｅ　Ｍａｉｌ、Ｖｉｒｔｕａｌ　Ｅａｒｔｈ业务中也应用了　

ｅｌｓｅ｛ｒｅｔｕｒｎ；）　

ＡＪＡＸ技术。　

ｖａｔ　Ｕｒｌ＝”ｄａｔａ．ａｓｐｘ？ＩＤ＝”＋ｍ；／／请求的ＵＲＬ　借助于Ｗｅｂ上强有力的数据服务，再结合丰富的ＡＪＡＸ　ＵＩ　

ｒｅｐ．ｏｐｅｎ（”ＧＥＴ”，Ｕｒｌ，ｔｒｕｅ）；／／ｔｒｕｅ：异步方式　

的力量，我们有理由相信，基于Ｗｅｂ的应用程序将会有更广　

ｒｅｐ．ｏｎｒｅａｄｙｓｔａｔｅｃｈａｎｇｅ：Ｈａｎｄｌｅｓｔａｔｅｃｈａｎｇｅ；／／指定状态　阔的前景。　

变化时触发的事件句柄　

ｒｅｐ．ｓｅｎｄ（　）；　／／发送信息　

参考文献　

）　

【１　Ｊ　Ｊｅｓｓｅ　Ｊａｍｅｓ　Ｇａｒｒｅｔｔ．ＡＪＡＸ：Ａ　Ｎｅｗ　Ａｐｐｒｏａｃｈ　ｔｏ　

ｆｕｎｃｔｉｏｎ　ＨａｎｄｌｅＳｔａｔｅＣｈａｎｇｅ（）　

Ｗｅｂ　Ａｐｐｌｉｃａｔｉｏｎｓ［ＥＢ／ＯＬ］．ｈｔｔｐ：／／ｗｗｗ．ａｄａｐｔｉｖｅｐａｔｈ．ｃｏｍ／　

｛ｉｆ（ｒｅｐ．ｒｅａｄｙＳｔａｔｅ＝：４）　／／完成　

ｐｕｂｌｉｃａｔｉｏｎｓ／ｅｓｓａｙｓ／ａｒｃｈｉｖｅｓ／０００３８５．ｐｈｐ．　

｛ｉｆ（ｒｅｐ．ｓｔａｔｕｓ＝２００）／／返回正常　

［２Ｊ　Ｄｙｎａｍｉｃ　Ｈｔｍｌ　ａｎｄ　ＸＭＬ：Ｔｈｅ　Ｘ￣ＨｔｔｐＲｅｑｕｅｓｔ　Ｏｂｊｅｃｔ　

｛ｐｒｏｃｅｓｓＸＭＬ（ｒｅｐ．ｒｅｓｐｏｎｓｅＸＭＬ）；／／处理）　

［ＥＢ／ＯＬ］．ｈｔｔｐ：／／ｄｅｖｅｌｏｐｅｒ．ａｐｐｌｅ．ｃｏｍ／ｉｎｔｅｒｎｅｔ／　

Ｅｌｓｅ　／／出错　ｗｅｂｃｏｎｔｅｎｔ／ｘｍ１　ｈｔｔｐｒｅｑ．ｈｔｍ１．　

｛ｇｅｔＯｂｊｅｃｔ（　ｄａｔａ’）．ｉｎｎｅｒＨＴＭＬ＝”抱歉，装载数据失败．原　

［３］Ｄａｖｉｄ　Ｆｌａｎａｇａｎ．ＪａｖａＳｃｒｉｐｔ权威指南［Ｍ］．北京：　

因：”十ｒｅｐ．ｓｔａｔｕｓＴｅｘｔ；）　

机械工业出版社，２００３．　

）　一　・　

［４］曹锰，舒新峰．ｃ牟与ＡＳＰ．ＮＥＴ程序设计［Ｍ］．西安：　

）　

西安交通大学出版社，２００３．　

ｆｕｎｃｔｉｏｎ　ｐｒｏｃｅｓｓＸＭＬ（ｏｂｊ）　

｛／／生成Ｈｔｍｌ代码　

作者简介　

ｖａｔ　Ｓｔｒ＝”＜ＴＡＢＬＥ＞”：　

王义勇（１９８２一），男，湖北随州人，东华理工学院硕士研　

ｖａｔ　Ｄｏｃ＝ｏｂｄ．ｇｅｔＥｌｅｍｅｎｔｓＢｙＴａｇＮａｍｅ（”Ｄａｔａ”）；　

究生，主要研究方向：计算机网络与分布式数据库；　

ｆｏｒ（ｖａｒ　ｉ＝Ｏ；ｉ＜Ｄｏｃ．１ｅｎｇｔｈ；ｉ＋＋）　

何月顺（１９７１一），男，湖南道县人，副教授，硕士生导师，　

｛ｖａｔ　Ｔ＝Ｄｏｃ［ｉ］；　

主要研究方向：数据库应用、数据挖掘等。　

Ｓｔｒ＝Ｓｔｒ十”＜ＴＲ＞”：