（产业经济学专业论文）基于AJAX的网上银行富客户端研究与设计.pdf

对外经济贸易大学硕士论文 摘要 伴随者w e b 2 0 的大势所趋，富客户端应用再次成为网络时代的热点。自2 0 0 3 年以 来，经过持续的研究开发与应用，富客户端应用现在己经得到世界范围的广泛关注， 许多知名的技术提供商如微软、i b m 、m a c r o m e d i a 等，都先后提出了基于自身技术的解 决方案。谷歌、雅虎更是将富客户端在商业领域的应用价值展现得淋漓尽致。 必须注意到，今天的富客户端应用更多了一样利器，那就是a j a x 。a j a x 是 a s y n c h r o n o u sj a v a s c r i p t + x m l 的简写，比起传统的w e b 应用，基于a j a x 的富客户 端提供一种与桌面应用程序相近的用户体验，一个w e b 页已经越来越趋向于一个单独 的应用程序，它可以从多个接口获取数据，并将他们更新在页面中，所有的工作都是 在后台完成的。 鉴于a j a x 在其它商业领域的巨大成功和广泛影响，本课题提出了将富客户端理论、 a j a x 技术与银行业务实际相结合，并充分应用金融管理知识结合信息化技术对现行的 网上银行客户端提出了针对用户体验、网络延迟和独占性等方面的改进方案。 在内容上本文全面阐述富客户端应用特点和a j a x 技术思想，并与传统的w e b 应 用做比较，分析出其优劣势；同时深入分析在迅猛发展的网上银行系统中，富客户端 应用的领域与前景；并层层深入，逐步细化对基于a j a x 技术的网上银行个人外汇买卖 系统进行了详细的分析与设计；最后结合网上银行应用的特殊要求，研究和分析了a j a x 技术思想的安全、性能及必要的改进措施。 主题词：a j a x 、网上银行、富客户端、研究设计、异步传输 对外经济贸易大学硕士论文 r e s e a r c ha n dd e s i g no fe l e c t r o n i cb a n k sr i c hc l i e n to na j a x a b s t r a c t f o l l o w i n gt h ee m e r g e n c ea n dt r e n do fw e b 2 0 ，r i c hc l i e n ta p p l i c a t i o nh a sb e c o m et h e f o c u sd u r i n gt h ei n t e r a c tt i m e s s i n c e2 0 0 3 ，t h er e s e a r c ha n dd e v e l o p m e n to nr i c hc l i e n t a p p l i c a t i o nh a sa t t f a c t e dw o r l d w i d ea t t e n t i o n m o r ea n dm o r et e c h n o l o g yp r o v i d e r s 1 i k e m i c r o s o f t ，i b m ，m a c r o m e d i ae t c ，h a sg i v e nt h es o l u t i o nb a s e do nt h e i ro w nt e c h n o l o g i e s o o o g l ea n dy a h o oh a v em a d et h eb e s tu s eo ft h er i c hc l i e n ti nt e r m so fc o m m e r c i a lv a l u e i th a st ob en o t i c e dt h a ta j a x ，w h i c hc a m eo u ti nf e b2 0 0 5 ，h a sb e c o m et h ec o l e t e c h n o l o g yo f r i c hc l i e n 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 t + x m l , m a k et h e w e b a p p l i c a t i o nw o r kl i k et h ew i n d o w sa p p l i c a t i o n as i n g l ew e bp a g et r e n d st ob eas i n g l e a p p l i c a t i o np r o g r a m d u et ot h eg r e a ts u c c e s sa n dw i l di n f l u e n c eo fa j a xa p p l i c a t i o ni nt h eo t h e rf i e l do f c o m m e r c e ，i ti sp r o p o s e di n t h i st h e s i st oa p p l yt h er i c hc l i e n tt h e o r i e sa n da j a xi nt h e p r a c t i c a ls e r v i c e so fe l e c t r o n i cb a n k a n dt h ea u t h o rm a n a g e dt o f i n dt h ei m p r o v e m e n t s o l u t i o n a sf o rt h ec o n t e n to ft h i st h e s i s ，t h ea u t h o rh a sm a d et h er e s e a r c ho nt h er i c hc l i e n t a p p l i c a t i o n sc h a r a c t e r i s t i c sa n da j a xt e c hs o l u t i o n , a n dc o m p a r e dt h e mw i t ht h et r a d i t i o n a l w e b a p p l i c a t i o n s ；a n dt h e n ，a n a l y z e dt h ed e m a n df o rr i c hc l i e n ti nt h ee l e c t r o n i cb a n k ；t h e n , g i v e nas p e c i f i cd e s i g n i n gs o l u t i o nf o rt h ec u r r e n c i e st r a d i n gs e r v i c e so fe l e c t r o n i cb a n k ； l a s t l y , a c c o r d i n gt ot h es t r i c t l ys e c u r er e q u i r e m e n tb ye l e c t r o n i cb a n k ，a n a l y z e dt h es e c u r i t y , c o m p e t e n c yo f a j a xa n di t si m p r o v e m e n ts o l u t i o n k e y w o r d s ：a j a x ，e l e c t r o n i cb 锄l 【r i c hc l i e n t ，r e s e a r c ha n dd e s i g n ，a s y n c h r o n o u s t r a n s m i s s i o n 2 对外经济贸易大学硕士论文 第一章绪论 本章概括了本文的研究背景、意义、主要内容和成果，以及文章的结构框架。 1 1 本文的研究背景及意义 1 1 1 b 2 0 时代的富客户端应用 尽管很少有人能给w e b 2 0 一个准确的定义，但是b l o g ( 博客) ，w i k i ( 维基) ，t a g ( 互动标签) ，s n ( 社会网络) ，r s s ( 简易聚合) 对社会生活的影响显而易见，几乎每 个人都可以感觉到一个新w e b 时代的气息。回顾以往，人类社会的信息传播大致经历 了人际传播、大众传播与分众传播即从点到点、点到多点、多点到多点传播这三 个阶段。w e b 的出现跨越了传统媒体的时空约束，使得信息传递在快速与广泛等方面产 生了革命性飞跃。而w e b 2 0 相对w e b l 0 的最根本改变在于：变单向传播为交互性传 播，信息发布者与受众角色交替，受众具备发布权限。1 w e b l 0 和w e b 2 0 的对比 w e b l 0 ( 1 9 9 3 - 2 0 0 3 )w e b 2 0 ( 2 0 0 3 一) 通过浏览器浏览大量网页网页加上很多通过w e b 分享的其他“内 容”，更加互动，更像一个应用程序 模式 读取 写入 主要内容单元网页发布记录的信息 形态静态动态 浏览方式浏览器浏览器，r s s 阅读器，及大量其他工具 体系结构客户服务器网络服务 内容创建者专业编程人员任何使用网络的人 应用领域高水平专家大量业余人士 架构b s 、c s富客户端 在传统的网络时代，我们所能做的，无非是被动的选择和阅读；而w e b 2 0 带给人 们的是一个可以全方位参与互动的传播模式。基于w e b 2 0 的网络媒介是属于用户的媒 介，它将满足用户更多更灵活的需求包括个性化和社会化。其个性化的技术应用改变 了传统媒介固定的面孔，倡导用户自己主导信息的生产和传播，打破了原来传统媒介 所固守的单向传输模式，采用了一种放权、自定义的方法让人们自己参与其中，自己 定制和管理需要的传播内容和形式。 到目前为正，即使是w e b 2 0 概念的提出者也都不能预测飞速占据市场的w e b 2 0 究竟会何时步入成熟期，新的网络规则及发展格局又会是如何的，但是确定无疑的是， 喻国明新传播时代的实践图景，新闻与写作 ，2 0 0 7 年第1 期 对外经济贸易大学硕士论文 w e b 2 0 必然用一种新的形式带给我们一个高效、新鲜而有活力的网络生活。2 伴随着w e b 2 0 的大势所趋，富客户端应用再次成为网络时代的热点，而且今天的 富客户端应用更多了一样利器，那就是a j a ) ( 技术。富客户端本质上是要提供一种与桌 面应用程序相近的用户体验。桌面应用程序的最大优势就是丰富的用户界面，包括菜 单，图标，对话框，拖放操作，鼠标事件，所见即所得的编辑功能等等。3 作为丰富的 w e b 前端来说，这些也同样不可或缺。而作为一种w e b 应用，其不同于桌面应用的特征 也非常突出，就是更加强化了数据中心。网络本身就是一个巨大的数据库。站在这个 角度上看，每个客户端浏览器都是这个数据库系统的终端，富客户端环境下更是如此。 w e b 2 0 强调应用个性化、网络去中心化和交互性更强的应用模式。简单地输人，提交， 然后察看返回数据的方式已经不能满足需要，取而代之的是数据中心的应用模式加上 丰富的用户界面，模糊了服务器的角色，不同用户之间的联系可以变得更加紧密。 1 1 2 基于a j a x 的w e b 模式的创新 比起传统的w e b 开发模式，a j a x 则向传统桌面程序靠拢了许多，一个w e b 页已经 越来越趋向于一个单独的应用程序。一个w e b 页可以从多个接口获取数据，并将他们 更新在页面中。所有的工作都是在后台完成的。设计良好的a j a x 程序可以告诉用户浏 览器正在做什么，让用户可以边等待边完成其他工作。 在a j a x 中，每个客户端页面不一定是对应一个服务器端页面，而可能是由多个服 务器端页面共同协作完成的。大多数服务器端的页面已经不再是界面表现的工具，而 是作为提供数据的接口，可以用下图对比示意这样的结构。 4 a j a x 到底有多大力量 。h t l p ：v “v w o k a j “c o m m f o z i x u n 2 0 0 6 0 5 7 7 9 h t m l 龚翱，拽析w e b 2 0 新应用) ，科技信息) 杂志，2 0 0 7 年0 l 期 2 对外经济贸易大学硕士论文 一莘斩 镐矿弋 ( 兰= 盯t p 传输 一- 二弓 甾衅端 图1 1a j a x 开发模式与传统w e b 开发模式的对比 资料来源：本研究整理 从图1 1 中可以看出，在a j a x 中，每个客户端表现的页面可以由多个服务器端页 面共同完成，一个服务器端页面同样可以为多个客户端页面服务。在这样的模式下， 每个服务器端页面可以将功能的粒度分的很细，至于这些功能怎么组合，则完全是客 户端的事。通过a j a x 引擎，客户端页面可以根据用户的需要来调用服务器端的有效信 息，并显示在页面上。因此，许多服务器端页面准确的说已经不能再被称之为页面了， 3 传统的司。开发模式 基于净jah的罨eb开发模式 对外经济贸易大学硕士论文 而是更像一个个接口。 在基于a j a x 的w e b 程序中，最为重要的特征就是将同步请求转变为异步请求。这 意味着客户端和服务器端不必再互相等待，而是可以进行一些并发的操作。用户在发 送请求以后可以继续该页面的工作，包括浏览或提交信息。在服务器响应完成之后， a j a x 引擎会将更新的数据显示给用户，而用户则根据相应内容来决定自己下一步的行 为。图1 2 给出了两种模式的对比： 传统w e b 应用模式( 同步) 服务器端 服务处理服务处理 a j a xw e b 应潮模式( 舅步) 图1 2a j a x 应用模式与传统w e b 应用模式对比 资料来源：译自”a j a xi na c t i o n ” 可见，在用户行为和服务器端多了一层a j a x 引擎，它负责处理用户的行为，并转 化为对服务器的请求。同时他接收服务器端的返回信息，经过处理后显示给用户。由 4 詹晶晶、倪子伟，基于a j a x 引擎的数据异步传输模型的构建和实现成阳师范学院学报 2 0 0 6 年1 2 月 4 对外经济贸易大学硕士论文 于a j a x 在后台以异步的方式工作，用户无需等待服务器的处理，可以进行并发工作， 这就在用户界面层次上更为接近了c s 架构的客户端平台。 比起a j a x 中异步的概念，在传统的w e b 开发中，完全是一种请求一刷新一响应的模 式，用户只有等待请求完成后才能进行操作，操作完成后才能提交下一个请求，用户 行为和服务器行为是一种同步的关系，需要相互等待，正是这种等待，造成了b s 架构 客户端和c s 架构客户端的本质区别。 同步和异步只是两种开发模式的区别之一。a j a x 还带来了性能的提高：因为用户 的行为经过了a j a x 引擎的处理，使得客户端可以只获取需要的数据。文档对象模型使 得动态改变页面的层次结构成为可能，这样动态获取的数据可以动态嵌入到页面之中， 避免了数据重复加载带来的速度和效率问题。服务器端的组织形式则可以将功能划分 得更细，这样服务器就可以只为有用的数据进行工作，大大提高了运行效率。 1 1 3 中外a j a x 技术的应用现状 世界上已经有许多商业网站正在使用a j a x 来改进其用户体验。这些网站和传统的 产品手册式的网站相比，更像是一个w e b 应用，因为它不再仅是用来显示信息，而是 通过访问它来实现一个特定的目标。据统计截至2 0 0 6 年底，国外采用a j a x 技术的网 站已达7 2 家，包括知名的谷歌、雅虎( 科技、即时搜索版块) 、m s n ( 虚拟地球版块) 、 a 9 、a s k 等。5 打造a j a x 的版图，谷歌比其他公司做得更多。在2 0 0 4 年初，他们就推出了b e t a 版本的g m a i l 服务。除了它阔绰的容量，g m a i l 最为人称道的就是它的用户界面。它允 许用户一次打开多个电子邮件，并且，即便用户正在写邮件，邮件列表也能够自动更 新。与同期的大多数w e b 邮件系统相比，这无疑是一个显著的进步。而与很多w e b 界 面模仿m i c r o s o f to u t l o o k 和l o t u sn o t e s 的企业邮件服务相比，g m a i l 并没有依赖重 量级的、容易出问题的a c t i v e x 控件和j a v aa p p l e t ，但在功能上却毫不逊色。这样做 所带来的好处就是完全的跨平台，可以在任何平台、任何地点使用g m a i l 的服务。 而这些应用都只算是初步的尝试。近期，a j a x 相关的技术框架显著增加，这可以 看作是市场向独占式a j a x 应用迁移的征兆。同时也表明，a j a x 正在赢得市场的青睐， 因为像谷歌、雅虎和微软这样的业界巨头只有在看到了可观的商业前景之后才会大量 运用特定的新技术。而a j a x 在国内的商业应用仅有1 6 3 和新浪两家，并且主要集中在 已经由国外厂商发展成熟的a j a x 信箱系统和评论系统。 1 2 主要研究内容及成果 截至到本文完成之时，a j a x 概念的提出刚刚满两年，富客户端理论的研究高潮出 现不到三年，w e b 2 0 时代的到来也不超过四年，而将这些崭新的技术、理论、理念和 银行业最年轻最重要的业务之一网上银行结合在一起，研究其应用的可行性和技术要 5 原始数据来源：h t t p ：# w w w o k a j a x c o l ( a j a x 之经典应用 ，h t t p ：w w w o g a j a x c o m m f o n e t 2 0 0 6 0 5 4 5 7 h t m l 对外经济贸易大学硕士论文 点便是本文的主要内容。 这些新生概念并没有完全成熟，甚至在某些方面还存在着界定不清的地方，因此 世界上还没有任何一家银行宣称在其网上银行业务中采用了a j a x 技术或者提供了富客 户端服务。同时，也没有任何资料显示或介绍在这方面的探索和应用。但是网络经济 的历史经验一再表明，对于新技术新趋势的等待和观望往往会导致在市场上长时间的 被动。a j a x 等技术理念在其他商业领域的成功范例和勃勃生机证明了它的下一站很可 能就是网上银行。 本课题采用了归纳法和结构化系统分析与设计方法，将富客户端理论、a j a x 技术 与银行实际业务相结合，充分应用所学的金融管理知识结合信息化技术对现行的网上 银行客户端提出了大胆的改进方案并对关键应用部分进行了实例性的研究，并且灵活 的使用v i s i o 、p h o t o s h o p 、u m l 等先进的作图和建模工具对技术难点进行了图形化的 剖析和阐释。 i 3 论文的写作思路和结构安排 本文的主体部分按从理论到实践，从一般到特殊，从总体到局部，层层深入、逐 步细化的思路进行。主要研究基于a j a x 的网上银行富客户端应用，具体内容如下： 1 全面阐述富客户端应用的主要技术思想a j a x ，并与传统的w e b 应用做比较， 分析出其优劣势； 2 深入分析在快速的网上银行发展中，具有着w e b 2 0 鲜明特色的富客户端应用 的领域与前景； 3 对基于a j a x 技术的网上银行个人外汇买卖系统进行了详细的分析与设计； 4 结合网上银行应用的特殊性，研究和分析了a j a x 技术思想的安全、性能及必 要的改进措施。 文章的结构安排如图1 3 所示： 6 对外经济贸易大学硕士论文 图1 3 文章机构安排 来源：本研究整理 7 对外经济贸易大学硕士论文 第二章富客户端技术a j a x 研究 a j a 】( 是a s y n c h r o n o u sj a v a s c r i p t + x m l 的简写，它第一次出现在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 ：一种w e b 应用程序开 发的新方法。文中，g a r r e t t 阐述了他认为w e b 应用程序正在填平与传统桌面应用程 序之间的鸿沟。他引用了一些新的技术，并以几个谷歌的项目作为例子，说明了如何 将传统的，基于桌面应用程序的用户交互模型应用到w e b 上。7 2 1a j a x 的主要技术 a j a x 不是简单的一种技术，而是四种技术的应用集合。 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 编写的。j a v a s c r i p t 是通用的脚本 语言，用来嵌入在某种应用之中。w e b 浏览器中嵌入的j a v a s c r i p t 解 释器允许通过程序与浏览器的很多内建功能进行交互。 c s s 在a j a x 应用中，用户界面的样式可以通过c s s 独立修改。c s s 为w e b 页面元素提供了一种可重用的可视化样式的定义方法。 d o m 通过使用脚本修改d o m ，a j a x 应用程序可以在运行时改变用户界面， 或者高效地重绘页面中的某个部分 x m k h t t p r e q u e s tx m l h t t p r e q u e s t 对象允许w e b 程序员从w e b 服务器以后台活动的方式 对象获取数据。数据格式可以是x m l ，也可以是其它任何基于文本的数据格 式。 2 1 1j a v a s c ri p t = a j a x 体系的粘合剂 j a v a s c r i p t 是一种基于对象和事件驱动并具有安全性能的脚本语言，使用它的目 的是与h t m l 超文本标识语言、j a v a 脚本语言一起实现在一个网页中链接多个对象， 与网络客户交互作用，从而可以开发客户端的应用程序。在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 、动态性 j a v a s c r i p t 是动态的，它可以直接对用户或客户输入做出响应，无须经过w e b 服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动， 就是指在主页中执行了某种操作所产生的动作，就称为“事件”。比如按下鼠标、移 动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。 7 m ”c 啪晰e f k h 。c m l i od 锄j 枷脚“i n d i o n 1 w h m i n g p u b l k d i o m , o c m b c a l ，2 0 0 5 8 对外经济贸易大学硕士论文 2 、跨平台性 j a v a s c r i p t 是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机， 并且浏览器支持j a v a s c r i p t 就可以正确执行。 3 、 节省c g i 的交互时间 随着w w w 的迅速发展有许多w w w 服务器提供的服务要与浏览者进行交流，确定用 户的身份、服务的内容等等，这项工作通常由c g l 8 p e r l 编写相应的接e l 程序与用户进 行交互来完成。很显然，通过网络与用户的交互过程一方面增大了网络的通信量，另 一方面影响了服务器的服务性能。服务器为一个用户运行一个c g i 时，需要一个进程 为它服务，它要占用服务器的资源( 如c p u 服务、内存耗费等) ，如果用户填表出现错 误，交互服务占用的时间就会相应增加。被访问的热点主机与用户交互越多，服务器 的性能影响就越大。 j a v a s c r i p t 是一种基于客户端浏览器的语言，用户在浏览中填表、验证的交互过 程只是通过浏览器对调入h t m l 文档中的j a v a s c r i p t 源代码进行解释执行来完成的， 即使是必须调用c g i 的部分，浏览器只将用户输入验证后的信息提交给远程的服务器， 大大减少了服务器的开销。 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 1 2 o s s = 视觉祥式的设计器 无论是在传统的w e b 应用还是在a j a x 应用中，c s s 9 都是一种频繁使用的技术。在 a j a x 体系中，它的主要工作已经不再是在某个地方定义在很多页面中重用的样式，而 是用最少的代码动态的为元素设置预先定义的外观。它的主要特点包括： 1 、 灵活性 c s s 出现之前的w e b 界面更改是非常困难的，因为定义页面外观的标记本身就是页 面的一部分。要进行修改，需要到站点的每个页面上在无数的f o n t 和t a b l e 标签中 寻找相对应的标签逐一进行修改。举例来说，在传统的基于表格的布局中，将站点浏 览从页面左侧移到页面右侧将十分困难。这需要几个小时重复而乏味的工作。但是， 在使用c s s 的定位属性( 通常称作c s s p ) 来设计页面的情况下，只需更改外部样式表 中的“浮动”或“位置”属性，即可更新页面。而且更新了站点中使用该样式的所有 页面。 2 、 呈现性 传统的基于表格的布局是页面下载速度慢的主要原因。因为浏览器从服务器接 收页面时，必须首先检查并“理解”一系列复杂的镶嵌式表格。它必须先找到镶嵌在 最里面的内容，然后小心地逐步处理代码，直至到达最外层的容器，即b o d y 标签 c o m m o ng a t e w a yi n t e r f a c e ，公共同关接口 c a s c a d i n gs t y l es h e e t s ，层叠样式表单 9 对外经济贸易大学硕士论文 完成以上所有过程后，浏览器才能开始在屏幕上呈现内容。 如果使用c s s ，浏览器从服务器接收内容后，立刻就可以开始呈现过程，因为页 面中没有或只有很少的显示标记。 使用外部样式表还有一个潜在的呈现方面的好处。在传统的基于表格的方法中， 浏览器必须检索、分析并单独呈现每个页面。也就是说，浏览器在站点上显示第3 0 页 时耗费的工作和显示第l 页时一样多。 但是，如果使用外部样式表进行显示，站点的第一页将提示浏览器将页面使用的 已链接样式表文件缓存起来。这意味着站点中所有使用上述样式表的后继页面下载速 度会更快，因为浏览器已经缓存了样式表。 在设计中使用c s s 后，客户端需要下载的代码的数量大大减少。在很多情况下， 如果完全使用c s s p 进行设计，代码的数量最多可以减少5 0 甚至更多。代码减少 就意味着页面下载的速度加快。 3 、 可访问性 可访问性的主要问题( 也是使用c s s 能够解决的问题) 在于辅助技术( 例如屏幕阅 读器) 怎样“阅读”页面。传统的基于表格的环境下，屏幕阅读器面l 临一个巨大的挑战， 那就是决定怎样阅读页面。当屏幕阅读器遇到镶嵌很深的表格时面临的问题是，它应 该阅读内容，还是跳过内容? 跳过内容后，以后怎样返回内容? 使用c s s ，能够在页面 中完整定义不可视元素( 对于其他站点访问人员不可视) 。屏幕阅读器可以使用这些元 素快速导航，有效处理文档。 2 1 3d o n ：a j a x 的基础结构 d o m ”实际上有两种，h t m ld o m 和x m ld o m 。h t m ld o m 是一种特殊的d o m ，它仅支 持使用g e t e l e m e n t b y i d ( ) 和g e t e l e m e n t s b y t a g n a m e ( ) 两个方法来进行查询，而x m ld o m 则可以与x p a t ha p i 相结合，基于强大的正则表达式来进行查询。a j a x 开发中所用到 的主要是h t m ld o m ，如果不涉及到处理x m l 格式的数据，就不需要用到x m ld o m 。以 下所说的d o m 也是指h t m ld o m 。 简单的来说，d o m 使得用户可以访问页面上的标准组件( 元素、样式表、脚本、e t c ) 并处理它。多年来，那些希望创建前端w e b 应用的程序员们都必须使用j a v aa p p l e t 、 f l a s h 或者a c t i v e x 。当然现在这些工具还是可以使用的，但是支持d o m 的浏览器使得 w e b 开发人员拥有了创建多样化、功能强大的基于w e b 的应用程序的能力，而且完全使 用基于标准的技术。 d o m 将整个h t m l 文档展现为内存中的一棵树状结构( 浏览器内存中仅仅只有一棵 这样的h t m ld o m 树，其根节点为d o c u m e n t 对象) ，每个元素、属性都是树上的一个节 点可以通过j a v a s c r i p t 来访问这棵d o m 树，遍历树上的节点、动态添加、删除树上 的节点、设置或修改某个节点的样式、设置或修改某个节点中保存的数值等等。通过 ”d o c t o ro b j e c tm o d e l 文档对象模型 1 0 对外经济贸易大学硕士论文 j a v a s c r i p t 对于这棵d o m 树所做的任何修改都会立即生效，j a v a s c r i p t 不能够控制浏 览器重新呈现d o m 树的时间。因为浏览器重新呈现d o m 树是一个非常耗时的操作，所 以应该将做这种操作的次数尽量减到最少。 另外，d o m 树上的每个节点都是一个非常庞大的对象。为了直观地了解d o m 节点是 如何庞大，可以使用f i r e f o x 中的d o m 检查器任意打开一个d o m 节点，其中属性的数 量会让人大吃一惊，尤其是s t y l e 数组中的属性数量。因此当动态创建的d o m 节点不 再使用时，一定要及时释放掉。如果没有及时释放不用的d o m 节点，一段时间之后可 能会造成惊人的内存泄漏。本文第五章将对此进行详细讨论。 2 4 x m l ：a j a x 通信的载体 x m l “是s g m l ”的一个子集。x m l 的基本实现机制并不复杂，就是使用能够说明数据 本质而不是其表象的标记来标注数据，把数据的样式信息从文档中剥离出来，然后将 其放入相关的样式表文件中。x m l 实质上是一种电子文档信息的自定义语言，任何人、 任何行业都可遵循这些规则，自己定义各种标记来描述信息中的所有数据元素，然后 通过一种被称为解析器的小型程序进行处理。信息组织与描述方式的这种看似简单的 变化，其意义不仅在于改变了h t m l 僵化的固定标记集，并且从根本上改变了传统网页 的信息构造方式，创造了一种让所有计算机系统都能够进行交流的语言，使得基于信 息传输的互联网在信息获取、检索和交换方面发生了一系列重大变革，为整个互联网 智能化奠定了基础。”和传统的h t m l 语言相比，x m l 具有一些明显的特性 1 、 可扩展性 x m l 是s g m l 一个精简后的子集，它是一种元语言，使用者可以自己创建标签，因而 具有可扩展性；而h t m l 是s g m l 的一个实例，因而不可扩展。正是这种区别，使得x m l 在网络应用和信息共享上更加方便高效。 2 、 自我描述性和数据显示分离特性 h t m l 只是一种表现技术，h t m l 并不揭示h t m l 标签所标记的信息的任何具体含义。 如， u i b e 表示在浏览器中用黑体2 号字表示词u i b e ，但是并没有解释出这个 词的具体含义。而x m l 中将数据的语义和格式分开，) 【m l 文档只描述数据的语义信息， 而它的格式在样式语言中描述。x m l 的自我描述性质能够很好的表现许多复杂的数据关 系，使得基于x m l 的应用程序可以在x m l 文件中准确高效的搜索到相关的数据内容。 3 、 跨平台性 h t 眦在设计时将w e b 浏览器视为唯一的一种应用平台。而x m l 由于是s g m l 的子 集并且是基于文本的，所以非常容易被机器阅读，便于不同设备和系统间的信息交换， 也因此带来了有目共睹的j a v a 发展的新一轮高潮。不仅如此，x m l 可以支持各种通道 的数据传输，不同系统或不同设备之间完全可以采用x m l 作为信息交换的平台和媒介。 “c x 瓣l em a r l m pl p a 鲈，可扩展标识语言 ”s t a n d a r dg e n e r a lm a r k u pl a n g u a g e 。标准通用置标语言 廿方美琪。( x m l 另t 其在电子商务中的应用 ，北京：清华大学出版社，2 瞄 对外经济贸易大学硕士论文 由于x i i l 在语法结构上的优越性，使得它可以广泛的应用与数据交换、w e b 服务、 w e b 集成、电子商务、数据库应用、网络出版、特定文档的组织、系统配置文件等相关 的领域当中。 2 1 5x m l h t t p r e q u e s t 对象：通信中的异步调用 在a j a x 引擎中的几项技术中x m l h t t p r e q u e s t 是最核心的技术。) ( i l h t t p r e q u e s t 对象的应用主要体现在异步通讯中，异步通讯是a j a x 引擎解决无需刷新整个页面就可 以从服务器获取新数据这个问题的关键所在，通过它可以完成许多传统w e b 开发不能 完成的任务。图2 1 显示了x m l h t t p r e q u e s t 对象在a j a x 开发中的作用： 图2 1x m l h t t p r e q u e s t 对象在a j a x 开发中的作用 资料来源：本研究整理 在微软i e 平台下x m l h t t p r e q u e s t 是x m l h t t p 组件一个对象，它通过允许开发人 员在w e b 页面内部使用x m l h t t pa c t i v e x 组件扩展自身的功能，开发人员可以不用从 当前的w e b 页面导航而直接传输数据到服务器上或者从服务器取数据。这个功能是很 重要的，因为它帮助减少了无状态连接的痛苦，它还可以排除下载冗余w e b 数据的需 要，从而提高进程的速度。当然在其他we b 浏览器平台下，例如m o z i l l a 的m o z i l l a l 0 以上，k o n q u e r o r 和o p e r a ，它们都创建了它们自己的继承) 【m l 代理类- - 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 对象和x m l h t t p 组件很相似，方法和属性也类 似，只是有一小部分属性不支持。 x m l h t t p r e q u e s t 对象方法 方法描述 a b o r t 0 停止当前请求 g e t a ll r e s p o n s e h e a d e r s0作为字符串返问完整的h e a d e r s 1 2 对外经济贸易大学硕士论文 g e t r e s p o n s e h e a d e r ( h e a d e r l a b e l 4 )作为字符串返问单个的h e a d e r 标签 o p e n ( ”m e t h o d ”，”u r l ” ，a s y n e f l a g 设嚣未决的请求的目标u r l ，方法，和其他参 ，u s e r n a m e ，p a s s w o r d ) 数 s e n d ( c o n t e n t )发送请求 s e t r e q u e s t h e a d e r ( ”l a b e l ，v a l u e ”) 设置h e a d e r 并和请求一起发送 x m l h t t p r e q u e s t 对象属性 方法 描述 o n r e a d y s t a t e c h a n g e状态改变的事件触发器 r e a d y s t a t e对象状态( i n t e g e r ) ： o _ 未初始化 1 = 读取中 2 - 已读取 3 = 交互中 4 = 完成 r e s p o n s e t e x t服务器进程返回数据的文本版本 r e s p o n s e x m l服务器进程返回数据的兼容d o m 的x m l 文档 对象 s t a t u s 服务器返回的状态码，如：4 0 4 = “ 文件末找到”、2 0 0 = 成功“ s t a t u s t e x t服务器返回的状态文本信息 2 2a j a x 的工作流程简述 a j a x 的工作原理就是相当于在浏览器和服务器之间加了一个中间层，使用户操作 与服务器响应异步化。而这一中间层所要做的工作都是由a j a x 引擎( a j a xe n g i n e ) 来 完成的。实际上，a j a x 引擎就是一些复杂的j a v a s c r i p 程序，这些程序通过调用 x m l h t t p r e q u e s t 对象的属性和方法来与服务器端进行数据交互，然后再通过d o m 来解 析处理) ( m l 文档和部分更新h t m l 页面的内容。“接下来讨论a j a x 实现异步请求响应 模式的基本步骤。 h 王东亚、贾卓生，c a “再w e b 2 0 中的应用 ，科技资讯) t2 0 0 6 年第3 3 期 1 3 对外经济贸易大学硕士论文 囤圈囤囤 1 调用请求il； 寸磊2 哥 ：迅速通知i ；一一一一j 顶层包：用户 i i i i 2 a 发送h t t p 请求 l4 三璃 ：用户界面更新信息 l； f 一一1 一。il 图2 2 a j a 】【异步模式简图 资料来源：本研究整理 2 2 1 创建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 中的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 对象。以下代码显示了如何创建一个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 对象的底层实现不同，因此，在创 建时，应当确保与浏览器的兼容。 2 2 2 向服务器端发送请求 在创建了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 对象中的o p e n 和s e n d 方法可以实现此功能，如下所示： 1 4 天 对外经济贸易大学硕士论文 o p e n0 方法的第1 个参数m e t h o d 是h t t p 请求方式，可以为g e t 和p o s t 按照 h t t p 规范，该参数要大写，否则，某些浏览器可能无法处理请求。第2 个参数是 服务器端请求页面的u r l ，第3 个参数a s y n c h r o n o u s 是布尔类型，如果为t r u e ， 表示此次请求为异步请求模式，j a v a s c r i p t m 数在发送完这个请求之后将继续执 行，而不等待服务器响应。如果为f a l s e 表示此次请求为同步请求模式，j a v a s c r i p t 函数在发送完这个请求之后要等待服务器的响应，然后再继续执行。由此可见，a j a x 不仅可以提供异步请求响应模式，而且也能够提供一般的同步请求响应模式。 s e n d 方法的参数是空或是n u l l ，调用s e n d 方法就会向服务器端发送一次请求。 2 2 3 调用回调函数 服务器处理完请求后，调用回调函数：创建x m l h t t p r e q u e s t 对象向服务器发送 一个h t t p 请求后，要决定当收到服务器的响应后，需要做什么。这需要告诉 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 对象提供了o n r e a d y s t a t e c h a n g e 属性来指定回调函数，如 下所示： c a l l b a c k f u n c f i o n n a m e 是回调函数的函数名。 2 2 4 更新页面指定部分 回调函数解析服务器端返回处理结果并将它们更新到页面指定部分。在检查完请 求的状态值后，回调函数就可以处理从服务器端得到的数据了。有两种方式可以得到 这些数据： 以文本字符串的方式返回服务器端的响应数据，如下所示： 在以x m l d o c u m e n t 对象方式返回服务器端的响应数据后，需要利用d o m 来解 析x m l d o c u m e n t 对象，从中提取出响应数据，如下所示： 对外经济贸易大学硕士论文 iii v a rr e s u l t = r e s p o n s e , g e t e l e m e n t s b y t a g n a m e ( n o d e ) 0 f i r s t c h i l dd a t a 以上语句返回了n o d e 节点的数据。 在得到服务器端返回的响应数据后，就可以根据响应数据来更新页面内容了，d o m 也提供了对页面中各个对象的读写支持，如下所示： 以上语句将页面中i d 为m e s s a g e 的对象的内容更新为变量r e s u