admin 管理员组

文章数量: 1086019


2024年4月13日发(作者：eclipse上一步)

２０１０牟第１期　

中图分类号：ＴＰ３９３．０１　文献标识码：Ｂ　文章编号：１００９—２５５２（２０１０）０１—０１０８—０３　

Ａｊａｘ技术与传统Ｗｅｂ应用的比较　

孙启良　

（济南大学理学院，济南２５００２２）　

摘要：Ａｊａｘ技术是浏览器与服务器交互方式的巨大改进，是Ｗｅｂ２．０时代的重要标志。Ａｊａｘ技　

术利用客户端闲置的处理能力，减轻了服务器和带宽的负担，使用户交互变得流畅而连续。介　

绍了Ａｊａｘ的工作原理，基本特点以及与传统ｗｅｂ应用的区别，并给出了一个Ａｊａｘ实例。　

关键词：ＨＴＭＬ；Ａｊａｘ；ＪＳＰ；ＪａｖａＳｃｒｉｐｔ　

Ｃｏｍｐａｒｉｓｏｎ　ｂｅｔｗｅｅｎ　Ａｊａｘ　ｔｅｃｈｎｏｌｏｇｙ　ａｎｄ　

ｔｒａｄｉｔｉｏｎａｌ　Ｗｅｂ　ａｐｐｌｉｃａｔｉｏｎｓ　

ＳＵＮ　０ｉ．１ｉａｎ￣　

（Ｓｄｌｏｏｌ　ｏｆＳｃｉｅｎｃｅ，Ｊ＇ｍａｎＵｎｉｖｅｒｓｉｔｙ，Ｊｉｍ５００２２２，Ｃｈｉｎａ）　

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

ｉｎｄｉｃａｔｏｒ　ｏｆ　Ｗｅｂ２．０　ｅｒａ．Ｉｔ　ＵＳｅＳ　ｔｈｅ　ｉｄｌｅ　ｐｒｏｃｅｓｓｉｎｇ　ｐｏｗｅｒ　ｏｆ　ｃｌｉｅｎｔ　ｔｏ　ｒｅｄｕｃｅ　ｔｈｅ　ｂｕｒｄｅｎ　ｏｎ　ｓｅｒｖｅｌ￣ａｎｄ　

ｂａｎｄｗｉｄｔｈ，ａｎｄ　ｈｅｎ　ｔｈｅ　ｕｓｅｒ　ｔｉｎｔｅｒａｃｔｉｏｎ　ｈａｓ　ｂｅｃｏｍｅ　ｓｍｏｏｔｈ　ａｎｄ　ｃｏｎｔｉｎｕｏｕｓ．Ｔｈｉｓ　ｐａｐｅｒ　ｉｎｔｒｏｄｕｃｅｓ　ｔｈｅ　ｗｏｒｋｉｎｇ　

ｐｒｉｎｃｉｐｌｅ　ｏｆ　Ａｊａｘ　ａｎｄ　ｔｈｅ　ｄｉｆｅｒｅｎｃｅ　ｂｅｔｗｅｅｎ　ｔｒａｄｉｔｉｏｎａｌ　Ｗｅｂ　ａｐｐｌｉｃａｔｉｏｎｓ　ａｎｄ　Ａｊａｘ．Ｆｉｎａｌｌｙ，ａ　ｓｅｃｔｉｏｎ　ｏｆ　ｔｈｅ　

ｓｏｕｒｃｅ　ｃｏｄｅ　ｉｓ　ｇｉｖｅｎ．　

Ｋｅｙ　ｗｏｒｄｓ：ＨＴＭＬ；Ａｊａｘ；ＪＳＰ；ＪａｖａＳｃｒｉｐｔ　

０　引言　

ｊａＡｘ即异步ＪａｖａＳｃｒｉｐｔ和ＸＭＬ，是Ｗｅｂ２．０中的　

一

１　Ａｊａｘ的工作原理　

与传统的ｗｅｂ应用不同，Ａｊａｘ采用异步交互过　

程。Ａｊａｘ在用户与服务器之间引入一个中间介质，　

消除了网络交互过程中的处理、等待等缺点。相当　

于在用户和服务器之间增加了一个中间层，使用户　

操作与服务器响应异步化。这样把以前的一些服务　

器负担的工作转移到客户端，利用客户端闲置的处　

理能力，减轻服务器和带宽的负担，从而达到节约　

ＩＳＰ的空间及带宽租用成本的目的。　

项关键技术，它允许把用户和Ｗｅｂ页面间的交互　

传统的Ｗｅｂ应用允许用户填写表单（ｆｏｒｍ），当　

与Ｗｅｂ浏览器和服务器问的通信分离开来。　

提交表单时就向Ｗｅｂ服务器发送一个请求。服务　

器接收并处理传来的表单，然后返回一个新的网页。　

这个做法浪费了许多带宽，因为在前后两个页面中　

的大部分Ｉ－ＩＴＭＬ代码往往是相同的。由于每次应用　

的交互都需要向服务器发送请求，应用的响应时间　

就依赖于服务器的响应时间。这导致了用户界面的　

响应比本地应用慢得多。如果严重超过响应时间，　

服务器干脆告诉用户页面不可用。另外，某些时候，　

如果只是想改变页面一小部分的数据，那么如何不　

必重新加载整个责面，减少用户等待的时间是亟待　

解决的问题。现在，这个问题基本得到了解决，除了　

更优秀的程序设计、编码优化和调整服务器之外，还　

可以采用Ａｊａｘ技术。　

一

传统Ｗｅｂ应用程序和Ａｊａｘ程序工作原理如图１　

所示。　

图１左侧图形为传统Ｗｅｂ程序工作原理，此时　

服务器端承担大量的工作，客户端只有数据显示的　

功能。右侧图形为Ａｊａｘ应用程序工作原理图，客户　

收稿日期：２００９—０７—１３　

作者简介：孙启良（１９８０一），男，讲师，在职硕士研究生，主要研究方　

向为计算机网络和计算机体系结构。　

】０８—　

三　

古　

请　数　

求　据　

Ａｊａｘ￣ｌ擎　

ｌ　＋　

耋　釜　

橐　

Ｉ　Ｉ　

　ｌ服务器　

●　｝　

　Ｉ数据层　

图１传统Ｗｅｂ和Ａｊａｘ工作原理　

端界面和Ａｊａｘ引擎都是在客户端运行，这样大量的　

服务器工作可以在Ａｊａｘ引擎处实现。Ａｊａｘ应用程　

序的使用，实现了所谓的“富客户端”　１］。　

２　Ａｊａｘ的基本特征　

２．１一个页面就是一个应用程序　

传统的Ｗｅｂ应用程序一般不只一个页面，用户　

的一次操作往往会带其进入另一个页面。而对于典　

型的Ａｊａｘ应用程序，用户无须在不同的页面中切　

换，只要停留在一个页面中，由ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ对象　

从服务器取得数据，然后由ＪａｖａＳｃｒｉｐｔ操作页面上的　

元素并更新其中内容。　

２．２浏览器中的是应用而不是内容　

在传统的基于页面的Ｗｅｂ应用中，浏览器扮演　

着哑终端的角色。它对用户处于操作流程哪一阶段　

一

无所知。这些信息全部保存在服务器上。Ａｊｘａ则　

不同，它把一部分应用逻辑从服务器端移到了浏览　

器端。用户登录后，服务器交付一个客户端给浏览　

器。这个应用可以独立处理很多用户交互，对于自　

己无法独立处理的交互，应用会以后台方式发送请　

求给服务器，而不会打断用户的操作流程，用户登录　

的时候，服务器交付给浏览器一个复杂得多的文档，　

其中包含大量的ＪａｖａＳｃｒｉｐｔ代码。这个文档将会在　

整个会话的生命周期内与用户相伴。　

２．３服务器交付的是数据而不是内容　

在传统的Ｗｅｂ应用中，服务器在每个步骤都需　

要把ｈｔｍｌ文件（模板文件、导航列表和页面布局内　

容）和数据混合发送给浏览器。而在Ａｊａｘ中，只需　

将服务端处理请求时产生的数据发回给客户端就可　

以了。Ａｊａｘ应用可以通过多种方式来发送数据。例　

如，返回一段ＪａｖａＳｃｒｉｐｔ代码、一段纯文本或者一小　

段ＸＭＬ文档。但是，无论返回数据采用何种格式，　

这些方式所传输的数据量都要比传统的Ｗｅｂ应用　

中将所有信息返回的方式少得多＿２］。　

２．４用户交互变得流畅而连续　

在传统的Ｗｅｂ应用中，从客户端向服务器端传　

递数据，通常采用两种形式：一种是超链接，一种是　

表单。客户端向服务器端提交一个页面请求，一般　

情况下此过程需要占用一段时间。在此时间段内，　

即当一个页面已提交而下一个页面还没有显示出来　

的时候，浏览器实际上处于等待的状态。浏览器甚　

至还会允许用户单击一些链接。但这些单击可能会　

导致一些不可预料的结果，甚至破坏服务器端的操　

作流程，用户通常应该等到页面刷新完成，才能继续　

新的操作。此时Ｗｅｂ应用是停顿的，不能连续工　

作。页面请求不仅仅是所需的数据，而且是另一个　

完整的ＨＴＭＬ页面。因此当Ｗｅｂ浏览器用新的ＨＴ－　

ＭＬ页面重绘时，可能会看到闪烁或抖动　Ｊ。　

而在Ａｊａｘ技术实现的Ｗｅｂ应用中，除了第一次　

页面初始化需要从服务器下载大量信息之外，其它　

情况下都没有页面停顿的情况出现。此时再向服务　

器提交请求，不会影响当前页面的其它操作。因为　

提交请求是通过异步方式发送数据的，并且用户请　

求的不是整个ＨＴＭＬ页面，只是一些需要的数据信　

息。通过Ａｊａｘ技术，用户在进行请求完毕后，可以　

继续进行其它的操作，如查看信息等。这样大量的　

被浪费在页面刷新时的时间被利用了起来，此时整　

个网站的操作将是不可间断的，即流畅的。　

ｊＡａｘ的另一个优点可以对丰富的用户操作事件　

进行捕获。类似于拖曳这样的复杂ｕＩ概念也不再　

是遥不可及的。这使得Ｗｅｂ应用的ｕＩ体验可以全　

面提升到近乎与桌面应用的ｕＩ组件相媲美的高度。　

例如，Ｇｏｏｇｌｅ中，当用户自搜索框输入一些字符的时　

候，应用从服务器取回与用户已键人字符串相似的　

搜索条目（根据全世界其他人的搜索），并且显示在　

输入框下方的下拉列表中。　

３　Ａｊａｘ异步请求实例　

首先创建眼务器代码，打开记事本，输入下列代码：　

＜％＠ｐａｇｅ　ｃｏｎｔｅｎｔＴｙｐｅ＝”ｔｅｘｔ／ｈｔｍｌ：ｃｈａｒｓｅｔ＝　

ｇｂ２３１２　％＞　

＜％＠ｐａｇｅ　ｉｍｐｏｒｔ＝＂ｊａｖａ．ｕｔｉｌ．＊”％＞　

＜％　

・－－——

１０９・－－——　

图２程序运行　

Ｄａｔｅ　ｄ＝ｎｅｗ　Ｄａｔｅ（）；　

ｏｕｔ．ｐｒｉｎｔ（ｄ）；　

％＞　

将上述代码保存，名称为ｒａｎ．ｊｓｐ。在文件中，主要　

返回当前日期的中文格式的时间。将该文件直接保存　

Ｔｏｍｃａｔ安装目录下，即Ｃ：＼Ｔｏｍｃａｔ　６．０＼ｗｅｂａｐｐｓ＼下。　

现在创建客户端代码，打开记事本，输入下列代码：　

＜ｈｔｍｌ＞　

＜ｈｅａｄ＞　

＜ｔｉｔｌｅ＞Ａｊａｘ＜／ｔｉｄｅ＞　

＜ｓｃｒｉｐｔ　ｔｙｐｅ＝”ｔｅｘｔ／ｊａｖａｓｃｒｉｐｔ＇　＞　

ｖａｒ　ｘｍｌＨｔｔｐ；　

ｆｕｎｃｔｉｏｎ　ｃｒｅａｔｅＸＭＬＨｔｔｐＲｅｑｕｅｓｔ（）｛　

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

ｘｍｌＨｔｔｐ＝ｎｅｗ　ＡｃｔｉｖｅＸＯｂｊｅｃｔ（”Ｍｉｃｒｏｓｏｆｔ．　

ＸＭＬＨＴＩ￣　）；／／￣１建ＸＭＬＨｔｔｐＲｅｑｕｅｔ对象　

｝　

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

ｘｍｌＨｔｔｐ＝ｎｅｗ　ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ（）；／／创建　

ＸＭＬＨｔｔｐＲｅｑｕｅｔ对象　

｝　

｝　

ｆｕｎｃｔｉｏｎ　ｓｔａｒｔＲｅｑｕｅｓｔ（）｛　

ｃｒｅａｔｅＸＭＬＨｔｔｐＲｅｑｕｅｓｔ（）；　

ｘｍｌＨｔｔｐ．ｏｎｒｅａｄｙｓｔａｔｅｃｈａｎｇｅ＝ｈａｎｄｌｅＳｔａｔｅＣｈａｎｇｅ；　

ｘｍｌＨｔｔｐ．ｏｐｅｎ（”ＧＥＴ＇，”ｒａｎ．ｊｓｐ”，ｔｒｕｅ）；　

ｘｍｌＨｔｔｐ．ｓｅｎｄ（ｎｕｌ１）；　

｝　

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

ｉｆ（ｘｍｌＨｔｔｐ．ｒｅａｄｙＳｔａｔｅ＝＝４）；　

ｉｆ（ｘｍｌＨｔｔｐ．ｓｔａｔｕｓ＝＝２００）｛　

ｄｏｃｕｍｅｎｔ．ｇｅｔＥｌｅｍｅｎｔＢ）ｒＩｄ（　ｒｅｓ　）．ｉｎｎｅｒＨＴＭＬ＝ｘ１／ｌ—　

ＩＨｔｔｐ．ｒｅｓｐｏｎｓｅＴｅｘｔ；　

一

ｌ　１（１一　

图３程序运行结果　

｝　

｝　

｝　

＜／ｓｃｒｉｐｔ＞　

＜／ｈｅａｄ＞　

＜ｂｏｄｙ＞　

＜ｆｏｒｍ　ａｃｔｉｏｎ＝　＃”＞　

＜ｉｎｐｕｔ　ｔｙｐｅ＝”ｂｕａｏｎ＇　ｖａｌｕｅ：”获取当前时　

间”ｏｎｃｌｉｃｋ＝　ｓｔａｒｔＲｅｑｕｅｓｔ（）；”／＞　

＜／ｆｏｒｍ＞　

＜ｄｉｖ　ｉｄ＝　ｒｅｓ＂＞＜／ｄｉｖ＞　

＜／ｂｏｄｙ＞　

＜／ｈｔｍｌ＞将上述代码保存，名称为ａｊａｘ．ｈｔｍｌ，程　

序运行如图２，运行结果见图３。　

在该文件中，函数ｃｒｅａｔｅＸＭＬＩ－ｔｔｔｐＲｅｑｕｅｓｔ（）主要　

用来创建ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ对象，ｓｔａｒｔＲｅｑｕｅｓｔ（）函数　

主要作用是向服务器端发送请求信息，其方式为　

ｇｅｔ，发送信息为空，参数值是通过ＵＲＬ传递到服务　

端的。函数ｈａｎｄｌｅＳｔａｔｅＣｈａｎｇｅ（）主要用来处理从服　

务器端传递的信息，并做出设置。　

参考文献：　

［１］梁文新，宋强，王占中．　＋ＪＳＰ网站开发从入门到精通［Ｍ］．　

北京：清华大学出版社，２ＯＯ８：１３５—１３６．　

［２］孙鑫．ＳｅｒｖｌｅｆｆＪＳＰ深入详解——基于Ｔｏｍｃａｔ的Ｗｅｂ开发［Ｍ］．北　

京：电子工业出版社，２００８：３—５．　

［３］谢希仁．计算机网络［Ｍ］．北京：电子工业出版社，２００８：２３６—　

２３９．　

［４］ＪａｖａＳｃｒｉｐｔ高级程序设计［Ｍ］．Ｎｉｃｈｏｌａｓ　Ｃ．Ｚａｋａｓ．曹力，张欣，等　

译．北京：人民邮电出版社，２００６：１３８—１４１．　

［５］吴吉义．Ａ　Ｎｅｗ　Ａｐｐｒｏａｃｈ　ｔｏ　Ｗｅｂ　Ａｐｐｌｉｃａｔｉｏｎｓ　ｗｉｔｈ　Ａｊａｘ［Ｊ］．￣ｔＪ　ＪＩ大　

学学报：工程科学版，２００７，Ｓ１：１５７—１６１．　

［６］田原．基于Ａｊａｘ的教学Ｗｅｂ应ｆ｝ｊ［Ｊ］．辽宁工程技术大学学报，　

２００７，２６（５）：７３７—７３９．　

【７］朱德利．Ｗｅｂ２．０的技术特点和信息传播思想［Ｊ］．现代情报，　

２００５，２．５（１２）：７４—７７．　

［８］游丽贞，郭宇春，李纯喜．Ａｊａｘ引擎的原理和应用［Ｊ］．微计算机　

信息，２００６，２２（６）：２０５—２０８．　

责任编辑：么丽苹　


本文标签： 用户 服务器 页面 应用 客户端

版权声明：本文标题：Ajax技术与传统Web应用的比较 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1712969696a614872.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。