admin 管理员组

文章数量: 1086019


2024年4月13日发(作者:drawrect)

维普资讯

刘近勇张建嵘:Aj…ax技术与Web应用_ ~_。。———1D一 

目嘲 

Aj ax技术与We b应用 

Ajax Technology and Web Application 

摘要 阐述了Ajax的基本概念、相关技术,探讨了基于A一 

刘近勇 jax技术的Web应用和传统Web应用的区别,介绍了Ajax应 

L/“Jinyong 

1997年毕业于北京邮电大学管理工程系。 

设计院工程师’主要从事计 

用的技术优势,同时也分析了一些基于Ajax技术的Web应用 

实例,最后对Ajax的几种竞争技术作了介绍。 

关键词 Ajax Web异步JavaScript xML 

Abstract The basic conception and the technologies of the Ajax 

张建嵘 are described,the diference between the Web application based 

Zhang Jianrong 

1997年毕业于北京邮电大学计算机系,现 

。 

on Ajax and the traditional Web application is discussed.the ad一 

vantages of Ajax is presented,and some Web application exam. 

les base ax are analyzed・ nall, seVeral com etlt Ve 

络安全:相 关工作分公 主要从事网 lP es based on AjaXare analyzed.FinallY,severalc。mPetitive 

technologies of Ajax are given. 

Keywords Ajax Web Asynchronous JavaScript XML 

0前言 

随着Internet的迅猛发展,人们期待着表现能 

力更加丰富、更加智能、交互式能力更强、响应更为 

迅速的Web应用。传统Web应用面临着Web新型 

程,就是“处理一等待一处理一等待”模式(如图1所 

示)。用户和应用程序交互的所有状态都存储在 

Web服务器上,用户在交互过程中看到的是一系列 

的页面,但每次页面的切换和数据更新都需要在服 

务器上走一个来回。这种模式,在页面内容较少或者 

服务器处理时间较短,页面和数据的更新比较及时 

时,用户尚可接受;但如果页面内容和数据量较大, 

传统Web应用的同步交互处理模式 

服务的冲击,用于显示文档内容的基本Web技术, 

在多交互式的、响应迅速且使用便捷(不需要本地安 

装)的新型Web应用需求方面,已经无法胜任,在这 

种情况下,涌现出许多新型Web应用技术,Ajax技 

术即是其中一种极大地发掘了Web浏览器潜力、较 

之传统Web应用有诸多优势的技术,它改变了传统 

Web的应用体验和编程模式,使得Web应用的功能 

和开发方式发生了根本性的变化,并逐渐成为企业 

应用开发的主流和首选。 

时间 

服务器 / \ / \ , 

//  谱\氯\  // 踺 谱\铺\  

1 Ajax应用与传统Web应用的区别 

传统Web应用程序采用的同步交互处理过 

窖 

客户端用户操作 用 用户操作 

U L 

用户操作 

图1传统Web应用程序模型 

49 

邮电设计技术第7期200Y年7月 

维普资讯

塑 匡 …… 

刘近勇张建嵘:Ajax技术与Web应用 

一 

0 

: 

圣 尽管用户只需要改变或者获取页面中的一部分数 

i.: 据,却不得不刷新整个页面,导致服务器响应时间较 

置 长、用户需要花较长时间等待“白屏”的消失和新页 

面的出现。 

而基于Ajax技术的Web应用,采用的是异步 

交互方式,在用户和服务器之间引入中间媒介,即用 

户的浏览器装载了用JavaSeript语言编写的Ajax引 

擎,负责转发用户界面和服务器之间的交互。Ajax 

引擎允许用户和应用系统之间的交互以异步方式进 

行,独立于用户与Web服务器之间的交互。基于 

ax技术的Web应用程序采用异步交互处理模式 

(如图2所示)。 

图2基于Ajax技术的Web应用程序模型 

在基于Ajax技术Web应用的异步交互处理过 

程中,用户登录页面后,服务器交付一个包含大量 

JavaSeript代码的客户端应用给浏览器,把一部分应 

用逻辑从服务器端移到浏览器端,用以独立处理很 

多的用户交互;对于无法独立处理的用户交互,如数 

据请求等,浏览器以后台方式发送给服务器,而不打 

断用户的操作流程。对于浏览器而言,浏览器中的是 

应用而不是内容,对于服务器而言,服务器交付的是 

数据而不是内容,服务器真正扮演起服务的角色,而 

不是包办一切,挡在用户前面,打断用户的操作,这 

就减少了用户的等待时间,使得用户的交互变得流 

畅而连续,提高了系统的可用性和效率。 

2 Ajax基本概念及相关技术 

Ajax是异步JavaSeript和XML的英文缩写,是 

种新的Web设计方法,其核心理念在于通过 

XMLHttpRequest对象发送异步请求。 

严格来讲,Ajax并不是一种技术,或者说不是 

单一的技术,而是将几种既有技术整合在一起,超越 

其原有的概念,形成了一种功能强大的用于Web开 

发的新技术。 

在基于Ajax的Web应用中,XMLHttpRequest 

对象和JavaScrip是Ajax应用所不可或缺的核心技 

术,除此之外,其他的几项技术尽管在某一个具体的 

Ajax应用中不一定都会用到,但也是非常有用和实 

现良好功能的Web应用程序行之有效的工具,具体 

的Web开发中是否使用取决于实际的Web应用需 

求。 

2.1 XMLHttpRequest对象 

XMLHttpRequest对象支持大量的H1丫rP调用 

定义,包括用来动态生成页面的可选查询字符串参 

数。基于Ajax的Web应用程序通过XMLHttpRe. 

quest对象以后台异步方式同服务器进行数据层面 

的交换,不用每次都向服务器提交数据处理,无需每 

次都刷新页面,既减轻了服务器的负担,又加快了响 

应速度、缩短了用户等候的时间,改善了用户的交互 

体验。 

2.2 JavaScript 

JavaSeript是一种在浏览器中被大量使用的、混 

合多重编程思想的通用编程语言。在浏览器中,通过 

JavaSeript引擎,页面开发者可以通过编程访问 

CSS、DOM、XMLHttpRequest对象,控制页面表现,包 

括定义一致的外观、改变和刷新用户界面、组织显示 

数据、处理用户基于鼠标和键盘的交互、与服务器进 

行异步通信从而实现在用户工作的同时提交用户的 

请求并获取数据。 

2.3 DOM 

文档对象模型(DOM)是一组API,供HTML和 

XML文件使用,使得网页和脚本程序之间实现信息 

沟通和交流。一个用HTML或者XHTML构建的网 

页可以看作是一组结构化的数据,这些数据被封装 

在DOM中,DOM提供了对于网页中各个对象的读 

写支持。 

使用DOM,结合JavaSeript脚本语言,可以实现 

对文档结构的操作,有效地改造在静态HTML中声 

明的结构;同时通过DOM也能够以编程方式修改 

维普资讯

国嬲

刘近勇

 

Q 

张建嵘:Aj——ax技术与Web应用 …一—————— ~ 

1 0 

:9 

元素的样式和改造定义在样式表中的结构。也就是 

3_2减轻服务器负担 量 

说,通过使用脚本修改DOM,AjaX应用程序可以在 

运行时改变用户界面,或者高效地重绘Web页面中 

的某个部分。 

2.4 CSS 

减轻服务器的负担分为两个层面:一是AjaX 

“按需获取数据”,页面根据用户的操作向服务器请 

求所需要的数据,可以最大程度地减少冗余请求,减 

少数据下载总量,从而减轻服务器的负担;二是A— 

jaX是一种富客户端技术,它把以前一些服务器负担 

的工作转移到了客户端,利用客户端的闲置能力来 

处理,减轻了服务器的数据处理负担。 

羹 

,萤 

层叠样式表(CSS)是Web设计沿用已久的技 

术,它负责定义Web页面中元素的视觉样式。CSS 

提供了几种定义各种视觉样式的方法,可以非常方 

便地设置在页面的各种元素上;通过它,可以定义比 

如颜色、边框、大小、透明度等明显的样式元素,也可 

以定义元素相互之间的布局和简单的交互功能,实 

现华丽的视觉效果。 

在AjaX应用中,通过CSS可以定义文档显示规 

则,由应用这些样式的Web页面来引用,从而实现 

简洁高效地用最少的代码动态为Web页面元素设 

置预先定义的外观。 

2.5 XML 

可扩展标记语言(XML)是用来描述数据结构的 

种语言,具有开放的、可扩展、可自描述特性的语 

言结构,已经成为网络中数据和文档传输的标准。 

XML使得某些结构化数据的定义更加容易,可以实 

现与其他应用程序问的数据交换。 

在AjaX应用中,XML主要用于处理从服务器 

返回的数据。服务器返回的数据可以是普通文本,也 

可以是XML形式的。XML的优点在于当数据结构 

比较复杂时,用XML的结构化方式来表示比较容 

易,另外XML也可以担当和其他API交互的数据 

中转介质;其缺点是会在一定程度上影响服务器的 

响应速度和处理效率,并且需要特定的输出视图而 

无法用文本表示。 

3 Ajax技术优势 

从上面的分析可以看出,基于AjaX技术的Web 

应用具有很多传统的Web应用无法比拟的优点,主 

要体现在下几个方面。 

3.1无需刷新页面 

Ajax使用XMLHttpRequest对象发送异步请求 

并且得到服务器响应,在不重载整个页面的情况下, 

通过JavaScript操作DOM更新页面。在读取数据 

时,不会出现用户等待“白屏”的现象。 

3.3减少带宽消耗 

在Ajax应用中,网络的通信量主要是集中在加 

载的前期,用户登录页面后,需要一次性将一个大而 

复杂的客户端交付浏览器。在此之后,与服务器的通 

信要比传统Web应用的效率高得多。基于AjaX的 

Web应用积累起来的通信流量要比基于页面的传 

统Web应用少很多;与此同时,平均的交互次数则 

有所增加。整体而言,AjaX应用的带宽消耗要比传 

统的Web应用低一些。 

3.4更好的用户体验 

在AjaX应用中,数据的获取是以异步的方式进 

行,用户的操作并没有被打断,使得用户的交互变得 

流畅而连续;另外,由于AjaX是“按需获取数据”,因 

此更新页面时不需要重载所有内容,只更新需要更 

新的内容即可,相对于传统的后台处理并且重载的 

方式,大大缩短了用户的等待时间。 

而且,使用 ax技术,还可以在Web应用中捕 

获用户的操作事件。如此以来,类似于桌面应用中的 

拖曳这样复杂的UI概念,由于AjaX技术的使用,也 

不再是可望不可及的,这使得理论上Web应用的 

UI体验可以和桌面应用的UI组件相媲美,Web应 

用系统的可用性和效率可以得到极大的提到,从而 

带来更加人性化和近乎完美的用户体验。 

除了上述的优点外,由于AjaX是基于标准化的 

并被广泛支持的技术,因此不需要下载插件或小程 

序;另外,AjaX技术的应用可以进一步促进页面和 

数据的分离。 

4 Ajax应用案例 

尽管AjaX的概念提出的时间不是很长,但目前 

网络上已经涌现出了许多基于AjaX技术的应用。 

4.1 Google 

51 

邮电设计技术第7期2007年7,El 

维普资讯

日期 

母——…刘近勇一张建嵘———— 

Ajax技术与Web应用 

Q 

o 

i Google Suggset、Google Maps、Google Gmail等都 

i. 是非常值得称道的Ajax应用。Google Suggset设置 

蚕 了输入框的下拉区,可以为用户提供与输入字符相 

符的提示,帮助用户完成想要键入的搜索字符串。 

Google Maps是结合了地图浏览和搜索引擎的 

Web应用。其地图是基于Ajax技术的,用户可以用 

鼠标拖曳、放大和缩小地图。Google Maps地图是由 

很多小图片栅格化无缝拼接而成的,当用户拖动需 

要显示新的区域时,新区域的图片将会异步加载。但 

这个下载数据的过程并不影响用户,用户依然可以 

继续其他的操作。另外,Google Maps还提供动态的 

信息提示,比如某个宾馆位置的详细信息。这些信息 

是即时获取的。而不是事先下载到本地的,这就是 

Ajax“按需获取数据”原则的一个重要体现。 

Google Gmail的Web邮件服务早在2004年初 

推出时,除了其大容量之外,最值得一提的就是它具 

有丰富的交互性用户界面。Google Gmail允许用户 

次性打开多个电子邮件,而且在用户写邮件的过 

程中,不必用户干预,邮件列表也能够自动更新,这 

与传统的Web邮件系统相比,无疑是一个非常显著 

的进步。 

4.2微软 

微软将Ajax技术应用在MSN Space网站上,其 

中的提交回复功能就是基于Ajax技术的。除此之 

外,微软新推出的Live网站的地图服务以及其他在 

线服务,都大量采用了Ajax技术来构建。 

微软Live网站的地图服务类似于Google 

Maps,采用的技术大同小异,也是由很多小图片栅 

格化无缝拼接而成,基于Ajax技术异步加载相关数 

据和信息。 

微软的Live网站已开放的其他在线服务,将 

Ajax技术发挥得淋漓尽致,充分考虑了用户的个性 

化需求,为用户提供尽可能大的自定义空间和功能, 

允许用户进行如同桌面应用一样的个性化设置,定 

义自己的与众不同的个性化页面。诸如增加、删除和 

重命名页面选项卡和根据自己的需求添加、定制资 

讯项目等等,非常的便捷,几乎不用等待就能即时得 

到定制后的页面布局和相关内容,没有传统Web应 

用中频繁的提交和页面刷新。这些基于Ajax技术的 

Web应用,用户操作响应迅速,交互性内容丰富,带 

52 

邮电it计技术第7期2007年7月 

给了用户近乎完美的Web新体验。 

4。3亚马逊(Amazon) 

A9。con是Amazon的搜索引擎,在其网页上提 

供了诸如“Web”、“Books”、“Images”、“Movies”等选 

项,当搜索结果出来以后,用户可以根据需要随时对 

搜索选项进行增减。当用户勾选或去除其中某一个 

选项时,页面会自动调整,增加或去除搜索结果,同 

时页面的布局也会发生相应的变化。在所有这些过 

程中,由于使用了Ajax技术,页面只是局部更新,而 

不是整个刷新,用户几乎不用等待,就可以立即看到 

结果。 

Amazon的钻石搜索,基于Ajax技术采用独特 

的方式,使得钻石的每一项特性都可以直观、快捷地 

通过可调节滑杆进行限定,调节的同时,用户可以即 

时看到符合当前条件范围的钻石产品,快速的查询 

符合要求的钻石。在钻石搜索的应用中,Ajax技术 

的使用,避免了频繁的页面提交和刷新,提高了系统 

的性能。 

5 Ajax的竞争技术 

尽管Ajax的发展得到了广泛的支持,但是在 

Web开发领域,Ajax并不是惟一可以满足市场需求 

的技术,甚至在某些情况下它也不一定是一种最合 

适的技术,还有很多种技术可能成为Ajax在Web 

应用方面的竞争对手或者说是替代方案。 

5.1 Macromedia Flash 

Flash技术已经存在多年,是一种采用了压缩的 

矢量图形格式,可以在Web页面中播放交互式视频 

和音乐,并可通过ActionScript编程实现与服务器交 

互的技术。Flash视频是一种流媒体格式,可以一边 

下载一边播放。Flash拥有强大的组件和可视化制作 

工具,提供非常优秀的矢量图形支持,可以应用于从 

交互游戏到复杂商业应用的用户界面等广阔领域。 

但运行Flash必须在浏览器上安装插件,而且 

Flash对搜索引擎的支持不够好,在处理大量文本的 

网页时性能表现不如Ajax。 

5.2 Java Web Start 

Java Web Start是一种基于Java技术的应用程 

序的部署解决方案。通过一个在电脑上运行的Web 

Start过程,可以自动完成应用的查找、下载和运行。 

维普资讯

目圜

刘近勇张建嵘

~~~一——

 

△ 

|=,一 

:Ajax技术与Web应用 

{0 

 :o 

Web Start已经整合进了Java运行环境,在IE、Mozil. 

la等浏览器中,安装过程会自动打开这个特性。在安 

持,就可以像使用.net、Delphi一样实现快速开发A. 

jax应用。现在有不少厂商开始朝这个方向发展,推 

。i 

: . 

装有Java运行环境的浏览器中,只需点击一个超链 

接就可以无缝地访问Java Web Start的相关应用。而 

且在每次启动时,Java Web Start都会检查Web服务 

出了减轻ajax开发难度和复杂度的ajax开发框 

架,这些框架主要分为两大类,一类是基于浏览器的 

应用框架(如Bindows、BackBase、Google AJAXSLT、 

亘。 

器,一旦有了应用的新版本,就会自动更新,没有传 

统应用程序复杂的升级过程。 

但是使用Java Web Start相关技术必须要求客 

HTMLHttpRequest、ajaxCaller等),另一类是基于服 

务器端的应用框架(如WebORD for Java、Bitkraft for 

ASP.NET、ajax.NET等)。 

户端安装有Java运行环境。 

5~Microsoft Smart Client 

智能客户端(Smart Client)是微软基于.net平台 

推出的使得应用程序能够自动部署、更新的机制,它 

融B/S和C/S二者之所长。Smart Client部署在IIS 

(Internet Information Service)服务器上,用户只需访 

但任何一种技术都有自己的局限性和缺陷,A- 

iax技术也不例外。ajax技术使用复杂,涉及内容多, 

对开发者的技能要求和熟练度偏高;其脚本运行效 

率也是个问题,也许以后浏览器级脚本预编译技术 

的支持会解决速度的问题;在数据较多时XML效率 

有时反而成为了瓶颈,当然,ajax也可以不使用 

问相关的网址就可以运行应用程序。本质上,Smart 

Client与Java Web Start类似,都属于C/S架构,通过 

XML而采用其他的数据格式,比如JSON等。 

总之,ajax技术不是万能的,也不是惟一满足 

B/S的方式进行部署,其支持的平台分别为.net和 

Java。 

由于Smart Client是基于.net的WinForm应用 

程序,因此在客户端必须安装.net框架才能运行。 

仕士 百 

市场需求的技术,它需要有适合自身应用的场合,并 

与现有的动态页面技术互补融合,才能充分发挥它 

的长处,改善系统性能和用户体验。ajax的特点在 

于异步交互、Web页面动态更新,适用于交互较多 

u缅木喝 

和频繁读取数据的Web应用。在未来的软件技术发 

展中

相信Ajax将担负起更多的用途,在Web应用 

随着ajax技术的发展和应用,越来越受到人们 

的青睐。企业Web应用开始转向以Ajax技术为主 

流。许多有实力的厂商将现有的ajax产品整合,推 

的舞台上发挥重要的作用。 

参考文献 

出集成的ajax解决方案,以提高开发效率。随着 

Ajax技术的进一步发展,将出现一些应用上的标 

:人民邮电出版社, O¨06 

2 D 。Crane

E i Pascare11。.D 

J 。 .Ajax i Acti 北京:人 

准,以标准化构件化为设计基础的开发模型必将出 

现,同时会有以标准构件为基础的可视化集成开发

工具来支持,相关的编程环境和调试环境将提供更 

民邮电出版社,2006 

匝囫 

j … … … … t… … 

送 发方式 杓 韧开发r 

亨通光电信息 

亨通光电中标中国联通光缆集中采购: 

_, | l 

件百强企业第二名:近日,由信息产业 

部经济体制改革与经济运行司、中国电 

…… …… … … ……… … ……… … … …… ………lll…… … … … …… …lll J l

此次亨通光电的光缆产品成功入 

围,充分证明了公司与中国联通的良好 

近日,从江苏亨通光电股份有限公司北 

伙伴关系。作为国内知名的光缆制造 

京办传来捷报,在2007年中国联通上 

半年光缆集中采购项目招标中,亨通光 

电凭借综合实力一举中标,成功揽下 

8 124皮长公里,成为本次集中采购的 

主要供货商之一。 

商,亨通光电立足光通信领域的前沿, 

子元件行业协会联合主办的2007年(第 

2O届)中国电子元件百强企业峰会论坛 

在上海召开,会议公布了2007年第2O 

苛求创新,以市场为导向,紧紧围绕中 

国通信行业的发展需要,为市场提供最 

届电子元件百强企业排名,亨通集团再 

优质的产品。 (濮建忠) 

度荣膺电子元件百强企业第二名。这 

 

亨通集团再度荣膺2007年中国电子元 

是公司连续三次获得这一殊荣。(张斌)

53 

邮电设计技术第7期2007年7月 


本文标签: 用户 应用 页面 技术 服务器