Ajax在信息系统中的应用研究
当前位置:知识管理交流
→『 技术文档交流 』
[b]关键字:ajax、javascript、xmlhttprequest、异步交互、xml[br][/b] [br][color=#ff6600][b]一、绪论[/b][/color]
由于系统开发成本低、时间短,在过去的几年里,c/s结构一直是信息系统开发采用的主要模式。但随着企业规模的日益扩大,应用程序复杂程度不断提高,传统的c/s结构的系统暴露出越来越多的问题:系统客户端日趋庞大而显得“臃肿”,同时服务器负担日益加重。而且c/s系统的布署、迁移和维护的成本很高,使企业信息系统的总拥有成本大为提高。
随着web技术发展,b/s结构越来越受到系统开发商的青睐。与c/s结构比较,b/s结构具有系统维护方便、支持广泛、跨平台的优点,所以b/s三层结构大有取代c/s两层结构之趋势。
虽然很多开发商开始倾向于开发b/s结构的系统,但b/s结构也存在自身弱点,即b/s结构采用的html语言表现能力和交互能力太弱,除了文本输入框、选择框、按钮之外,几乎就没有其他的任何控件了。b/s结构的这个特点让那些曾经使用c/s系统的用户难以适应,所以目前c/s仍然无法被b/s完全替代。因此如果能够结合c/s和b/s两种模式的特点,在信息系统开发中引入一个混合型模式似乎更能满足企业和用户的要求。
b/s结构的系统与用户之间是一个同步交互的过程。在客户端,用户通过浏览器(browser)进行操作,向服务器发送一个http请求;服务器(server)端接收到用户的请求后,执行相应的操作,然后向客户端的用户返回响应结果,即一个html页面。这个过程是一种不连贯的用户体验,即在服务器处理用户请求的时候,用户大多数时间都处于等待的状态,浏览器上大多是一片空白。
当服务器负载比较小时,该种交互过程并无不妥。可是当服务器负载较大时,服务器响应用户的请求时间可能会大于1分钟甚至几分钟,这样长时间的等待服务器响应对于用户来说是难以接受的。甚至有时候用户长时间等待的却是服务器返回的一个服务超时的错误消息。另一方面,某些时候用户只是想改变页面中一小部分的数据,而在传统的b/s模式中实现时,浏览器仍然需要重新加载整个页面的数据。目前,软件设计越来越讲究人性化,上述不友好的用户体验与人性化的原则背道而驰。如果能够减少用户等待服务器响应的时间,就可以提高用户体验。目前,除了程序设计、编码优化和服务器调优等措施可以缩短用户的等待时间之外,还可以采用ajax技术。随着gmail、google-maps的推出,ajax正逐渐吸引全世界开发者的目光。
在2005年的2月,jesse james garrett发表了一篇 《ajax: a new approach to web applications》的文章,在该篇文章中ajax概念第一次被提出来(asynchronous javascript and xml,异步javascript和xml),之后,关于ajax技术的研究铺天盖地蔓延开来。尽管目前该技术还不是很完善,但是它已被大多数开发者认为是目前开发b/s系统客户端的最好的解决方案之一,而现在已经涌现出大量基于ajax的应用系统。
在ajax技术的研发方面,google当仁不让是表率。gmail、google groups、google maps、google suggest都应用了ajax技术。在javaone 2006上,google发布了google web toolkit(简称gwt),它是一个基于java的ajax应用开发框架,可以用java开发前端应用并将其转换为使用ajax实现的javascript/html应用。业界正在猜测google下一步即将推出基于ajax技术的网络办公套件,届时,用户只需打开浏览器,就可以使用像微软的诸如word、excel、powerpoint之类office工具了。
作为google的对手,微软也在积极开发更为完善的ajax应用:它即将正式推出代号为atlas的ajax工具。atlas的功能超越了ajax本身,包括整合visual studio的调试功能。另外,新的asp.net控件将使客户端控件与服务器端代码的捆绑更为简便。atlas客户脚本框架(atlas client script framework)也使与网页及相关项目的交互更为便利。
基于ajax的开发框架,国内外开发了许多优秀的商业和开源的产品。
1. bindows
bindows 是一个处于web应用程序中表示层的“胖客户”图形用户界面工具,拥有与现代桌面应用程序相同的外观、感觉和事件。是一个轻量级的b/s应用程序开发框架。该框架已经将javascript的oop和基于ie6.0的dhtml发挥到极点, 其中javascript用于客户端界面的显示和处理,xmlhttp用于客户端与服务器的信息传输。bindows提供了一个封装好的可以直接利用的js类库,使得开发过程变得十分快捷。web系统原有的界面交互性差、页面刷新等问题都可以很好地解决。
然而bindows并非完美,它封装了太多的原本html就提供的控件、事件和方法,使得类库过于庞大并且内部藕合性太强,而一次性加载类库也导致了bindows窗口初始化的时间过长。同时,bindows大量运用了ie6.0的技术,限制了bindows进行跨浏览器和跨平台的运用。
2. dorado
dorado是由上海锐道信息技术有限公司开发的一套基于j2ee的web开发框架构件,它的前身是extra。该开发平台是一款用于快速开发rich-client的web开发平台,它由一个框架和众多的基础构件组成。dorado构件开发平台解决了长期困扰软件开发人员的关于web表现层开发的两大难题:快速开发和实现复杂交互界面,充分满足用户体验。dorado在web页面上实现了大部分c/s系统中的控件,不过当前版本不支持ie以外的其他浏览器。
其他还有如dwr(direct web remoting)、ajaxanywhere、ajax-jsf framework 等许多优秀的ajax开发框架。
[color=#ff6600][b]二、ajax概述[/b][/color]
ajax(asynchronous javascript and xml,异步javascript和xml),不是一门新的语言或技术,它实际上是几项技术按一定的方式组合在一起,在共同的协作中发挥各自的作用。这些技术包括javascript、xhtml、css、dom、xml、xstl及xmlhttprequest,在ajax中,各种技术各司其职:
使用xhtml和css进行数据的标准化呈现;使用dom实现动态显示和交互;使用xml和xstl进行数据交换与处理;使用xmlhttprequest对象进行异步数据读取;使用javascript绑定和处理所有数据;
[img]http://lurenjia.net/tech/images/ajax1.jpg[/img]
图2.1 传统模式(左)与ajax模式(右)体系结构
在ajax提出之前,对于上述技术都只是单独使用,或是小范围地组合使用,没有真正意义上综合应用。
ajax的工作原理相当于在用户和服务器之间加了一个中间层,称为ajax引擎,该引擎使用户操作与服务器响应异步化。在这种模式下,用户请求不是全部都提交给服务器,部分请求,如一些数据验证和简单的数据处理请求等就交给ajax引擎完成,只有那些确实需要由服务器来完成的请求,才由ajax引擎代为向服务器提交,ajax模式与传统模式体系结构的区别如图2.1所示。
在传统的交互方式中,由用户触发一个http请求到服务器,服务器对其进行处理后再返回一个新的html页面给客户端。每当服务器处理客户端提交的请求时,用户都只能空闲等待,并且哪怕只是一次很小的交互,只需从服务器端得到很简单的一个数据,服务器都要返回一个完整的html页作为响应结果,而用户每次都要浪费时间和带宽去重新读取整个页面。使用ajax之后用户感觉所有的操作几乎都会很快得到响应,不用等待页面重载(白屏),就像使用桌面客户端程序一样的效果。两种交互方式区别如图2.2所示。
[img]http://lurenjia.net/tech/images/ajax2.jpg[/img]
图2.2 传统模式下同步交互(上)和ajax模式下异步交互(下)比较
[b]2.1 ajax引擎[/b]
ajax引擎有狭义和广义之分,广义的ajax引擎,包括了狭义的ajax引擎和一些由javascript写成的业务逻辑模块。而狭义的ajax引擎,只是一些与xmlhttprequest相关,用来与完成与服务器交互的模块,本节所阐述的是狭义的ajax引擎。
狭义的ajax引擎的主要功能包括:捕获浏览器事件,初始化xmlhttprequest对象,向服务器发送请求,接收服务器响应,更新客户端页面内容。这也正是ajax程序与服务器交互的过程。从这个过程可以看出ajax实质上也是遵循request/response模式,只不过这个过程是异步的。
1. 捕获浏览器事件
当浏览器中的文档或它的某些元素发生了某些事情时,web浏览器就产生一个事件(event)。例如,浏览器装载完一个文档,就产生了一个onload事件;鼠标点击层,就产生了一个onclick事件;键盘按一个键,就会产生一个keydown事件。要捕获浏览器的事件,就是为某个事件注册一个处理函数。如,,这里就为一个表单按钮注册了一个鼠标单击的处理函数uploadphoto(),当鼠标单击这个按钮时,就会执行uploadphoto()这个函数。
2. 初始化xmlhttprequest对象
在捕获了用户的交互事件之后,如果需要与服务器交互,就要使用xmlhttprequest。但是,浏览器不同或者版本不同,这个xmlhttprequest的实例化过程实现方式也不同。ie以activex控件的形式提供,而mozilla等浏览器则以xmlhttprequest类的形式提供,所以需要保证程序兼容性,实现跨浏览器运行。
3. 向服务器发送请求
在得到一个实例化了的xmlhttprequest对象之后,就可以向服务器发送一个http的请求了。在发送之前需要指定响应处理函数,即服务器响应之后的回调函数(callback),将xmlhttprequest对象的onreadystatechange属性指定为回调函数。名即可,比如: xmlhttprequestobject.onreadystatechange = callbackhandler。 指定响应处理函数之后,调用xmlhttprequest对象的open和send方法后,就向服务器发送了一个http的请求了。
4. 接收服务器响应
在发送http请求之前通过onreadystatechange属性指定了响应处理函数。这个响应处理函数要做的第一步,它需要检查xmlhttprequest对象的readystate值,判断请求目前的状态。当readystate值为4的时,表示服务器已经传回所有的信息。服务器返回信息后,还需要判断返回的http状态码,以确定返回的页面没有错误。所有的状态码都可以在w3c的官方网站上查到。其中,200代表页面正常。接下来就可以对返回的数据进行处理了。
5. 更新客户端页面内容
xmlhttprequest对成功返回的信息有两种处理方式: [br] responsetext:将传回的信息当字符串使用。一些状态信息等非结构化的数据,如删除成功之之类的可以用这种方式处理; responsexml:将传回的信息当xml文档使用,用dom解析处理。一些结构化的数据,如20条学生的记录,要填入到一个表格中,可以使用该方式。
[b]2.2 ajax 相关技术[/b]
1. xmlhttprequest
ajax最大的特点是无需刷新页面便可向服务器传输或读写数据,即无刷新更新页面,这一特点主要得益于xmlhttp组件xmlhttprequest对象。这样就可以像桌面应用程序一样,只同服务器进行数据层面的交换,而不用每次都刷新界面,也不用每次将数据处理的工作提交给服务器来做,这样即减轻了服务器的负担又加快了响应速度,缩短了用户等候时间。
2. javascript
javascript是一种基于对象和事件驱动具有较高安全性能的基于客户端浏览器的脚本语言。使用javascript的目的是与html超文本标识语言、css一起在网页上实现与网络用户更加复杂的交互,从而适合开发客户端的应用程序。它通过在标准的html语言中嵌入或调入实现功能。
简单地说,javascript是一种基于对象的、简单的、安全的、跨平台的脚本语言。所以,javascript最大的特点在于能够在客户端浏览器运行,可以充分利用客户端的运算能力,来减轻服务器负载和网络的流量。
3. dom(document object model)
dom(document object model,文档对象模型)是w3c组织的推荐标准,用于操作 html 和 xml 文件使用的一组api。它提供了文件的树状结构表述,让你可以改变其中的內容及表现方式,其本质是建立网页与脚本或程序语言沟通的桥梁。[br] 一个用html或xhtml构建的网页可以看作是一组结构化的数据,这些数据被封在dom中,dom提供了网页中各个对象的读写支持。[br] ajax引擎捕获用户交互事件如鼠标点击、下拉滚动条等,并相应地更改dom,这使网页能无缝化重构,也就是在页面已经下载完毕后改变页面内容,从而响应用户的请求。
4. xml(extensible markup language)
xml是具有一种开放的、可扩展的、可自描述的语言结构,它已经成为网上数据和文档传输的标准。它是用来描述数据结构的一种语言,正如它的名字一样,它使对某些结构化数据的定义更加容易,并且可以通过它和其它应用程序交换数据。
目前,xml已经成为最普遍的数据操纵和数据传输的方式。在基于ajax技术的b/s中,大部分结构化的数据就是通过xml的来传输和交换的。但是并不是所有的数据都适合以xml格式来传输,因为数据量大到一定程度的时候,将数据序列化成xml以及解析这些xml将变得非常困难,需要消耗巨大的系统资源以及时间。另外,有些信息根本没有必要序列化成xml,比如返回一个删除成功的消息。[br][br][color=#ff6600][b]三、基于ajax的信息系统设计与实现[/b][/color]
为了与传统的b/s结构的信息系统进行对比,在研究过程中,本文在研究过程中开发了一个基于ajax的信息系统。系统以学生成绩管理为核心,实现一些日常教务的网络化管理。 系统数据库采用sql server 2000数据库,java环境采用jdk 1.5.0_05版,应用服务器使用tomcat 5.5。系统总体上分为3层:数据层、中间层、客户层。系统体系结构如图3.1所示。
[img]http://lurenjia.net/tech/images/ajax3.jpg[/img]
图3.1 系统体系结构图
系统中间层使用hibernate作为持久层,负责java对象与数据库表之间映射;使用javabean完成服务器端的数据处理,利用dom4j实现java对象的序列化以及解析从客户端接收到的xml数据流;在中间层的最上面,使用java servlet来负责响应来自浏览器的请求并把数据处理的结果返回给浏览器。
在系统的客户层,负责与服务器交互的是ajax引擎;下面的javascript就负责数据处理和响应浏览器事件。dom负责读取和更新html文档,而html、css则负责数据的表现。而在传统的b/s应用中,客户端的表现层往往只有最下面的html、css,或只有少量的javascript来做诸如数据验证之类的事,以至于客户端仅仅用来表现而已,它的交互能力太弱,需要大量的刷新。
系统所有功能模块中的交互如添加、删除、修改等,均不需要刷新页面,这与传统模式的b/s系统有着明显的区别。从系统界面上看,它象一个用delphi或是vb编写的c/s系统 ,但实际上它是用html编写的在浏览器中运行的b/s系统。在开发过程中,本系统实现了如auto-complete、treeview、datagrid等无刷新的数据控件,与asp.net或jsf中已经存在的类似控件相比,本系统的控件在响应交互时,不需要刷新。系统运行效果如图3.2所示。
[img]http://lurenjia.net/tech/images/ajax4.jpg[/img]
图3.2 系统运行效果
以下结合系统自动完成控件(auto-complete),说明在ajax模式下客户端与服务器交互的实际过程。
自动完成功能是一个为用户提供提示的功能,可以减少用户的输入量,从而提高用户体验。在学生查找姓名框中只要输入一个姓,如输入“张”;系统就会自动把数据库中所有姓“张”的学生全部找出来,供用户选择,用户只要用鼠标点击或使用方向键即可完成输入。使用效果如图3.3所示。
当用户输入“张”时,系统捕获到输入框的一个keyup事件,调用事先为keyup事件注册的javascript函数,生成一个xml字符流:
[br]
该文章在 2010/6/3 1:43:14 编辑过 |
关键字查询
相关文章
正在查询... |