（计算机应用技术专业论文）基于jsf的ajax组件开发与应用.pdf

摘要 针对当前w e b 界面普遍存在的交互能力不强和开发效率不高的 问题，本文提出开发基于j s f 的a j a x 组件来构建w e b 用户界面。j s f 是一个基于组件的w e b 界面开发框架，其核心是利用可重用、易扩 展的用户界面组件来构建w e b 界面，这有利于提高w e b 界面的开发 效率，而a j a x 技术则致力于解决w r e b 界面交互能力不强的问题，两 种技术有机结合，能成功地解决目前w e b 界面开发中面临的困难。 通过深入分析j s f 和a j a ) 【各自的工作原理、工作方式及其优缺 点，探讨了两者相结合的可能性，总结了三种结合方案，并分别设计 实现了相应的a j a x 组件实例：c a p t c h a 组件、a j a x 使能组件和在线 编辑器组件。c a p t c h a 组件直接利用s e r v l e t 来完成验证码的即时切换， 而不影响页面中其他组件。a j a x 使能组件可以方便地让页面中其他 普通的j s f 组件具备a j a x 事件处理能力，在开发该组件时由于采用 了定制a j a x 请求处理生命周期对象来处理a j a x 请求，在开发过程中 能更多地利用到j s f 提供的各种便利条件。在线编辑器组件可以在线 实施编辑、排版、输入图片、数学公式等多种功能，主要通过组合多 种现有的组件来构造。另外，为了方便这些组件的实际使用，还对组 件的打包问题进行了探讨，特别是针对资源文件的打包问题提出了解 决方案。测试和实际应用表明，这些组件均能比较好地达到预期目标。 最后，本文通过综合利用j s f 、s p r i n g 和h i b e r n a t e ，设计并实现 了一个实际应用系统在线论文指导系统，具体说明了a j a x 组件 在w e b 界面开发中的应用。 关键词a j a x ，j s f ，用户界面，组件 a bs t r a c t i nv i e wo ft h ep r o b l e mt h a tt h ei n t e r a c t i v ec a p a b i l i t yo f 眦 i n t e r f a c ei sn o tg r o n ga n di t sd e v e l o p m e n te f f i c i e n c yi sn o th i g h ，a s o l u t i o no fb u i l d i n g 盼6i n t e r f a c et h r o u g hd e v e l o p i n gj s f b a s e da j a x c o m p o n e n t sw a sp r e s e n t e d j s fi s ac o m p o n e n t b a s e dw e bi n t e r f a c e d e v e l o p m e n tf r a m e w o r k ，i t sk e yi st oc o n s t r u c tw 曲i n t e r f a c eb yu s i n g r e u s a b l ea n de x t e n s i b l eu s e ri n t e r f a c ec o m p o n e n t s ，w h i c hi sc o n d u c i v et o e n h a n c et h ee f f i c i e n c yo ft h ed e v e l o p m e n to f 溉6i n t e r f a c e s ，a n da j a xi s ac l i e n tb r o w s e rt e c h n o l o g yt oi m p r o v et h ei n t e r a c t i v ec a p a b i l i t yo fw e b p a g e s 1 1 1 em e n t i o n e da b o v ep r o b l e mc a nb es e t t l e dt h r o u g hi n t e g r a t i n g t h et w ot e c h n o l o g i e s t h r o u g ha n a l y z i n g t h ew o r kp r i n c i p l e ，w o r kp a t t e r na n dt h e a d v a n t a g e sa n dd i s a d v a n t a g e so fj s fa n da j a xr e s p e c t i v e l y , t h i sp a p e r d i s c u s s e dt h ep o s s i b i l i t yo fc o m b i n i n gt h et w ot e c h n o l o g i e s ，s u m m a r i z e d t h r e ec o m b i n i n gs c h e m e sa n dd e s i g n e dai n s t a n c eo fa ja xc o m p o n e n tf o r e a c hs c h e m e ：c a p t c h ac o m p o n e n t ，a j a xe n a b l e dc o m p o n e n ta n dt h e o n l i n ee d i t o rc o m p o n e n t c a p t c h ac o m p o n e n tc o m p l e t e st h ev e r i f i c a t i o n c o d es w i t c hb yu s i n gs e r v l e td i r e c t l y , w i t h o u ta f f e c t i n go t h e rc o m p o n e n t s i nt h ep a g e a ja x e n a b l e dc o m p o n e n tc a ne a s i l yl e to t h e ro r d i n a r yj s f c o m p o n e n t so ft h i sp a g ep o s s e s st h ec a p a b i l i t yt oh a n d l ea j a xe v e n t ，a n d d u et ou s i n ga ja xr e q u e s tp r o c e s s i n gl i f e - c y c l eo b je c tt oh a n d l ea j a x r e q u e a ，d e v e l o p e rc a nm a k eg r e a t e ru s eo f av a r i e t yo ff a c i l i t i e sp r o v i d e d b yj s ft od e v e l o pa j a xc o m p o n e n tr a p i d l y t h eo n l i n ee d i t o rc o m p o n e n t w a sc o n s t r u c t e dt h r o u g ht h ec o m b i n a t i o no fv a r i o u se x i s t i n gc o m p o n e n t s o re l e m e n t sw i t hag r e a td e a lo ff u n c t i o n ss u c ha so n l i n ee d i t i n g ，l a y o u t ， u p l o a d i n gi m a g e ，e n t e r i n gm a t h e m a t i c a lf o r m u l a s ，a n ds oo n i na d d i t i o n ， i no r d e rt of a c i l i t a t et h ep r a c t i c a lu s eo ft h e s ec o m p o n e n t s ，t h ep a c k a g e m e c h a n i s mo ft h ec o m p o n e n tw a sd i s c u s s e d ，a n dan e ws o l u t i o nw a s p r o p o s e de s p e c i a l l yf o rt h ep a c k a g eo fr e s o u r c ef i l ei nt h ec o m p o n e n t t e s tc a s e sa n dp r a c t i c a la p p l i c a t i o n ss h o wt h a tt h ed e s i r e do b j e c t i v ec a n b ea c h i e v e db yu s i n gt h e s ec o m p o n e n t s i i f i n a l l y , t h r o u g ht h ec o m p r e h e n s i v eu s eo f j s f , s p r i n ga n dh i b e r n a t e ， ap r a c t i c a ls y s t e m - o n l i n ep a p e r sg u i d a n c es y s t e m sw a sd e s i g n e da n d i m p l e m e n t e dt oi l l u m i n a t et h ep r a c t i c a l i nw e bi n t e r f a c e d e v e l o p m e n t a p p l i c a t i o no fa j a xc o m p o n e n t s k e yw o r d s a ja x ，j s f , u s e ri n t e r f a c e ，c o m p o n e n t i i i 原创性声明 本人声明，所呈交的学位论文是本人在导师指导下进行的研究工作及 取得的研究成果。尽我所知，除了论文中特别加以标注和致谢的地方外， 论文中不包含其他人已经发表或撰写过的研究成果，也不包含为获得中南 大学或其他单位的学位或证书而使用过的材料。与我共同工作的同志对本 研究所作的贡献均已在论文中作了明确的说明。 作者签名：塑 日期：上学年上月孚日 学位论文版权使用授权书 本人了解中南大学有关保留、使用学位论文的规定，即：学校有权保 留学位论文并根据国家或湖南省有关部门规定送交学位论文，允许学位论 文被查阅和借阅；学校可以公布学位论文的全部或部分内容，可以采用复 印、缩印或其它手段保存学位论文。同时授权中国科学技术信息研究所将 本学位论文收录到中国学位论文全文数据库，并通过网络向社会公众提 供信息服务。 作：丝新签名犁嗍4 年上月孚日 高校教师硕十学位论文第一章绪论 1 1课题背景 第一章绪论 目前，随着互联网技术的迅猛发展，基于b s 模式的w e b 应用由于其操作 简单、部署方便、扩展性好、易维护等特点，日益受到人们的青睐，越来越多 的的企业级关键应用转移到w e b 上，w e b 系统的开发现已逐渐成为软件开发的 主流。 然而，随着w e b 系统应用的深入广泛，人们对w e b 系统的要求也逐步提高， 在w e b 界面开发领域，有两大问题日益显得突出起来。一个是交互能力方面。 受网络带宽和浏览器端技术的限制，传统的w e b 技术普遍采用“请求一响应 式的同步交互方式，任何一个页面请求都将导致整个w e b 页面的重新加载装入， 与c s 模式的软件系统比较，显得响应速度慢、交互能力差。在软件使用越来 越人性化的今天，这些不足同益为人所诟病。另一方面就是w e b 界面的开发效 率问题。传统c s 模式下的系统多采用成熟的基于组件的构建用户界面方案， 而且借助一些r a d ( r a p i da p p l i c a t i o nd e v e l o p m e n t ，快速应用开发) 工具，采 用鼠标拖曳组件元素到工作区的方式就可以方便快捷的构建高质量用户界面。 而在w e b 界面开发领域，基于组件的构建框架还处于起步阶段，在开发w e b 界 面的方便程度和开发效率方面，远较c s 模式下的系统界面丌发要低。因而， 这两个问题是目前w r e b 界面丌发领域迫切需要解决的问题。 1 2 研究现状 针对w e b 界面交互能力不足的问题，人们陆续提出了许多r 队( m c hi n t e m e t a p p l i c a t i o n s ，富互联网应用) 方案，其中，a j a ) 【i l j ( a s y n c h r o n o u sj a v a s c r i p ta n d x m l ，异步j a v a s c r i p t 和x m l ) 是一种得到广泛应用的r i a 技术。它本质上是 一种运用于浏览器的技术，可以在浏览器和服务器之问使用异步通信机制进行 数据通信，从而允许浏览器向服务器按需获取信息而不是重新载入整个页面。 a j a x 相比于其他方案的好处是：所使用的技术都是一些已存在的技术，无需为 浏览器增加额外的插件，实现门槛相对较低。然而手工运用a j 觚非常复杂、容 易出错。此外，不同浏览器实现a j a x 的具体方式也有可能不同，处理浏览器间 兼容问题并不是一件容易的事。因此，a j a ) 【需要强大的框架支持才能更好地发 挥其优势。为了方便程序员进行a j a x 的开发，现在不少的组织或机构推出自己 的a j a x 开发框架，如d o j o 2 1 、d w r 3 1 、p r o t o t y p e 4 】等等。到目前为止a j a x 仍在 高校教师硕十学位论文第一章绪论 不断地发展，相关技术层出不穷，种类繁多的新的开发框架和组件库的出现在 给a j a x 开发带来很多便利的同时，也使a j a x 的应用处于一种混沌状念。如何将 a j a x 应用于企业级的w e b 应用中，如何实现基于a j a x 的w e b 开发仍然是一个 非常值得研究的问题。 针对用户界面开发效率的问题，出现了a s e n e t 5 l 和j s f t 6 l ( j a v a s e r v e r f a c e s ) 这样的w e b 界面开发技术。它们共同的特征是：提供了一个基于组件的 事件驱动的w e b 用户界面开发模型。其中a s e n e t 是微软公司的专属产品，组 件功能强大，与微软提供的开发工具结合紧密，易用性好，但开放性不够，深 入到组件内部编程十分不易。而j s f 属于j 2 e e 领域的开放标准，组件封装机制 强大，甚至可以将任何页面元素融入到其组件封装机制之中。另外，作为新一 代的w e b 应用程序界面标准的j a v a 框架，在吸取了现有的w e b 表示层开发框架 ( 如s t r u t s 7 s 1 ) 的成功经验的基础上，以j s p s e r v l e t 技术为基础成功地把m v c 设计方式和强大的、基于组件的用户界面开发框架相结合，极大地简化了j 2 e e w e b 开发，在不牺牲j 2 e ew e b 应用程序开发能力和灵活性的情况下，带来了前 所未有的简易性和生产率。而且，作为一种标准技术框架，能够更多地获得开 发工具厂商的关注和支持，进一步方便w e b 用户界面的开发。当然，作为一种 新兴的技术框架，j s f 存在着许多尚待完善的地方，如j s f 组件受目前浏览器端 技术的限制，普遍存在着交互能力不足的问题，一次页面请求仍将导致整个页 面重载刷新，这在某些交互需求比较频繁的场合，将极大地影响相关应用程序 的正常使用。 另外，j s f 作为一种表示层的框架，还需要和其他层框架有机配合，才能真 j 下有效地发挥作用，目i j i f ，在j 2 e e 领域的成熟框架也比较多，并各具特色，如 e j b 9 1 就是一个重量级的服务器端组件框架，它能够自动处理企业级计算的分布 式事务、安全等复杂特征，从而简化分布式系统的开发。采用e j b 编写的应用 系统具有伸缩性、交互性和多用户安全特性。这些应用程序只需写一次，即可 部署在任何支持e j b 规范的服务器平台上，当然做为一种“全能型解决方案， e j b 开发时要考虑的问题比较多，因而比较复杂烦琐。然而对于大多数中小企业 的系统来说，e j b 显得过于庞大，因而近年来关注的比较多的是所谓轻量级框架 集合，使用比较广泛的有：业务逻辑层框架s p r i n g 加j ，数据访问层框架 h i b e r n a t e 1 、i b a t i s t l 2 1 、t o p l i n k 1 3 1 等，这些框架各有特色，在各自适宜的场合， 能够发挥重大的作用，目前s p r i n g + h i b e r n a t e 的组合采用得比较多，这方面的成 功案例也为数不少【1 4 】。 综上所述，j s f 是j 2 e e 领域中一种基于组件的w e b 界面开发的标准框架， 提供了一套基于组件的开发方法，能高效率地开发w 曲界面，代表了当今w e b 2 高校教师硕十学位论文第一章绪论 界面开发的主流趋势和未来。然而，受当前客户端浏览器技术的影响，其在交 互能力方面，尚未深入考虑，因此j s f 组件普遍存在着交互能力不足的问题。 而a j a x 开发方面，仍然缺乏比较好的可复用的框架，开发效率低，可维护性差， 不利于团队分工与合作，直接引入可能会破坏w e b 开发和部署模式，在一些已 经很成熟的框架中运用，甚至可能会影响框架的可重用性和可维护性。因此， 如何使j s f 和a j a x 有机结合，是个值得研究的课题，另外，作为一种新兴的 w e b 层框架，如何与w 曲系统中其他框架有机结合，也是一个值得探讨的问题。 1 3 研究内容及主要工作 课题研究的主要内容及工作如下： ( 1 ) 基于j s f 的一般a j a x 组件开发。直接利用s e r v l e t 服务a j a x 事件，然后 再利用j s f 组件封装机制把相关部分封装成一个组件。这种方式比较适用于a j a x 事件处理逻辑比较简单的情形，绝大多数的a j a x 组件的开发属于这种情况。 ( 2 ) 基于定制生命周期的a j a x 组件开发。通过深入剖析j s f 定制生命周期 及其事件处理机制，为a j a x 事件处理设置专门的生命周期对象，使得a j a x 组件 在开发过程中更多地利用到j s f 提供的便利条件，如e l 表达式和托管b e a n ， 加快a j a x 组件的开发效率。 ( 3 ) j s f 复合组件构建技术及其实现机制研究。利用j s f 组件封装机制将已 有页面元素( 包括普通h t m l 元素、j s p 页面、j s f 页面等) 有机组合起来构建 一个新的组件。 ( 4 ) 分析研究j s f 组件的打包机制，特别是对资源( 包括图片、j a v a s c r i p t 文件、c s s 文件以及j s p 、j s f 页面文件等) 的打包问题提出切实可行的方案。 ( 5 ) 综合利用j s f 、s p r i n g 、h i b e r n a t e 开发一个实际的w e b 系统来说明a j a x 组件在w e b 界面构造中的具体作用。 1 4 论文组织和结构安排 文章内容结构安排如下： 第一章绪论。主要介绍本课题的研究背景以及研究内容，明确研究对象和 和要实现的目标。 第二章相关技术概述。简要介绍本课题中涉及的相关技术，主要涉及到j s f 和a j a x 技术各自的工作原理、工作方式、优缺点等，以及与本课题相关的其他 技术，如s p r i n g 、h i b e r n a t e 等。 高校教师硕+ 学位论文第一章绪论 第三章结合a j a x 技术开发j s f 组件。主要涉及到三个组件的开发，分别代 表三类不同的结合类型。第一个是c a p t c h a 组件，直接用s e r v l e t 响应a j a x 事件， 用j s f 组件封装机制来进行封装。第二个是a j a x 使能组件，通过深入剖析j s f 定制生命周期的实现原理和动作事件处理机制，设置专门的a j a x 事件处理生命 周期来响应a j a x 事件，这样就可以在a j a x 组件开发过程中，更多地利用到j s f 提供的一些便利条件，高效率的开发a j a x 组件，该组件可以直接在j s f 页面中 引用，为普通j s f 组件增添a j a x 事件处理能力。第三个组件是一个在线编辑器 组件，主要是利用j s f 组件封装机制将若干页面元素有机组合起来，作为一个 整体提供在线编辑服务，其中的t e x 公式输入模块利用到a j a x 使能组件来提高 页面交互能力。最后为方便在实际系统中使用j s f 组件，对j s f 组件的打包机 制进行了研究，对其中的一些问题，特别是资源打包问题进行了讨论，并提出 自己的解决方案。 第四章在线论文指导系统的设计与实现。综合利用j s f 、s p r i n g 、h i b e r n a t e 、 m y s q l 开发一个实际系统。其中，在线编辑模块要求比较高：交互能力要强、 具备排版功能、要求在线输入公式、图片等，利用前面开发的在线编辑组件可 以很好地满足需求。 第五章总结与展望。对所做的研究工作进行总结，并提出下一步的研究方 向。 4 高校教师硕十学位论文第二章相关技术介绍 第二章相关技术介绍 本章依次介绍j s f 、a j a x ，以及可以同j s f 配合使用的业务逻辑层框架s p r i n g 和数据访问层框架h i b e r n a t e 。 2 1新一代的w e b 框架叫s f 由于互联网技术自身的众多优点，如今越来越多的信息化解决方案都采用 b s 体系结构。早期的服务器端应用程序是通过程序生成h t m l 页面返回给客 户端，客户端再使用浏览器将它们显示给用户，随后出现的s e r v l e t j s p 、s t r u t s 等技术为创建w e b 应用提供了一个强大的实现模型，可以更好地控制业务逻辑 和表现逻辑。尽管如此，这些技术规范却没有定义相关的a p i 来创建客户端的 图形用户界面，这使得开发人员不得不手工管理页面中控件的状态并处理相关 的事件，增大了w e b 应用开发的复杂度且容易出错的，不便于项目的快速丌发 和实施。因此，创建一个标准的图形用户界面组件框架，简化w e b 应用中图形 用户界面的开发，势在必行，j s f ( j a v a s e r v e rf a c e s ) 就是在这种背景下，由e d b u m s 、c r a i g m c c l a n a h a n 等人于2 0 0 1 年5 月提出意向，并在2 0 0 4 年5 月2 7 同最终形成规范标准【l 引。 2 1 1 j s f 基本组成 j s f 主要包括两大方面的内容【l5 。埔l ： ( 1 ) 一个a p i 集合，用来表示用户界面组件、托管b e a n 的状态、处理事件 和验证输入、定义页面间导航以及支持国际化。 ( 2 ) 一个j s p 自定义标签库，用来在j s p 页面中显示j s f 组件。 其中a p i 集合是j s f 的核心组成部分，可以把j s f 看成是s t r u t s 和s w i n g 的组合：像s t r u t s 那样遵循m v c 体系结构，通过一个控制器s e r v l e t 来管理应用 程序的生命周期；而像s w i n g 那样提供一个可扩展的组件模型，此组件模型还 包含了一个重要功能呈现组件。所谓呈现组件就是把所包含的信息转换成 客户端能够接受的表达形式，比如w e b 浏览器而言就是h t m l 页面，而对于手 机等无线移动设备所使用的w a p 浏览器而言就是w m l 页面，每个组件都具有 各自的呈现组件的功能。 通过使用j s f 所提供的简单而又实用的模型，任何开发人员都可以快速轻 高校教师硕+ 学位论文第二二章相关技术介绍 松地开发w e b 应用程序。他们可以使用大量现成的可重用的用户界面组件，并 将这些组件通过托管b e a n 的衔接与数据源连接，还可以很容易地将客户端事件 和服务器端的事件处理程序绑定。强大的j s f 技术可以很好地处理和管理任何 复杂的用户界面，使开发人员可以将注意力集中在应用程序的开发上。 2 1 2j s f 工作方式 j s f 应用是事件驱动的【1 7 1 。整个系统的工作是通过页面中组件的事件来触 发当一个事件发生时，事件通知通过h t t p 发往服务器，服务器首先委托前 端控制器f a c e s s e r v l c t 来接收该事件通知，然后为之生成一个叫做f a e e c o n t e x t 的对象，它包含了处理请求所必须的信息，亦即w e b 容器传给f a e e s s e r v l e t 的 溯哳c e s 方法的s e r v l e t c o n t e x t 、s e r v l e t r e q u e s t 以及s e r v l e t r e s p o n s e 对象。在处 理过程中主要修改这个对象。 接着f a c e s s e r v l e t 把控制权交给l i f e c y c l e 对象，由它具体负责页面请求的具 体处理，过去必须自行编写代码才能处理的后端处理工作，现在全由l i f e c y c l e 自动完成：除了处理进入的请求参数，它还管理服务器端用户界面组件集，并 把它们与用户在客户端浏览器中看到的组件同步。另外，为了更加灵活的处理 请求，j s f 将整个请求处理过程在内部又细分成了六个阶段，同时在这些阶段之 间设置了事件处理的出口，整个处理过程如图2 1 所示f 8 ，墙】。 响廊完成 t 响应完成 ： _ - - ；验证转换错误呈现响心 - ，1 ，。 ：一一一 图2 - 1j s f 请求处理生命周期 6 高校教师硕十学位论文第二章相关技术介绍 2 1 3 j s f 应用开发过程 j s f 应用程序实际就是标准j 2 e ew e b 应用程序，因此对于基本的j s f 开发 是个很简单的过程，通常包括： ( 1 ) 构建j a v a 类，并把它们添加成j s f 托管b e a n 。 ( 2 ) 创建j s p 页面，包含j s f 用户界面组件标签，组件标签绑定到托管b e a n 的属性和方法。 ( 3 ) 定义一套导航规则，安排好事件及事件监听动作之间关系。 ( 4 ) 做好相关的配置与部署工作。 对于大型的系统而言，开发人员可以分成以下几种角色：页面设计人员、 代码丌发人员和组件开发人员。这几种角色可以相互配合、并行工作，从而提 高项目的开发效率。 对于页面设计人员而言，其任务就是在页面中放置j s f 组件，将这些组件 与应用层的j a v a b e a n 绑定、放置v a l i d a t o r 验证器类和c o n v e r t e r 转换器类等。 对于代码开发人员而言，除了编写应用程序代码以外，一个重要的任务就 是配置应用程序。在j s f 中，配置应用程序主要包括两个方面：一是配置w r e b 应用程序的部署描述符文件w e b x m l 。在这罩需要指定f a c e s s e r v l e t 和 f a c e s s e r v l e t 映射关系。f a c e s s e r v l e t 就是j s f 的前端控制器，它处理所有与j s f 相关的请求；而f a c e s s e r v l e t 映射关系则定义了一个规则，以便让含有j s f 请求 的页面由f a c e s s e r v l e t 来处理。另一个要配置的文件是f a c e s c o n f i g x m l ，它作为 j s f 特定的配置信息文件，主要包含两个方面的内容：托管b e a n 的声明和页面 导航规则。 如果j s f 提供的标准组件库不能满足应用的要求，这时就需要组件开发人 员来创建自定义的组件。 2 1 4j s f 技术特点 总的来说j s f 从以下几个方面简化了用户界面丌发： ( 1 ) 为w r e b 用户界面的构建提供以组件为中心、独立于客户端的开发手段， 从而提高开发人员的生产率，提高易用性。 ( 2 ) 组件中封装了事件处理、输入验证等操作，利用j s f 所提供的运行环境 可以很容易地将客户端事件与服务器端的事件处理程序绑定，简化从w e b 用户 界面对应用程序数据的访问和管理。 ( 3 ) 用简单的、非侵入的方式在多个请求和多个客户之间自动管理用户界面 7 高校教师硕十学位论文第二章相关技术介钌 的状态。 ( 4 ) j s f 所提供的框架具有很好的可扩展性，能够使开发人员实现可重用的 自定义组件。 ( 5 ) j s f 做到了应用程序逻辑和表示的完全分离，是真j 下的m v c 模式。这正 是j s f 符合j 2 e e 三层企业结构的关键所在，为j 2 e e 平台提供了强有力的支持。 ( 6 ) 提供了一个对拥有不同技能组合的各类开发人员都友好的开发框架。可 以进一步细化开发人员的分工，在页面设计人员和代码开发人员的基础上引入 了组件开发人员他们负责创建可重用的用户接口对象，从而有利于项目的 团队开发，加快开发进度，此外组件开发人员可以进一步演化成第三方的组件 开发提供商，专门提供高质量的组件，提高行业的整体开发水平。 除了这些细节之外，j s f 还提供了另一项重要的好处，它通过吸取了多年来 w e b 应用程序开发中的成功经验，提供了一个简单、全面、标准的a p i ，可以在 不牺牲j 2 e ew e b 应用程序开发威力和灵活性的情况下，简便高效地开发w | e b 用户界面组件【8 】。 当然，作为一个发展中的技术方案，j s f 远非十全十美，有许多功能尚待补 充和完善【1 9 1 ，如受当前浏览器端技术的限制，j s f 组件目前普遍存在着交互能力 不强的问题：每一次页面请求都将会导致全页面刷新，这在交互需求比较大的 场合将极大地影响客户对系统的使用。 2 2 a j a x 技术概述 随着w e b 应用的r 益深入广泛，w e b 应用程序不再是简单的用来发布新闻 的网站，而逐步融合核心业务逻辑，成为i t 领域的业务处理平台。而传统的 w 曲模型下那种每次页面请求都会引起整个页面刷新的同步交互模式日益为人 所不满，为解决这方面的问题，2 0 0 5 年2 月j e s s ej a m e sg a r r e t t 提出了a i a x 【lj 的 概念，此后，由于实施门槛低且功效显著，a j a x 日益受到人们重视，现已成为 改善用户页面体验效果的首选技术之一。 2 2 1 a j a x 关键技术 a j a x 虽然是个很新的名词，但并不是- l - j 全新的技术，或者说它不是一种 技术，它只是多种已有的成熟技术的综合：j a v a s c r i p t 、x h t m l 和c s s 、d o m 、 x m l 和x s t l 、x m l h t t p r e q u e s t 等技术按照一定方式在协作中发挥各自作用就 8 高校教师硕士学位论文第二章相关技术介绍 构成了a i a ) 【脚1 1 。 1 使用( x ) h t m l 和c s s 标准化呈现 ( x ) h t m l ( e x t e n s i b l eh y p e r t e x tm a r k u pl a n g u a g e ，可扩展超文本标记语言) 主要负责页面的展现，它同c s s ( c a s c a d i n gs t y l es h e e t ，级联样式表单) 一起负 担起显示页面、美化页面的作用。另外，要说明一下，虽然a j a x 技术框架包括 x h t m l ，但在实际应用中，并没有任何技术障碍限制使h t m l 。a j a x 技术框架 之所以推荐使用x h t m l 而不是h t m l ，主要是考虑到能够用x s l t 技术，以 及支持s m i l l 2 2 】或s v g 2 3 】等优点。但在实际的应用中x s l t 使用得不多，s m i l ， s v g 就用得更少了。因此在a j a x 应用中使用h t m l 在一般情况下没有问题的。 但是基于标准化和扩展的原则出发，建议尽可能的使用x h m t l 。 2 使用d o m 实现动态显示和交互 d o m ( d o c u m e n to b j e c tm o d e l ，文档对象模型) 是操作( x ) h t m l 和x m l 文件的一组a p i ，它提供了文件的结构表述。通过使用d o m ，可以采用编程方 式操作文档结构，还可以改变文档的内容。通过使用d o m ，( x ) h t m l 页面以 一种结构化方式组织在一起，其内容以节点方式组织。w e b 程序开发者可以方 便地增加文件的节点、属性及事件，从而提供对页面的动态更新。 3 使用x m l 进行数据交换与处理 x m l ( e x t e n s i b l em a r k u pl a n g u a g e ，可扩展标记语言) 是a j a x 技术的又一 重要组成部分，在a j a x 应用程序中，x m l 通常作为数据传输的媒介：服务器通 常采用返回x m l 文本的方式将响应后的数据返回给浏览器客户端。此外，a j a x 引擎和w e b 应用程序的其他接口交互以获取相应的数据时也是常常选择用x m l 进行交互，因为x m l 几乎可以和所有类型格式的数据之间进行相互转换。当然 有些情况下，可以采用j s o n l 2 4 j 等技术替代x m l 。 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 是整个a j a x 技术的灵魂，a j a x 技术的核心是异步发送请 求，而x m l h t t p r e q u e s tj 下是支持异步发送请求的的对象，如果抛丌异步发送请 求，a j a x 的其他技术完全失去原有的意义。 5 最后用j a v a s c f i p t 绑定和处理所有数据 j a v a s c r i p t l 2 5 2 6 1 是一种跨平台的脚本语言，它简单、易用，而且在绝大部分 浏览器中都运行良好。在a j a x 中，j a v a s c r i p t 已经从默默无闻的后台状态完全转 移到前台，发挥着巨大的作用。可以说，j a v a s c d p t 是a j a x 中的粘合剂，它使 d o m 、x h t m l 、x m l 和c s s 可以互相协作，并控制它们的行为。 9 高校教师硕十学位论文 第二章相关技术介绍 2 2 2 a j a x 工作原理 对于传统的w e b 应用模型，大部分界面上的用户动作都会触发一个连接到 w e b 服务器的h t t p 请求。服务器处理完毕后将会返回一个h t m l 页面到客户 端。这期间，用户只能等待，每一个发出动作，用户都要等待。很显然，在交 互比较频繁的应用场合下，这种方式很难让用户感到满意。图2 2 描述了这种传 统w e b 模型的工作方式。 浏览器 用户界面 j i h t t p 请求h t m l c s s 1r w e b 服务器 工 数据库，后台程序 w e b h 臣务器 图2 - 2 传统w e b 模型工作方式 在a j a x 模型中，通过在用户和服务器之间引入一个a j a x 引擎，可以消除旧 的w e b 模型中的“开始一等待一开始这样的交互过程，使它的响应更灵敏。 在会话的开始时浏览器首先加载了一个a j a x 引擎，再由该引擎负责绘制用户界 面并与服务器通信。所以用户不用再打开一个空白窗口，等待服务器完成后再 响应了。图2 3 描述了a j a x 模型的工作方式。 l o 高校教师硕七学位论文 第二章相关技术介纠 浏览器 用户界面 加涮讲上丁h t m l c s s a j a x 3 1 擎 jl h t t p 请求x m l 数据 1r w e b 服务器 1 l 数据库、后台程序 w e b 服务器 2 2 3 a j a x 工作过程 图2 - 3a j a x 模型工作方式 a j a x 进行异步通讯的关键就在于浏览器内置的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 c s t 对象，为该对象设置对应参数，打开 通讯通道，发送相应数据到服务器，当服务器返回信息时调用设置的回调函数 从而完成通讯过程。下面将详细描述整个通讯的过程。 1 创建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 对象发送请求和处理响应之前，首先必须使用 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 3 c 标准，所以 不同的浏览器创建x m l h t t p r e q u e s t 对象的方法有所不同。如i e 中把其实现为 一个a c t i v e x 对象，而m o z i l l a 、f i r e f o x 和o p e r a 等则将其实现为一个j a v a s c r i p t 对象。所以在创建该对象时，要区别不同的情况分别创建。创建代码如下： v a rx m l h t t p ： f u n c t i o nc r e a t e x m l h t t p r e q u e s t o i f ( w i n d o w a e t i v e x 0 b j e e t ) 如果是i e 浏览器 高校教师硕十学位论文第二章相关技术介绍 x m1h t t p - - n e w a e t i v e x o b j e e t ( “m i c r o s o f t x m l h t t p ”) ； ) e l s e i f ( w i n d o w x m l h t t p r e q u e s t ) 如果是其他浏览器 x mlh t t p - - n e w x m l h t t p r e q u e s t ( ) ； ) ) 2 为该对象设置参数 常用的方法和属性有： g e t a l l r e s p o n s e h e a d e r s o ：获取响应中的所有h r r p 首部值。 g e t r e s p o n s e h e a d e r ( s t r i n gh e a d c r ) ：从响应体中获取指定的h r r p 首部的值。 o p e n ( s t r i n gm e t h o d ，s t r i n gu r l ，b o o l e a na s y n ) ：建立与服务器的连接，m e t h o d 表示通讯的方式，一般为p o s t 、g e t 方式；u r l 参数表明调用的服务器端地址；a s y n 表明是否采用异步通讯方式。 s e n d ( s t r i n gd a t a ) ：这个方法具体向服务器发送请求数据。如果请求声明是异 步的，这个方法会立即返回，否则会一直等待，直至接收到响应。d a t a 的内容使 用名值对方式组织，并用“& 符号分隔不同的名值对数据。 s e t r e q u e s t h e a d e r ( s t r i n gh e a d e r , s t r i n gv a l u e ) ：为h t t p 请求中一个给定的首 部设置值。这个方法必须在o p e n ( ) 之后才能调用。 r e a d y s t a t e ：表明异步通讯过程中的当前状态。有5 个可取值，0 为未初始化， l 为正在加载，2 为己加载，3 为交互中，4 为完成。 o n r e a d y s t a t e c h a g e ：每当x m l h t t p r e q u e s t 对象的状态发生改变都会触发这 个事件处理器，通常设置一个j a v a s c r i p t 函数以备适时调用。 r e s p o n s e t e x t ：服务器返回的响应，表现为字符串形式。 r e s p o n s e x m l ：服务器返回的响应，其格式为x m l ，符合d o m 规范。 s t a t u s ：服务器的h t t p 状念码( 如2 0 0 对应o k ，4 0 4 对应f i l en o tf o u n d ) 。 s t a t u s t e x t ：响应状态码所对应的字符串消息。 3 打开通讯通道 一般调用o p e n 方法就可以了。需要注意