（计算机软件与理论专业论文）以数据为中心的异步web交互模型的研究.pdf

以数据为中心的异步w e b 交互模型的研究 摘要 w e b 应用程序因其部署简单、维护方便而得到广泛应用。但是，传统的 w e b 应用程序采用的是一种以内容为中心的同步交互模型，每次交互以页面为 单位进行，在交互过程中浏览器始终处于空白状态，也就是我们常说的刷新。 这使得传统w e b 应用程序的效率较低、性能较差、用户体验不佳。 随着w e b 2 0 概念的提出，一种新的w e b 开发技术a j a x 正在悄然兴起。 a j a x 通过向服务器发起异步请求并在客户端动态更新页面，可以做到数据的 按需获取和页面的局部更新。如何将a j a x 技术引入到w e b 开发中，改善现有 的w e b 应用程序是一个很有意义的研究课题。 本文首先基于a j a x 技术提出一种以数据为中心的异步w e b 交互模型，在 这种交互模型中，浏览器端和服务器端以业务功能为单位进行交互，所有的请 求由浏览器端的a j a x 引擎通过异步方式发出，服务器处理完相应功能后返回 数据，再由浏览器端的a j a x 引擎根据返回的数据动态更新页面。采用这种交 互模型的w e b 应用程序可以做到按需获取数据、局部更新页面、数据本地缓存， 从而改善传统w e b 应用程序的不足。 其次，实现这种交互模型必须要有浏览器端a j a x 引擎的支持，这需要在 浏览器端进行大量j a v a s c r i p t 编码，从而增加了开发的强度、难度并降低了代 码的可维护性。为此，本文设计并实现了一个基于m v c 模式的客户端a j a x 引擎以简化开发。该引擎通过将整个功能划分为视图、模型、控制器三个部分 从而使得代码的结构更加清晰、维护也更加方便。同时引擎还将一些的通用的 功能封装成组件，进一步减轻了开发人员的负担。 文章最后讨论了该a j a x 引擎在一个网上申报系统中的应用，从实践角度 证明了这种以数据为中心的w e b 交互模型和引擎框架的可行性。 关键字：a j a x ：异步交互；m v c ：j a v a s c r i p t ：w e b r e s e a r c ho fd a t a - c e n t r i ca s y n c h r o n o u sw e b i n t e r a c t i v em o d e l a b s t r a c t w e ba p p l i c a t i o n sh a v eb e e ne x t e n s i v e l ya p p l i e df o r t h es i m p l ed e p l o y m e n ta n d e a s ym a i n t e n a n c e h o w e v e r , t h et r a d i t i o n a lw e ba p p l i c a t i o n s a r eb a s e do na c o n t e n t c e n t r i cs y n c h r o n o u si n t e r a c t i v em o d e l ，f o re a c hi n t e r a c t i o n ，ap a g ei s r e s p o n s e da sau n i t ，i nt h ei n t e r a c t i v ep r o c e s s ，t h eb r o w s e r i sa l w a y si nas t a t eo f b l a n k ，t h a ti s ，w eo f t e ns a y , r e f r e s h t h i sm e a n st h a t t h et r a d i t i o n a lw e b a p p l i c a t i o n sl o we f f i c i e n c y , p o o rp e r f o r m a n c e ，p o o ru s e re x p e r i e n c e w i t hw e b 2 0c o n c e p tp r o p o s e d ，an e ww e bd e v e l o p m e n tt e c h n o l o g ya j a xi s q u i e t l yr i s i n g a j a x ，b ys e n t i n ga s y n c h r o n o u sr e q u e s t st ot h es e r v e ra n du p d a t i n g p a g e si nc l i e n td y n a m i c a l l y , c a nd oo n - d e m a n dd a t aa c c e s sa n du p d a t et h el o c a l p a g e sp a r t l y h o wa j a xw i l lb ei n t r o d u c e dt ow e bd e v e l o p m e n tt oi m p r o v et h e e x i s t i n gw e ba p p l i c a t i o n si sam e a n i n g f u lr e s e a r c hs u b j e c t f i r s t l y , ad a t a - c e n t r i ca s y n c h r o n o u sw e bi n t e r a c t i v em o d e lb a s e do na j a xi s b u i l d e di nt h i sd i s s e r t a t i o n i nt h i si n t e r a c t i v em o d e l ，t h eb r o w s e ra n ds e r v e r i n t e r a c tw i t hb u s i n e s sf u n c t i o n sa si n t e r a c t i v eu n i t s a l lr e q u e s t sw i l lb es e n t e d a s y n c h r o n o u s l yb yt h ea j a xe n g i n ei nb r o w s e rs i d e ，s e r v e rw i l lr e t u r nd a t aa f t e r d e a l i n gw i t ht h e s er e q u e s t s ，a n dt h e nt h ea j a xe n g i n ew i l lu p d a t et h el o c a lp a g e d y n a m i c a l l yi n a c c o r d a n c e w i t ht h er e t u r nd a t a w e ba p p l i c a t i o n su s i n gt h i s i n t e r a c t i v em o d e lc a nd oo n - d e m a n da c c e s st od a t a ，u p d a t i n gp a g e sp a r t l y , l o c a l d a t ac a c h e ，t h e r e b yi m p r o v i n gt r a d i t i o n a lw e ba p p l i c a t i o n sd e f i c i e n c i e s s e c o n d l y , t h ei m p l e m e n to ft h i si n t e r a c t i v em o d e ln e e d ss u p p o r tf r o maa j a x e n g i n ei nb r o w s e rs i d e ，t h i sr e q u i r e sal o to fj a v a s c r i p tc o d i n gf o rb r o w s e r ，t h u s i n c r e a s i n g t h e i n t e n s i t y a n d d i f f i c u l t y o ft h ed e v e l o p m e n t ，a n dr e d u c i n g m a i n t a i n a b i l i t y t os i m p l i f yd e v e l o p m e n t ，t h i sd i s s e r t a t i o nd e s i g n sa n di m p l e m e n t s a na j a xe n g i n eo nt h eb a s i so fm v cp a r t t e n t h ee n g i n ei so r g a i n z e di n t ot h r e e s e p a r a t em o d u l e s - t h em o d e l ，t h ev i e wa n dt h ec o n t r o l l e r ，t h u sm a k i n gt h ec o d em o r e s t r u c t u r e da n dm a i n t e n a n c em o r ec o n v e n i e n t t h ee n g i n ea l s od e v e l o p e ss o m e c o m p o n e n t sf o r t h ec o m m o nf u n c t i n a l i t y , f u r t h e rr e d u c i n gt h e b u r d e no ft h e d e v e l o p e r s f i n a l l y , t h i sd i s s e r t a t i o nd i s c u s s e sh o w t h ea j a xe n g i n eh a sb e e na p p l i e dt oa w e ba p p l i c a t i o ns y s t e m ，d e m o n s t r a t i n gt h ef e a s i b i l i t yo ft h i sd a t a - c e n t r i cw e b i n t e r a c t i o nm o d e la n dt h ef r a m e w o r ko ft h ea j a xe n g i n ef r o mt h ep r a c t i c a lp o i n t k e y w o r d s ：a j a x ；i n t e r a c ta s y n c h r o n o u s l y ；m v c ；j a v a s c r i p t ；w e b 图表清单 图2 1 传统的w e b 交互模型6 图2 2 采用a j a x 技术的w e b 交互模型6 图2 3d o m 结构图11 图2 4x m l h t t p r e q e u s t 对象在a j a x 开发中的作用1 2 图2 5m v c 类结构16 图2 6m v c 被动模型的行为1 7 图2 7 在主动模型中使用观察器将模型与视图分离1 8 图2 8m v c 主动模型的行为18 图3 1 传统w e b 应用体系结构图2 0 图3 2 传统w e b 应用交互过程2 l 图3 3 以数据为中心的w e b 应用的生命周期2 4 图3 4m v c 模式在传统w e b 应用程序中的应用2 5 图3 5 重构后的以数据为中心的w e b 交互模型2 6 图5 1 通信控制器4 2 图6 1 后台管理功能模块图5 0 图6 2 分组信息查看、修改模块用户界面图5 3 表2 1x m l h t t p r e q e u s t 对象支持的方法和属性1 3 独创性声明 本人声明所呈交的学位论文是本人在导师指导下进行的研究工作及取得的研究成 果。据我所知，除了文中特别加以标志和致谢的地方外，论文中不包含其他人已经发表 或撰写过的研究成果，也不包含为获得 金胆王些叁堂 或其他教育机构的学位或证书 而使用过的材料。与我一同工作的同志对本研究所做的任何贡献均已在论文中作了明确 的说明并表示谢意。 学位论文储繇阁彳、岛签字吼炒舭夕 学位论文版权使用授权书 本学位论文作者完全了解 金胆王些盔堂 有关保留、使用学位论文的规定，有权 保留并向国家有关部门或机构送交论文的复印件和磁盘，允许论文被查阅或借阅。本人 授权 金胆些盔堂 可以将学位论文的全部或部分论文内容编入有关数据库进行检 索，可以采用影印、缩印或扫描等复制手段保存、汇编学位论文。 ( 保密的学位论文在解密后适用本授权书) 学位论文作者毕业后去向： 工作单位： 通讯地址： 希砖 导师签名： 签字日期： 电话： 邮编： 一矽锣卜 名 厂躲哪者f 、 作 ：文期 论日位字 学签 致谢 衷心感谢我的导师李心科副教授，在本论文的选题、写作和修改的过程中， 自始至终得到了导师的指导、关心和帮助，他们为此投入了大量的时间和精力。 没有导师的培养和指导，本论文是不可能完成的。在我的研究生学习和生活期 间，得到了导师的极大帮助和关心，给我创造了很多条件和机会，使我倍感温 暖。导师渊博的学识、敏锐的思维、严谨的治学态度，高尚的道德情操和平易 近人的人格魅力，给我留下了深刻印象，使我终身受益。 感谢软件工程实验室的邵垫副教授和王钊老师对我的关心和帮助，感谢计 算机与信息学院的老师们，感谢他们给我提供的学习条件和机会。 感谢我的父母和女朋友，是他们的支持才让我顺利的完成学业。 感谢合肥工业大学软件工程研究室的所有师兄弟们，特别要感谢陈峰、金 元杰、沈桂芳、张磊磊，和他们的交流帮助我完成了学业，他们的关心是我永 远前进的动力。 作者：周东星 2 0 0 8 年3 月 1 1 研究背景及意义 第一章绪论 如今，随着互联网被应用于越来越多的领域，万维网从早期简单的静态 w e b 页面发展到动态的w e b 页面，用户可以和服务器端进行信息交互，提交数 据，并由服务器进行逻辑处理。服务器端的开发技术也从早期的c g i ，发展到 p h p 、a s p 、j s p ，一直到最近流行的基于j 2 e e 的s e r v l e t 、e j b 、s t r u t s 、s p r i n g 以及微软的a s p n e t 等等；从早期的面向过程的编程发展到面向对象编程；从 简单的开发模式到成熟的模型一视图一控制器的( m o d e l v i e w c o n t r o l l e r ) 开发 模式。而随着服务器端开发技术的发展，b s ( b r o w s e r s e r v e r ) 的体系结构被越 来越广泛的应用。相对于c s ( c l i e n t s e r v e r ) 结构，它不需考虑将应用程序部署 到数以千计的用户机器上，只需要在服务器上部署程序，软件升级也仅仅升级 服务端的程序，这使维护工作量大大减少。同时b s 在数据一致性、实时性和 安全性方面也还有着较好的表现，所以人们越来越倾向于采用b s 模式的设计 结构。但是，随着b s 模式的广泛应用，人们发现该模式也存在下列一些问题： ( 1 ) 不能做到数据的按需获取，无法实现页面的部分加载和部分更新。有 时用户仅仅需要从服务器获取少量数据，但服务器却将所有数据连同整个页面 一起传回客户端。就算客户端只是很小的页面调整，服务器也会将整个页面重 新生成、传回，客户端再重新加载整个页面。这实际上是对服务器端资源的一 种浪费，也增加了网络流量、浪费了网络带宽，并延长了用户的响应时间。 ( 2 ) 所有的任务都由服务器端完成，没有充分利用客户端的闲置资源。b s 结构实现的是一种瘦客户端，即将业务逻辑全部由服务器来实现，而客户端基 本不实现业务逻辑，这样所有的压力都放在服务器。随着硬件技术的更新，很 多客户端具有了闲置的能力来处理一部分业务逻辑，缓解服务器端的压力，但 是传统的b s 结构并不能充分用客户端的闲置资源。 ( 3 ) 因为每次交互都需要通过网络通信，这决定了在服务器端不能对一些 频繁发生的客户端事件( 鼠标移动等事件) 进行处理，这直接导致u i 体验不 如c s 应用程序。 ( 4 ) h t t p 协议“请求一响应”的同步交互模式决定了在返回响应之前，用户 只能面对一片空白的页面，这导致了用户体验不连续。 ( 5 ) h t t p 协议是一个无状态的协议，客户端无法保存数据，这意味着用户 多次访问同一个数据时需要向服务器请求多次，这是对资源的一种浪费。 总的来说，随着w e b 应用程序复杂性越来越高，传统的w e b 应用程序已 经渐渐不能满足用户更高的、全方位的体验要求了，此时一种被称为r i c h i n t e r n e ta p p l i c a t i o n 1 ( r i a ，富互联网应用程序) 的具有高度互动性和丰富用户体 验的网络应用程序出现了。 r i a 的提出，为w e b 应用指明了一个方向。r i c h 代表功能强大，强交互性， 高用户体验。i n t e r n e t 代表方便，应用程序部署方便，用户使用方便。r i a 实际 上是一种基于w e b 的c s 架构。综合了b s 模式和c s 模式的优点，所以r i a 应用既可以提供强大的功能，让用户体验到强交互性，高用户体验，又是基于 i n t e r n e t 浏览器的应用，所以，用户使用r i a 非常方便。而a j a x 则是一种目 前得到广泛认可的r i a 技术。 a j a x 2 】( a s y n c h r o n o u sj a v a s c r i p ta n dx m l ) 是多种技术的整合，其主要 技术特征是：应用x h t m l 和c s s 标准化：使用d o m 实现动态显示和交 互；采用x m l , j s o n , 普通文本进行数据交换与处理；用x m l h t t p r e q u e s t 实现异步w e b 请求；用j a v a s c r i p t 绑定和处理所有数据【3 】。通过这些技术的 集成，a j a x 实现了浏览器与服务器无刷新交互，数据的按需获取与页面的部 分加载，极大的缓解了网络流量，同时它具有的良好的远程交互能力，使用户 像使用桌面应用程序一样使用b s 架构的软件。 1 2 国内外研究现状 虽然a j a x 这个名词于2 0 0 5 年2 月刚刚提出，但是其基于构建富客户端的 w e b 应用程序的特性，以及可开发友好的用户界面，提供用户良好的交互性和 互操作性，使其得到越来越多的开发人员的青睐。并将其列入w e b 2 0 1 4 的核心 技术。w e b 2 0 是相对w e b l 0 ( 2 0 0 3 年以前的互联网模式) 的新的一类互联网应 用的统称，是一次从核心内容到外部应用的革命。它以b l o g 、s n s 、r s s 、w i k i 为核心，依据六度分隔理论、x m l 、a j a x 等新理论和新技术实现的新一代互 联网模式【5 j 。 a j a x 不只是学术上的研究，也有很多公司将a j a x 应用到其企业级的开 发产品中，大量的业界巨头已经采纳并且在大力推动这个技术的发展。最近的 动态包括： ( 1 ) i b m 、o r a c l e 、y a h o o 、b e a 、r e d h a t 、n o v e l 等业界领先的公司启动了 o p e na j a x 项目。致力于为a j a x 开发建造先进强大的的开发工具。i b m 已经 发布了a j a xt o o l k i tf r a m e w o r k ( a t f ) 1 0 一一个基于e c l i p s e 的a j a x 开发工具。 ( 2 ) 微软开发了自己的a j a x 框架a l t a s ，不过主要是和服务器端微软的 a s e n e t 框架配合工作。 ( 3 ) s u n 虽然行动迟缓，但也将a j a x 技术列入了j 2 e e 的蓝图中，作为j 2 e e 技术的有益的补充。 除了上述这些公司之外，g o o g l e 公司不可不提，因为正是他们率先采用 a j a x 技术建造出了一大堆非常出色的应用，才将a j a x 技术引到了聚光灯下。 g o o g l e 公司建造的a j a x 应用包括g o o g l em a p s 【6 】、g m a i l 、g o o g l es u g g e s t 等 2 等，其中公认最优秀最复杂的a j a x 应用是g o o g l em a p s 。由于完全基于a j a x 技术建造的界面，g o o g l em a p s 提供了远远超越其竞争对手的地图服务的交互 体验。如果说g o o g l e 后台的地图技术并不存在巨大优势的话，那么a j a x 技术 和优秀的交互设计成为了他们压倒竞争对手的杀手锏。最终使得g o o g l em a p s 脱颖而出，获得了用户的青睐。我们对比一下微软前后的两个地图服务就可看 出差别。微软提供的旧的地图服务h t t p ：t e r r a s e r v e r m i c r o s o f t c o r n 是传统w e b 应用的代表，性能很差而且极其难用。新地图服务h t t p ：l o c a l 1 i v e t o m ，包括这 个网站上的很多其他服务完全基于a j a x 技术来建造，获得了极好的可用性。 这个地图可以看作是在g o o g l e 推出了g o o g l em a p s 服务之后，微软公司痛定思 痛的产物，在很多地方模仿了g o o g l em a p s 。a j a x 的典型应用除了g o o g l e 的 产品外，还有微软的w i n d o w sl i v e 、y a h o o 的f l i e k r 等等。此外国内网易的博 客和邮箱也使用了a j a x 的技术。 m v c ( m o d e l v i e w c o n t r o l l e r ，模型一视图控制器) f 7 】是目前广泛流行的软件 设计模式。早在7 0 年代，i b m 就推出了著名的s a n f r o n s c i s i c o 项目计划，即 m v c 设计模式的研究。最初，m v c 只是t r y g v er e e n s k a u g 为编程语言 s m a l l t a l k 8 0 所发明的一种软件界面设计模式，m i c r o s o f t 的m f c 基础类库也遵 循了m v c 的思想，近年来，随着j 2 e e 的成熟，m v c 正在成为j 2 e e 平台上推 荐的一种设计模型，并逐渐在p h p 开发中得到运用，且有增长趋势。随着w e b 应用的快速增加，m v c 在系统框架设计中被大量采用，如s t r u t s 、m a v e r i c k 、 s p r i n g 、w e b w o r k 、j s f 等都是基于m v c 模式的w e b 应用框架。可见，m v c 模式无疑是w e b 应用框架设计中广泛采用的一种非常先进的设计思想，它为理 解、分析应用模型提供最基本的分析方法，为构造产品提供清晰的设计框架， 为软件工程提供规范的依据。在基于m v c 设计模式的w e b 应用开发平台基础 上实现的w e b 应用系统具有以下的一些优良特点： ( 1 ) 应用程序模块化。 ( 2 ) 减少了h t m l 代码和后台高级编程语言代码的相关性。 ( 3 ) 允许开发人员为相同的数据提供多个视图。 ( 4 ) 简化了应用程序开发流程。 ( 5 ) 应用程序更易维护。 1 3 论文研究内容 随着互联网的发展，基于w e b 的应用程序得到了广泛的应用，但是传统的 w e b 应用程序在效率、性能以及用户体验方面都与c s 结构的程序有着一定的 差距。 a j a x 作为一种客户端开发技术，因其可以实现异步请求、数据的部分加 载、页面的动态更新正受到越来越多的公司和开发人员的关注。 本文的研究工作主要围绕如何将a j a x 技术引入现有的w e b 开发中改善现 有w e b 应用程序的不足而展开，研究内容如下： ( 1 ) 考查a j a x 的起源，通过剖析w e b 的演化历程，研究直接促使a i a x 产生的各技术，总结了国内外研究进展。 ( 2 ) 研究a j a x 的核心技术，分析a j a x 的应用前景，总结了a j a x 技术 的优缺点。 ( 3 ) m v c 模式分析。讨论m v c 模式的结构、设计方法、实现技术、优缺 点及其应用。 ( 4 ) 在深入考察了传统w e b 交互模型的缺点的基础上，结合a j a x 技术的 优点提出了一种基于a j a x 技术的以数据为中心的异步w e b 交互模型，分析了 该交互模型的优缺点。 ( 5 ) 为了便于开发采用这种交互模型的w e b 应用程序，设计并实现一个基 于m v c 模式的客户端a j a x 引擎。 ( 6 ) 从项目背景出发，介绍该a j a x 引擎在安徽省科技厅网上申报、评 审管理系统中的应用，并指出引擎的不足之处，提出进一步研究的方向。 1 4 论文的组织结构 本文由六章组成，各章内容安排如下： 第一章绪论：介绍了课题的选题背景，简要介绍了a j a x 技术以及m v c 模式的国内外研究现状，并分析了当前w e b 应用程序所存在的不足，从而引出 论文的主要研究内容。 第二章a j a x 技术和m v c 模式：详细地介绍了a j a x 技术的相关概念、 核心技术和优缺点；介绍了m v c 模式，分析了m v c 模式的两种变型，总结了 其优缺点。 第三章以数据为中心的w e b 交互模型。讨论了传统w e b 交互模型的缺点 并分析a j a x 技术所带来的改进。提出了一种基于a j a x 技术的以数据为中心 的异步w e b 交互模型，为该交互模型的客户端部分设计了一种基于m v c 模式 的a j a x 框架。 第四章客户端a j a x 引擎分析。详细分析了基于m v c 模式的a j a x 引擎， 总结了引擎各主要组件以及这些组件的主要功能点。 第五章客户端a j a x 引擎的设计与实现：给出了该a j a x 引擎的详细设 计以及部分组件的具体实现。 第六章应用实例：介绍了该a j a x 引擎在一个实用系统中的具体应用， 进一步验证了该a j a x 引擎的实用性以及该交互模型的可行性。 第七章结束语：对全文的工作做了总结，并对下一步工作进行了展望。 4 第二章a j a x 技术和m v c 模式 目前，应用程序可以分为两大类：客户端, i l l 务器( c s ) 结构和浏览器, i l l 务 器( b s ) 结构。c s 结构的应用程序一般响应速度较快、用户界面精细、动态性 好，但客户端的部署及更新的复杂性一直困扰着用户和开发人员；b s 应用无 须安装客户端，程序的部署和更新相对简单，但其缺乏良好的交互性，“请求一 等待一请求”的应用模式较为单一，用户体验与c s 应用无法相比。a j a x 技术 的出现正在改变着b s 结构的应用模式，它使b s 应用的功能和交互性向c s 靠拢，用户界面更加友好。 2 1a j a x 概述 2 0 0 5 年2 月，a d a p t i v ep a t h 公司的j e s s ej a m e sg a r r e t t 在网上发表了一篇 名为a j a x ：an e wa p p r o a c ht ow e ba p p li c a t i o n s 【2 】的文章。在这篇文章 中，c a r r e t t 阐述了他为什么认为w e b 应用程序正在填平与传统桌面应用程序之 间的鸿沟。他引用了一些新技术，并以几个g o o g l e 的项目作为例子，说明了如 何将传统的、基于桌面应用程序的用户交互模型应用到w e b 上。他在文章中提 到：a j a x 是a s y n c h r o n o u sj a v a s c r i p ta n dx m l 的简写，它预示着w e b 可能将 开始一次根本性的变革。此后，关于a j a x 技术的文章、示例代码及争议如潮 水般充斥于整个因特网，开发人员在b l o g 上谈到它，技术杂志关注它，许多公 司开始尝试在产品中应用它。a j a x 正在将我们带入到下一代的网络应用之中。 2 1 1a j a x 工作原理 通过对比传统的w e b 交互模型( 图2 1 ) 与a j a x 的w e b 交互模型( 图2 2 ) ， 使a j a x 工作原理更容易被理解。自从采用h t m l 进行w e b 传输和呈现以来， 无论是基于哪种服务器技术( a s p 、a s p n e t 、j s p 、p h p ) ，w e b 应用的处理模 式都是采用同步交互。传统的w e b 应用程序模型中，浏览器本身负责初始化向 服务器的请求和处理服务器端的响应。用户首先向w e b 服务器发送请求，服务 器分析用户请求的内容后执行相应的业务逻辑，向用户返回结果。由于是“请求 一等待一请求”模式，在这一循环的过程中，用户必须等待，这时浏览器显示空 白页，直到服务器返回数据后才重新绘制页面。因为用户得不到立即的返馈， 感觉上不同于桌面应用，这是一种不连贯的用户体验，这也是w e b 应用交互性 差的原因所在。 a j a x 不同于传统的w e b 交互模式，它采用异步交互，服务器处理提交数 据的同时，客户端无需等待。由于数据的发送和接收在后台完成，用户浏览器 端显示的内容不会闪烁、消失或延迟，不会出现“白屏”。a j a x 在真正意义上 实现了“按需取数据”局部更新页面，从而提高了应用程序的效率，节约了网络 资源。 图2 - l 传统的w e b 交互模型 如图2 2 所示a j a x 通过j a v a s c r i p t 和x m l h t t p r e q u e s t 对象在w e b 表单( 客 户端的) 和服务器之间建立一个中间层，使用户操作与服务器响应异步化。并不 是所有的用户请求都提交给服务器，像一些数据验证和数据处理等都交给 a j a x 引擎来处理，只有确定需要从服务器读取新数据时才由a j a x 引擎代为 向服器提交请求。 2 1 2a j a x 技术特点 图2 - 2 采用a j a x 技术的w e b 交互模型 a j a x 的核心理念在于使用x m l h t t p r e q e u s t 8 】对象发送异步请求。最初为 x m l h t t p r e q e u s t 对象提供浏览器支持的是微软公司。早在1 9 9 8 年，微软公司 开发w e b 版的o u t l o o k 时，就以a c t i v e x 控件的方式对x m l h t t p r e q e u s t 提供了 支持，当时仅限于m i c r o s o f ti n t e r n e te x p l o r e r 。a j a x 解决方案不是单纯的一种 技术，实际上，它由几种蓬勃发展的技术以新的强大方式组合而成。a j a x 技 术包含了以下主要部分： ( 1 ) h t m l x h t m l p l ( 可扩展超文本标记语言，e x t e n s i b l eh y p e r t e x t m a r k u pl a n g u a g e ) ：主要的内容表示语言，编写结构化的w b e 页面。 ( 2 ) c s s 1 0 1 ( 层叠样式表，c a s c a d i n gs t y l es h e e t ) ：为h t m l x h t m l 提供元 素格式定义。 ( 3 ) d o m 1 ( 文档对象模型，d o c u m e n to b j e c tm o d e l ) ：对己载入的页面动 态更新，是进行动态显示和交互的基础。 ( 4 ) x m l 1 2 ( - - 扩展标记语言，e x t e n s i b l em a r k u pl a n g u a g e ) ：进行数据交 6 换的格式。 ( 5 ) x m l h t t p r e q e u s t 主要通信代理，用于进行异步数据的交互，是实现 a j a x 应用的核心技术。 ( 6 ) j a v a s c r i p t 1 3 】：是a j a x 应用在客户端使用的脚本语言，将以上各种技 术粘合在一起。 特别地，a j a x 需要一个稳定、响应及时的服务器向引擎发送内容，作为 必要的服务端处理逻辑，确保向a j a x 引擎发送的数据格式是正确的。现在流 行的a s p n e t 、p h p 、j s p 等均可与a j a x 技术无缝结合。 在a j a x 解决方案中，除了服务器端处理逻辑作为必要支撑之外，以上提 到的技术都是可用的，但并非全部都必须用到的。上述几种技术中，除了 x m l h t t p r e q e u s t 以外，所有的技术都是目前已经广泛使用、得到了广泛性理解 的w e b 标准技术。而x m l h t t p r e q e u s t 虽然尚未被w 3 c 正式采纳，其实也已 经是个事实标准。几乎所有的主流浏览器，如：i e 、f i r e f o x 、o p e r a 、s a f a r i 全 部都支持该技术，可以说a j a x 就是目前w e b 开发中最符合标准的技术的集合。 由于上述的所有技术都已经可以在浏览器中使用，因此用户无需安装任何额外 的软件，只要装有浏览器就可以运行任何符合标准的a j a x 应用。这对于a j a x 技术的普及、降低部署维护的成本是非常重要的。 2 1 3a j a x 应用原则 作为一种新的w e b 应用程序模型，a j a x 仍处于幼年时期。不过一些w e b 开发人员却已将这种新的开发方法视为一个挑战：倒底什么样的应用程序才是 好的a j a x 应用? 软件开发及可用性专家m i c h a e lm a h e m o f f 指出了一个好的 a j a x 应用程序应该遵循的关键原则【1 4 1 ： ( 1 ) 尽量减少通讯量：a j a x 应用程序向服务器发送的信息量及从服务器接 收的信息量应尽可能的少。减少客户端和服务器之间的通信流量，确保a j a x 应用程序不发送和接收不需要的信息，以增强其可靠性。 ( 2 ) 不意外：a j a x 技术的应用有可能将引入与传统应用程序不同的交互方 式，与w e b 标准的“点击一等待”方式相反，一些a j a x 应用程序将使用诸如拖 放、双击等其他用户界面风格。无论引入何种用户交互方式，都应以用户为先， 确保a j a x 应用的有效性和易用性。 ( 3 ) 遵循常规：为了缩短用户学习的过程，在用户交互模式上应尽可能地 直接参照传统w e b 应用和桌面应用程序，为了让用户免于重新投入时间和精力 去学习和习惯新交互模式，开发人员不应过分关注和浪费时间去发明不熟悉的 交互模式。 ( 4 ) 可访问性：充分考虑主要用户的需求和喜好的同时也不能闭门造车， 将没有预料到的新用户拒之门外。要充分考虑到用户是否会使用老版本的浏览 7 器或特定的软件，以制定相应的措施。 ( 5 ) 避免下载整个页面：当最初的页面下载之后，所有与服务器的通信都 交由a j a x 引擎管理。避免一些地方通过a j a x 来完成少量数据的下载，而在 另一些地方却仍需重新下载整个页面，这种做法会对用户的体验造成破坏。 a j a x 以提高w e b 可用性和用户体验为出发点，在实践中坚持上述几个原 则有助于保证a j a x 应用的有效性和可用性。 2 2a j a x 核心技术 a j a x 不是简单的一种技术，而是四种技术的应用集合： ( 1 ) j a v a s c r i p t ：a j a x 应用程序是使用j a v a s c r i p t 编写的。j a v a s c r i p t 是通 用的脚本语言，用来嵌入在某种应用之中。w e b 浏览器中嵌入的j a v a s c r i p t 解 释器允许通过程序与浏览器的很多内建功能进行交互。 ( 2 ) c s s ：在a j a x 应用中用户界面的样式可以通过c s s 独立修改。c s s 为w e b 页面元素提供了一种可重用的可视化样式的定义方法。 ( 3 ) d o m ：通过使用脚本修改d o m ，a j a x 应用程序可以在运行时改变用 户界面，或者高效地重绘页面中的某个部分。 ( 4 ) x m l h t t p r e q u e s t ：x m l h t t p r e q u e s t 对象允许w e b 程序员从w e b 服务 器以后台活动的方式获取数据。数据格式可以是x m l ，也可以是其它任何基于 文本的数据格式。 2 2 1j a v a s c r i p t ：a j a x 体系的粘合剂 j a v a s c r i p t 是一种基于对象和事件驱动并具有安全性能的脚本语言。在 a j a x 体系中，j a v a s c r i p t 通过对c s s 、d o m 、x m l h t t p r e q u e s t 等对象的访问 将各部分紧紧联结在一起。它的主要特点有1 5 , 1 6 , 1 7 , 1 8 ： ( 1 ) 动态性 j a v a s c r i p t 是动态的，它可以直接对用户或客户输入做出响应。它对用户的 响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在页面中执行 了某种操作所产生的动作，就称为“事件”，比如按下鼠标、移动窗口、选择菜 单等都可以视为事件，当事件发生后，可能会引起相应的事件响应。 ( 2 ) 跨平台性 j a v a s c r i p t 是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计 算机，并且浏览器支持j a v a s c r i p t 就可以正确执行。 ( 3 ) 节省与服务器的交互时间 随着w w w 的迅速发展有许多w e b 服务器提供的服务要与浏览者进行交 互，确定用户的身份、服务的内容等等，这项工作通常由c g i 、n e t 、j a v a 等 高级语言编写相应的程序与用户进行交互来完成。很显然，通过网络与用户的 交互过程一方面增大了网络的通信量，另一方面影响了服务器的服务性能。被 访问的热点主机与用户交互越多，服务器的性能影响就越大。 j a v a s e r i p t 是一种基于客户端浏览器的语言，用户在浏览中填表、验证的交 互过程只是通过浏览器对调入h t m l 文档中的j a v a s c r i p t 源代码进行解释执行 来完成的，即使是必须和服务器交互的部分，浏览器只将用户输入验证后的信 息提交给远程的服务器，大大减少了服务器的开销。 j a v a s c r i p t 是a j a x 工具箱中的核心技术。a j a x 应用程序完全下载到客户 端的内存中，由数据、表现和逻辑程序三者组成，j a v a s c r i p t 就是用来实现逻辑 的工具。 2 2 2c s s ：视觉样式的设计器 无论是在传统的w e b 应用还是在a j a x 应用中，c s s 都是一种频繁使用的 技术。在a j a x 体系中，它的主要工作已经不再是在某个地方定义在很多页面 中重用的样式，而是用最少的代码动态的为元素设置预先定义的外观。它的主 要特点包括【1 9 , 2 0 , 2 1 , 2 2 ： ( 1 ) 灵活性 在c s s 出现之前的w e b 界面中，页面外观的标记本身就是页面的一部分， 要进行修改，需要到站点的每个页面上在无数的f o n t 和t a b l e 标签中寻找相对 应的标签逐一进行修改。举例来说，在传统的基于表格的布局中，将站点浏览 从页面左侧移到页面右侧将十分困难。这需要几个小时重复而乏味的工作。但 是，在使用c s s 的定位属性( p o s i t i o n ) 来设计页面的情况下，只需更改外部样式 表中的“浮动”或“位置”属性，即可更新页面，而且更新了站点中使用该样式的 所有页面。 ( 2 ) 呈现性 传统的基于表格的布局是页面下载速度慢的主要原因。因为浏览器从服务 器接收页面时，必须首先检查并“理解”一系列复杂的镶嵌式表格。它必须先找 到镶嵌在最里面的内容，然后小心地逐步处理代码，直至到达最外层的容器， 即b o d y 标签。完成以上所有过程后，浏览器才能开始在屏幕上呈现内容。 如果使用c s s ，浏览器从服务器接收内容后，立刻就可以开始呈现过程， 因为页面中没有或只有很少的显示标