（计算机科学与技术专业论文）ajax技术在企业级应用中的研究与实现.pdf

i 独创性声明 本人声明所呈交的论文是我个人在导师指导下进行的研究工作及取得的研 究成果。尽我所知，除了文中特别加以标注和致谢的地方外，论文中不包含其他 人已经发表或撰写过的研究成果，也不包含为获得北京工业大学或其它教育机构 的学位或证书而使用过的材料。与我一同工作的同志对本研究所做的任何贡献均 已在论文中作了明确的说明并表示了谢意。 关于论文使用授权的说明 本人完全了解北京工业大学有关保留、使用学位论文的规定，即：学校有权 保留送交论文的复印件，允许论文被查阅和借阅；学校可以公布论文的全部或部 分内容，可以采用影印、缩印或其他复制手段保存论文。 ( 保密的论文在解密后应遵守此规定) 签名：兰玉鱼基导师签名：日期：2 呈f 垒：亟：! 一 摘要 摘要 目前，互联网正在由传统w e b 的发布式站点逐渐向开放的，可读写的，交互 丰富的w e b 2 o 应用过渡，以适应个人用户逐渐参与w e b 站点的互动要求。传统 的w e b 中的“点击一等待 模式，已经无法满足用户对快速响应能力的需要。2 0 0 5 年2 月j e s s ej a m e sg a r r e t t 提出了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 表示层技术，可以构建一种无需刷新页面，就可以获得 服务器响应的异步模式，可以方便的构建快速和体验丰富的w e b 应用程序。a j a x 可以消除传统h t t p 通信模式中对表单的依赖，从而实现快速而轻量的异步通信。 a j a x 技术是一种目前得到广泛认可的r i a ( r i c hi n t e r n e ta p p l i c a t i o n ) 技术，它采用了异步的通信机制，仅向服务器传送和接收自己所需要的数据，使 用d o m 的a p i 接口促使页面局部刷新，从而减少网络流量，并使w e b 应用程序具 有更高的即时响应性，更好的可交互性，使用户像使用桌面应用程序一样使用 w e b 应用程序，无需等待整个页面刷新。 a j a x 技术是由一系列技术组成，主要用来完成w e b 应用的异步通信和局部刷 新，其中涉及c s s 、j a v a s c r i p t 、h t m l 、) ( l l 、x m l h t t p r e q u e s t 、d o m 等技术，零 散的使用这些技术，并不适合在企业级开发中，而利用这些技术标准编写一个函 数库和组件库，能够很好满足企业级开发中高可用性、高复用性等特点。 本文介绍a j a x 的各种核心技术，实现原理和机制。研究a j a x 的各种异步通 信方式，跨域通信问题，和w e bs e r v i c e 通信的方式等。根据a j a x 的各种技术 标准，编写一个的a j a x 函数库和一个交互组件库，降低a j a x 技术在j 2 e e 企业 级应用中的开发难度和复杂度。 关键词a j a x ；异步通信方式；u i 组件库；w e bs e r v i c e 北京工业大学工学硕十学位论文 1 i l f l a y e rt e c h o l o 鼢c a l lb u i l d ap a g ew i m o u tr e 骶s h i n g ，y o uc a ng e tm es e e rt o r e s p o n dt om e 嘲m c h r o n o u sm o d e ，y o uc a i le a s i l yb u i l d 缸t a i l de x p 舐e n c e - r i c hw 曲 a p p l i c a t i o n s a j a xc a nd i m i n a t et a d i t i o n a lh t t p 舰伍c m o d e ld e p e n d so nm ef o 册 i no r d e rt oa c h i e v e 胁ta n dl i 曲t w e i 曲ta s ) r 1 1c _ h r o n o u sc o m m u n l c a t l o n a j a xt e c h n o l o g yi s a删t l yw i d e l yr e c o 印i z e dr i a ( r i c h1 1 1 t e n l e t a p p l i c a t i o n ) t e c l m o l o 踽w h i c hu s e sa s y n c h r o n o u sc o m m 砌c a t i o nm e c h 锄s m o m y m es e r v e rn e e d st os e n da n dr e c e i v ei t so w nd a t a ，u s i n gm ed o m sa p ii n t e r f a c et o f a c i l i t a t e p a n i a lp a g ef e h s h ，t h u sr e d u c i n gt h en e 觚。出t r a m c ，a n dm a k ew 曲 印p l i c a t i o nh a sah i 曲e rr e a l t i m er e s p o n s i v e n e s s ，b 甜e ri n t e r a c t i v i t y ，a 1 1 0 w i n g u s e r s t 0u s ed e s k t o p 印p l i c a t i o nt h es 锄ea st h eu s eo fw 曲a p p l i c a t i o n s ，谢t h o u th a v i n g t o w a i tf o rt h ee n t i r ep a g er e 仔e s h a j a xt e c h n o l o g yi sc o m p o s e do fas 耐e so ft e c h n 0 1 0 9 yi sm a i n l yu s e dt o c o m p l e t em ew 曲a p p l i c a t i o n s ，a s y n c h r o n o u sc o 删1 1 u n i c a t i o n a n dp a n i a lr e 仃e s h ， w h i c hi n v 0 1 v e sc s s ，j a v a s 嘶p t ，h t m l ，x m l ，x m l h t t p r e q u e s t ，d o mt e c h n o i o 目e s ， s p o r a d i cu s eo ft h e s et e c h n i q u e 8a r en o ts u i t a b l ef o re n t e 印r i s e l e v e ld e v e l o p m e n t ， w h i l et h eu s eo fm e s et e c h n i c a ls t a n d a r d sf o rm ep r e p a r a t i o no fa1 i b r a 叫a n d c o m p o n e n tl i b r a r yc a nb eav e r yg o o dd e v e l o p m e n tt o m e e tt h ee n t e r p n s e 。c l a s s h i g l l a v a i l a b i l i t mh i 曲r e u s a b i l i t ya n d s oo n 1 1 1 i s 砒i c l ed e s 翻b e sav 撕e t yo fc o r ea j a xt e c h n 0 1 0 西e s ，t oa c h i e v ep 曲c i p l e s a n dm e c h a n i s m s s t u d yav 蜀时e 哆o fa j a xa s y n c h r o n o u sc o m m u m c a t l o nm o d e ， c r o s s d o m a i nc o m m 啪i c a t i o np r o b l e m s ，a n dw 曲s e r v i c ec o m m u n i c a t i o np a t t e m s a c c o r d i n gt oav a r i e 哆o ft e c h n i c a ls t a n d a r d s ，a j a x ，w r i t eo n e o fm ea j a x1 i b r a 吼 a n dau ic o m p o n e n tl i b r a 嘞 r e d u c i n g a j a xt e c t l i l o l o g yi nj 2 e ee n t e 印r i s e a p p l i c a t i o ni nm ed e v e l o p m e n to fm ed i 衔c u l t ya n dc o m p l e x i 妙 k e y w o r d s ：a j a x ；a s ) ，n d h r o n o u sc o m m u n i c a t i o n s ；u ic o m p o n e n t ；w e bs e i c e 1 1 1 i v 目录 第1 章 绪论1 1 1课题研究背景及其研究目的和意义1 1 2国内外研究现状和发展动态1 1 3 课题的主要研究内容4 1 4 论文的结构和内容4 第2 章w e b 2 o 和a j a ) ( 技术的概述5 2 1w e b 2 0 介绍5 2 1 1 w 曲2 0 的概念5 2 1 2w 曲2 o 出现的基础5 2 2a j a x 技术介绍6 2 2 1a j a x 技术的定义6 2 2 。2 传统动态网页技术与a j a x 技术比较7 2 2 3a j a x 的工作原理8 2 2 4a j a x 技术的应用l o 2 3 本章小结1 l 第3 章a j a x 核心技术的研究1 3 3 1 异步通信技术的研究1 3 3 1 1h t t p 协议1 3 3 1 2 传统的异步通信方式1 6 3 1 3 基于x m l h t t p r e q u e 8 t 对象的异步通信1 9 3 2 数据传输格式2 3 3 2 1x m l 2 3 3 2 2j s o n 2 4 3 2 3 纯文本2 6 3 3 本章小结2 7 第4 章a j a x 库的研究与实现2 9 4 1a j a x 库的整体架构2 9 4 2 实用工具层3 0 4 2 1 名称空问3 0 4 2 2 动态加载3l 4 2 3 浏览器判定3 3 4 2 3 日志工具3 5 4 3 语言支持层3 7 4 3 1 面向对象支持3 7 4 3 2 原生对象扩展3 9 4 3 3 数据格式转换4 l 4 4 接口扩展层4 2 4 4 1 选择器扩展4 2 v n 录 目 一 t cl _ 口c 口要舱tsi 筒bh弧a 北京工业大学_ 亡学硕士学位论文 4 4 2d o m 功能扩展4 3 4 4 3 样式操作扩展4 4 4 4 4 事件对象扩展4 4 4 5 组件封装层4 5 4 5 1 通信组件4 5 4 5 2 交互组件4 6 4 6 本章小结6 2 第5 章a j a x 库在远程开放教育成绩管理平台中的应用6 3 5 1 远程开放教育成绩管理平台简介6 3 5 1 1 平台背景介绍6 3 5 1 2 平台结构设计6 3 5 2a j a x 库的应用与实践6 5 5 2 1 下拉框数据联动6 5 5 2 2 表单验证应用6 7 5 2 3 自动建议组件的应用6 8 5 2 4w 曲服务6 9 5 3 本章小结7 5 结论7 7 参考文献7 9 攻读硕士学位期间所取得的研究成果8 1 致谢8 3 一v i 第l 章绪论 第1 章绪论 1 1 课题研究背景及其研究目的和意义 随着各种w e b 2 0 网站的出现，各种类似桌面程序的用户体验已经让用户 普遍接受。但是，传统的基于b s 架构的企业级应用程序，还是无法像基于c s 架构的应用程序那样使用丰富的效果来展示数据，传统的需要“点击一等待” 模式的系统己经渐渐不能满足网络浏览者的更高的、全方位的体验要求了，这 就是被m a c r o m e d i a 公司称之为的“体验问题 口1 。 不同于流行的w e b 2 0 网站，大多数的企业级w e b 应用围绕数据处理、流程 管理、数据报表构建等。改善用户体验问题，具有很重要的意义，可以简化完 成任务的步骤、直观的数据显示、节省带宽、减少用户等待时间。 a j a x 技术是目前得到广泛认可的r i a u ( r i c hi n t e r n e ta p p li c a t i o n ) 技 术之一，它采用了异步的通信机制，仅向服务器传送和接收自己所需要的数据， 使用d o m 的a p i 接口完成页面局部刷新，从而减少网络流量，并使w e b 应用程 序具有更高的即时响应性，更好的可交互性，可以设计出像桌面应用程序类似 的w e b 应用程序，无需等待整个页面刷新。 在企业级w e b 应用中，要使用a j a x 这种富客户端技术，需要零散的使用c s s 、 j a v a s c r i p t 、h t m l 、x m l 、x m l h t t p r e q u e s t 、d o m 等技术，不利用维护，且可用 性和复用性差。 所以，本文提出一种既可以在新的项目中使用，也可以为旧的项目升级的 一种解决方案，编写一个轻量级的a j a x 库和交互组件库，使得代码侵入性低， 复用性更好，很好的解决了在实际项目中使用a j a x 技术改善用户体验的需求。 1 2 国内外研究现状和发展动态 目前a j a x 技术己经成为了w e b 应用的主流开发技术，大量的业界巨头己经 采纳并且在大力推动这个技术的发展，由他们成立的0 p e na j a x 联盟h 1 指导着 a j a x 的发展，这个组织给出了运用a j a x 技术的的白皮书，涉及a j a x 通信模式， m u s h u p 的安全问题，请求管理h u b 等。 a j a x 技术涉及了w 3 c 的许多w e b 标准规范，如e c m a s c r i p t ，h t m l ，c s s ， d o ma n dd o me v e n t s ，) ( m l h t t p r e q u e s t ，x m l 畸。1 2 1 等。正是由于a j a x 技术遵循了 这些w e b 标准，使得a j a x 技术得以迅速发展，并广泛应用。 r i a ( r i c hi n t e r n e ta p p l i c a t i o n ，富因特网应用程序) 利用具有很强交互 北京丁业大学工学硕士学位论文 性的富客户端技术来为用户提供一个更高和更全方位的网络体验。r i a 集成了 桌面应用的交互性和传统w e b 应用的部署灵活性与成本分析，以创建单一而完 整的用户体验，a j a x 技术也是一种重要的r i a 技术。 近年来随着技术的发展，r i a 作为一种新的开发概念提出过，出现了大量实 现r i a 的具体技术，包括f 1 e x ，x u l ，j s f ，b i n d o w s ，a v a l o n ，l a s z l o 等。 这些技术基本上有一个共同点：使用成熟的h t t p 通信模式：基于) ( m l 语法和标 签语言技术：拥有丰富的桌面端应用集成：免去系统的安装和维护，软件自动升 级。 x u l ：是创建富动态用户界面的一种高性能标记语言，这种语言是m o z i l l a 浏览器以及相关应用的组成部分，并且在m o z i l l a 浏览器( f i r e f o x ) 中可用。x u l 主要由一组高性能的小部件( w i d g e t ) 组成，这些小部件能够组成更为复杂的业 务应用和组件。优点在于速度很快，可与j a v a s c r i p t 一起工作，基于x m l ，并 且支持f i r e f o x 的一些内部工作，例如s q l i t e 存储引擎。x u l 的主要缺点是完 全依赖于m o z i l l a 系列技术，无法在i e 中运行。 x a m l ：用于创建富动态用户界面的一种高性能标记语言。这种技术是n e t f r a m e w o r k 3 0 系技术的组成技术之一，更明确的说是w p f ( w i n d o w s p r e s e n t a t i o nf o u n d a t i o n ) 的一部分，作为一种用户界面标记语言来定义用户 界面元素、数据绑定和事件。用在w p f 中时，x a m l 描绘了丰富可视化的用户界 面，允许定义2 d 和3 d 对象、旋转、动画以及其他各种不同的效果和特性。这 种技术比a j a x 更为强大，不过高度依赖于平台的，而且还没有进入主流开发领 域。 j a v aa p p l e t 是编译后的j a v a 应用，可以运行在w e b 浏览器中并且与服务 器进行异步通信。这种技术提供了图形功能的所有实现方式，但是需要运行在 j a v a 虚拟机中。尽管这种技术是跨平台的，而且能够运行在不同的浏览器中， 但是a p p l e t 可能表现得很慢，因为经常运行之前需要首先启动j v m 。 j a v aw e bs t a r t 应用不再浏览器内部运行，但是需要从浏览器启动并且同 时下载相关文件，与a p p l e t 相比，这种技术的一个好处是克服了许多不同浏览 器j a v a 插件之间以及不同j v m 版本之间的兼容性问题，但是，这种技术无法像 a p p l e t 那样容易地与浏览器通信。 j a v a f x 不仅能够用于r c p 开发，也能够用于r i a ( r i c hi n t e r n e t a p p li c a t i o n s ) 开发。 j a v a f x 能够用于编写前端应用、w e b 应用的视图或者用户接口，不过这都 需要j v m 的支持。 j s f 和j s p 用于编写纯粹的w e b 应用( 对于支持h t m l 的h t t p 客户端来讲 是可用的) ，而j a v a f x 需要位于客户端的j v m 。如果你希望编写富客户端的话， 第1 章绪论 那么就需要在客户端安装j r e ，j a v a f x 能够提供与基于f 1 a s h 的f 1 e x 、基于n e t 的s i l v e r l i 曲t 相同的功能。常见的应用场景是开发运行在公司内网的应用。 目前a j a x 己经成为了w e b 应用的主流开发技术，由他们成立的0 p e n a j a x 联盟指导着a j a x 的发展，最近的动态包括： ( 1 ) i b m ，0 r a c l e ，y a h o o ! ，b e a ，r e dh a t ，n o v e l l 等业界领先的公司启 动了o p e n a j a x 计划，该计划的目标，是让开发者挑选一种a j a x 架构，并与 e c l i p s e 软件搭配使用。2 0 0 6 年2 月，在b e a ，b o r l a n d ，g o o g l e ，i b m ，0 r a c l e ， r e dh a t ，y a h o o 等1 5 家公司的发起下成立了o p e n a j a x 联盟，旨在推动a j a x 技术的应用。2 0 0 7 年四月，微软也加入了该组织。到目前为止，该组织的成员 己超过7 2 个。 ( 2 ) 微软开发了自己的a j a x 框架a l t a s ，不过主要是和服务器端他们自己的 a s p n e t 框架配合工作。2 0 0 7 年1 月2 5 日，a 1 t a s1 0 发布。 ( 3 ) s u n 虽然行动迟缓，但是也将a j a x 技术列入了j 2 e e 的b 1 u e p r i n t ( 蓝 图) 中，作为j 2 e e 技术的有益补充，j m a k i 作为s u n 的a j a x 产品，融合了几种 流行的a j a x 框架技术。 ( 4 ) 目前，a j a x 应用最普遍的领域是g i s m a p ，g i s 应用交互非常频繁，它 强调快速响应，a j a x 的特点正好可以满足这类需求。 g o 0 9 1 e 在g m a i1 ，g o o g l em a p s ，g o o g l es u g g e s t 等应用中广泛采纳了a j a x 技术：一年前还曾经持观望态度的y a h o o 、微软等公司也迅猛转向，前者利用 a j a x 技术推出了全新的邮件浏览界面和即时搜索( i n s t a n ts e a r c h ) ，后者更是 大力整合旗下多个w e b 相关部门，力推全新的l i v e c o m 服务一个与g o o g l e 非常相似的基于a j a x 的网站：0 r a c l e ，s u n 和b e a 这样的企业软件巨头，t i b c o 这样的重量级工具厂商也已经或者准备在其产品中加入a j a x 支持：s y sc o n 等 技术媒体，己经开辟了专门的a j a x 频道：在国内，网易等公司己经将a j a x 应用 于实际产品之中，而且取得了很好的效果。 陆续出现了一些简化a j a x 开发的开源f r a m e w o r k ，比较著名的有d o j 0 ，d w r ， r i c o 等等，应用这些f r a m e w o r k ，开发人员可以更加高效，相对容易的构建复 杂的r i a 应用，而不必关心很多细节。 在国内，a j a x 的研究也蓬勃发展，特别在应用方面，随着国家对信息产业 的重视以及用户要求的不断提高，更好的用户体验就成了企业开发w e b 应用的 重要的衡量指标。现在有一些门户网站已经开始使用a j a x 技术，q q z o n e 就是 非常典型的代表，在一些网页游戏里面也大量使用了该技术，达到了比传统客 户端游戏的用户更好的交互效果。也出现了一批商业的a j a x 解决方案，如金蝶 的0 p e r a m a s k s 和b s t e k 的d o r a d 0 等。 企业级w e b 应用有一类问题需要解决，比如表单验证，控件扩展，控件联 北京工业大学工学硕十学位论文 动等等，这些是一些重量级框架不好解决的，本课题主要针对这些问题，提出 了一种代码入侵性小，轻量级的a j a x 库和交互组件库。 1 3 课题的主要研究内容 本课题主要研究的内容包括： 一分析研究a j a x 技术的工作原理和核心技术。 一研究w e b 应用中异步通信的各种方式及优劣。 一研究数据交换格式的解析及效率。 一设计一个以a j a x 为核心的函数库和组件库，用于简化a j a x 开发。 一提出几项a j a x 技术在实际开发中的实现和应用。 1 4 论文的结构和内容 全文由五章组成。 第一章绪论，说明课题的研究目的和意义，相关领域的研究现状，论文的 主要研究内容以及论文的组织结构。 第二章w 曲2 0 的概念和出现的基础，a j a x 技术的定义，与传统技术的比 较，以及它的工作原理和在现实的应用。 第三章主要是研究异步通信技术和数据传输格式。其中异步通信技术分析 了h t t p 协议特点，传统异步通信的三种方式，和基于l h t t p r e q u e s t 对象 的异步通信方式，它所带来的兼容性问题和优缺点。数据传输格式部分分析了 常用的三种格式，以及它们的特点。 第四章提出了一个a j a 库的整体架构，并实现名称空间，动态加载，浏 览器判定，日志，面向对象，原生对象扩展，数据格式转换，选择器，文档对 象模型，样式，事件，通信，交互组件部分，其中详细给出各个实现模块的接 口，和一些细节的算法和流程图。 第五章在远程开放教育成绩管理平台中，找到一些场景来实际也能用 a j a x 技术，验证自己的a j a x 函数和交互组件库，同时在实际中分析a j a x 技术的优势。 2 1 1 w e b 2 o 的概念 “w e b 2 0 的概念开始于一个会议中，展开于0 r e 订l y 公司和m e d i a l i v e 国际公司之间的头脑风暴。0 r e i l l y 公司副总裁d a l ed o u g h e t y 在这次会议上 指出：“网络非但没有破灭，而且随着许多令人激动的新程序 和网站让人惊讶的突然出现，网络比以往的作用更重要。 w e b 2 0 是相对传统w e b 应用的新的一类互联网应用的统称。传统w e b 应用 的主要特点在于用户通过浏览器获取信息。w e b 2 o 则更注重用户的交互作用， 用户既是网站内容的浏览者，也是网站内容的制造者。所谓网站内容的制造者 是说互联网上的每一个用户不再仅仅是互联网的读者，同时也成为互联网上内 容的作者；在模式上由单纯的“读”向“写”以及“共同建设 发展；由被动 地接收互联网信息向主动创造互联网信息发展。 w e b 2 0 产品以博客、维基百科、r s s 、网摘、s n s n 4 3 为代表，以人性化、个 性化、社会化为核心思想，鼓励所有互联网用户一起构造互联网中的内容。 w e b 2 0 产品的一大特色是丰富的用户体验，然而，在g o 0 9 1 e 推出g m a i l 和 g o o g l em a p 之前，w e b 应用程序的用户体验问题，一直没有得到很好的发展， 这些基于互联网的带有丰富用户界面以及与桌面程序等同交互性的应用程序， 一经推出，立即受到广大用户的推崇，这些好处都源自一种异步通信模式，后 来被a d a p ti v ep a t h 公司的j e s s ej 鲫e sg a r r e t t 命名为a j a x ，它是几项技术 组成的，每项技术自身都很繁荣，它们以强有力的全新方式结合起来，用于改 善现有的w e b 应用程序的用户体验。 2 1 2w e b 2 o 出现的基础 互联网从刚开始的红红火火，到2 0 0 1 年时的惨淡经营，再到如今人人都挂 在嘴边上的“w e b 2 0 ”。互联网在国内的发展，经历了一系列的变革。 ( 1 ) 用户行为的改变。用户的上网行为从简单的网上看新闻，到自己构建 网站、写博客、写词条，从查找信息变成分享信息。以门户网站为代表的w e b l 0 - 创造了大量网络用户，从这些人中诞生了具有特殊需求和特殊习惯的w e b 2 0 的 网络使用者，而w e b 2 o 的潮流将会吸引和引导更多的w e b l 0 的网络用户加入 北京工业大学工学硕士学位论文 到构建互联网、共享信息的行列。 ( 2 ) 利益驱使商业机构上网。越来越多的商业机构在网上设立网站、咨询 平台，提供个性化服务。携程网可以提供酒店、机票预订，阿里巴巴提供一个 交易平台等。这些商业机构之所以愿意构建自己的w e b 应用，并不是前一次网 络泡沫时人们所宣扬的网上建个站点，可以提升企业的形象的缘故。网络已经 成为他们的一个重要销售渠道，而且相对于其他渠道，它的成本更低。 ( 3 ) 开放精神的普及。开源程序帮助众多无技术背景的普通网络用户轻松 的搭建了自己的网站和b 1 0 9 ，以m i t ( m a s s a c h u s e t t si n s t i t u t eo ft e c h n 0 1 0 9 y 麻省理工学院) 开放课程为典型代表的开放内容使用户获取资源变得非常容易。 g p l ，c c 和c o p y l e f t 等版权协议n 5 。”3 确保了w e b 2 0 出现的可能，促进了知识创 新与传播。 ( 4 ) 安全、可操作的网上支付的普及。w e b 2 0 将加速个人电子商务的发展， 以p a y p a l 、支付宝等网上支付品牌为代表的安全、可操作的网上支付的普及反 过来将有力支持个人电子商务的发展。 2 2a j a x 技术介绍 2 。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 l i c a t i o n s n 踟的文章。在这篇 文章，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 ，即异步j a v a s c r i p t 与 x m l 技术。a j a x 并不是一门新的语言或技术，它实际上是几项技术按一定的方 式组合，在共同的协作中发挥各自的作用，它是由j a v a s c r i p t ，x h t m l ，w 3 cd o m ， x m l ，x m l h t t p r e q u e s t 复合而成的异步通信技术，核心是j a v a s c r i p t 和 x m l h t t p r e q u e s t 。x h t m l 和c s s 标准化呈现，w 3 cd o m 负责解析来自服务器端的 x m l 响应信息和动态显示信息，x m l h t t p r e q u e s t 负责发送异步请求和接收异步 响应消息，j a v a s c r i p t 负责在客户端浏览器实现程序逻辑。 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 对象向服务器发出异步请求，以查询数据库或执行更新。当请 求返回时，使用j a v a s c r i p t 调用d o m 相应的方法更新相应的页面内容，而不是 刷新整个页面。这个过程使w e b 站点看起来就像桌面应用程序一样是即时u 向应 的，可以说a j a x 允许开发人员和设计人员创建具有桌面风格的w e b 应用程序。 第2 章w 曲2 o 和a j a x 技术的概述 2 2 2 传统动态网页技术与a j a x 技术比较 a j a x 的出现是因为随着信息传输量的不断加大，传统的w e b 应用所采用的 同步交互方式显现出越来越明显的问题。当服务器在处理请求的时候，用户多 数时间处于等待的状态，屏幕内容也是一片空白。只有等到最终的响应结果传 输到浏览器客户端时，整个页面才会重新进行刷新，以显示处理的结果。 这种处理方式让用户的体验变得不连贯、不顺畅。a j a x 提倡的异步交互的 处理方式则能够很好的解决这个问题。 ( 1 ) 传统w e b 应用解决方案：传统的w e b 应用采用的是同步交互方式，如 图2 1 所示。 客户端 f a k 时间 z 一+ “ ；釜荟耋錾巍缓_ 一i 。= ：磁瓣搿l l ：叠夏爱墓l p 口a 一l 服务器端 图2 一l 同步交互方式 f i g u r e2 1s y n c h r o n o u si n t e r a c t i o nm o d e 一般的传统w e b 应用程序中，用户填写表单字段并单击提交按钮。然后整 个表单发送到服务器，服务器将它转发给处理表单的脚本( 通常是p h p 或j a v a ， 也可能是c g i 进程或者类似语言) ，脚本执行完成后再发送回全新的页面9 。 这种交互方式当用户向h t t p 服务器提交了一个处理请求时，服务器端将在 接受到该请求后，按照预先编写的程序中的业务逻辑进行处理，例如：和数据库 服务器之间进行数据信息的交换，然后对请求处理进行响应，即将结果传送回 发出请求的浏览器客户端，返回一个h t m l 页面在浏览器进行显示，在显示该页 时，往往使用c s s 层叠样式表来增强页面的显示效果。 这种交互方式浪费了许多带宽，因为在客户端提交的页面和服务端处理后 凰 零暑卜一 北京丁业大学工学硕士学位论文 返回的页面中，大部分h t m l 代码往往是相同的，所不同的只是一小部分的内容， 但每次服务器都会生成所有的页面再返回给客户端，这无形之中是一种浪费。 由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务 器的响应时间，这导致了用户界面的响应比本地应用慢得多。 ( 2 ) 运用a j a x 技术的解决方案 与传统的w e b 应用不同，a j a x 技术采用的是一种异步交互的处理方式，交 互过程如图2 2 所示： 崩颜部分琴稠目捌耘部分页丽 服务器弱 图2 2 异步交互方式 f i g u r e2 2a s y n c h r o n o u s 工n t e r a c t i o nm o d e a j a x 技术相当于在浏览器客户端与服务器之间架设了一个桥梁、一个媒介， 在它的帮助下，可以消除网络交互过程中的处理、等待等缺陷。在处理过程中 w e b 服务器响应是标准的且易于解析的x m l 格式的数据传递给a j a x ，然后再转 换成h t m l 页面的格式，辅助c s s 进行显示。a j a x 是使用x m l h t t p r e q u e s t 对象 发送请求并获得服务器端的响应，同时a j a x 可以在不重新载入整个页面的情况 下用j a v a s c r i p t 操作d o m 以实现最终更新页面。由此看出，a j a x 与服务器端 究竟采用何种动态网页技术是无关的。 2 2 3 a j a x 的工作原理 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 。该对象是支持异步请 第2 章w 曲2 0 和a j a x 技术的概述 求的技术。页面内的j a v a s c r i p t 可以在不刷新页面的情况下从服务器获得数 据，或者向服务器提交数据。 a j a x 技术的出现缓解了传统的w e b 应用程序的交互模型是同步的这一个矛 盾。客户端每次只需要从服务器得到需要的数据，而不是刷新整个页面，通过 客户端脚本语言、) ( m l h t t p r e q u e s t 对象以及) ( m l 来实现。下面介绍a j a x 的工 作原理。一次a j a x 处理过程如图2 3 所示： 客户端 ，。拜l 户通过按f 键盘、鬣杯、填霹 裘艰瓣活动域誊1 时i l j 触发翅信 2 。构遗衙整传递给服务嚣的磐歙， 袭擎彀搬或者参数 j 接 缓缀黧缓麓黝； 网络活动 ：3 构造请求期l 胤t 裤。q u e 8 “ l r r 8 m ，l 瓢g e ，s c “p t 笛方式， ；辱笈送请求争 ：5 以递艘磊镑键豕服务处堤歇态 i 黝黼毳燃嬲獭利 瓤宠域粥分炙俩型新 1o 。接髓确膨，解弼收别盼数缀， 为毅撼蚀坤傲准貉 服务器端 6 ，对收铡的辫蟹由服务器鞴经理 的数搠送行编码鲠解码 7 根搦请求。运行北务逻辑 产譬；臻累 嚣褥用r 晌晦的敬獭编码艘缴 攒体 螽格式( x q l i s i ) 雌，1 0 x l 伯嘉户瓣臻张蛹筑鬻嘲铡时和 图2 3a j a x 使用步骤和过程 f i g u r e2 3s t e p sa n dp r o c e s so fa j a x 1 用户通过在页面上的活动或由t i m e r 等触发一次通信。 2 设置请求地址和请求参数，如果请求的服务器地址是跨域的，必须使用 可以跨域通信的通信方式。 3 根据选择的不同的通信方式，构造通信对象。 4 按照通信对象的各自的方式，发送请求。 5 以一些页面上的可视化标志显示当前请求状态。 6 服务器端程序对收到请求，提取参数，做相应的编码或解码操作。 7 根据请求参数，完成业务处理，产生相应结果。 8 将服务器端程序产生的响应结果编码成一定的传输格式，可以是x m l 格 式，j s o n 格式或普通文本。 9 在网络环境中正常传递，完成请求，或者是因为某种原因响应超时。 l o 当接收到响应，按照服务器端程序的编码格式，解码响应数据，为数据 北京- 丁业大学t 学硕一仁学位论文 处理做准备。或者响应超时，以某种方式通知用户错误。 u 使用得到响应数据后，使用d o m 的a p i 来完成局部更新页面元素。 a j a x 技术基本上就是把j a v a s c r i p t 技术和异步通信对象放在w e b 表单和服 务器之间。当用户填写表单或进行其他操作时，数据发送给一些j a v a s c r i p t 代 码而不是直接发送给服务器。j a v a s c r i p t 代码捕获表单数据，并向服务器发送 请求。同时用户屏幕上的表单也不会闪烁、消失或延迟。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 2 4a j a x 技术的应用 a j a x 技术的特点在于异步交互，它的适用范围是交互较多、频繁读取数据 的w e b 应用。适合的场合使用a j a x 技术才能充分发挥它的长处，改善系统性能 和用户体验。以下列出了其应用的例子： 1 ) 数据验证。数据验证是应用程序的主要功能，如唯一性验证、取值范围 验证、条件验证等，传统的技术需要在验证时提交整个表单或编写专门的验证 页面，使用a j a x 技术后，可以由x m l h t t p r e q u e s t 对象发出验证请求，根据返 回的h t t p 响应判断验证是否成功，整个过程不需要弹出新窗口，也不需要将整 个页面提交到服务