AJAX在信息系统中的应用研究

======================================================
注：本文源代码点此下载
======================================================

ajax在信息系统中的应用研究

http://www.lurenjia.net/tech/use_ajax_in_mis.htm

关键字:ajax、javascript、xmlhttprequest、异步交互、xml

一、绪论

由于系统开发成本低、时间短,在过去的几年里,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开发框架。

二、ajax概述

ajax(asynchronous javascript and xml,异步javascript和xml),不是一门新的语言或技术,它实际上是几项技术按一定的方式组合在一起,在共同的协作中发挥各自的作用。这些技术包括javascript、xhtml、css、dom、xml、xstl及xmlhttprequest,在ajax中,各种技术各司其职:

使用xhtml和css进行数据的标准化呈现;使用dom实现动态显示和交互;使用xml和xstl进行数据交换与处理;使用xmlhttprequest对象进行异步数据读取;使用javascript绑定和处理所有数据;

图2.1 传统模式(左)与ajax模式(右)体系结构

在ajax提出之前,对于上述技术都只是单独使用,或是小范围地组合使用,没有真正意义上综合应用。

ajax的工作原理相当于在用户和服务器之间加了一个中间层,称为ajax引擎,该引擎使用户操作与服务器响应异步化。在这种模式下,用户请求不是全部都提交给服务器,部分请求,如一些数据验证和简单的数据处理请求等就交给ajax引擎完成,只有那些确实需要由服务器来完成的请求,才由ajax引擎代为向服务器提交,ajax模式与传统模式体系结构的区别如图2.1所示。

在传统的交互方式中,由用户触发一个http请求到服务器,服务器对其进行处理后再返回一个新的html页面给客户端。每当服务器处理客户端提交的请求时,用户都只能空闲等待,并且哪怕只是一次很小的交互,只需从服务器端得到很简单的一个数据,服务器都要返回一个完整的html页作为响应结果,而用户每次都要浪费时间和带宽去重新读取整个页面。使用ajax之后用户感觉所有的操作几乎都会很快得到响应,不用等待页面重载(白屏),就像使用桌面客户端程序一样的效果。两种交互方式区别如图2.2所示。

图2.2 传统模式下同步交互(上)和ajax模式下异步交互(下)比较

2.1 ajax引擎

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对成功返回的信息有两种处理方式:

responsetext:将传回的信息当字符串使用。一些状态信息等非结构化的数据,如删除成功之之类的可以用这种方式处理; responsexml:将传回的信息当xml文档使用,用dom解析处理。一些结构化的数据,如20条学生的记录,要填入到一个表格中,可以使用该方式。

2.2 ajax 相关技术

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。它提供了文件的树状结构表述,让你可以改变其中的內容及表现方式,其本质是建立网页与脚本或程序语言沟通的桥梁。

一个用html或xhtml构建的网页可以看作是一组结构化的数据,这些数据被封在dom中,dom提供了网页中各个对象的读写支持。

ajax引擎捕获用户交互事件如鼠标点击、下拉滚动条等,并相应地更改dom,这使网页能无缝化重构,也就是在页面已经下载完毕后改变页面内容,从而响应用户的请求。

4. xml(extensible markup language)

xml是具有一种开放的、可扩展的、可自描述的语言结构,它已经成为网上数据和文档传输的标准。它是用来描述数据结构的一种语言,正如它的名字一样,它使对某些结构化数据的定义更加容易,并且可以通过它和其它应用程序交换数据。

目前,xml已经成为最普遍的数据操纵和数据传输的方式。在基于ajax技术的b/s中,大部分结构化的数据就是通过xml的来传输和交换的。但是并不是所有的数据都适合以xml格式来传输,因为数据量大到一定程度的时候,将数据序列化成xml以及解析这些xml将变得非常困难,需要消耗巨大的系统资源以及时间。另外,有些信息根本没有必要序列化成xml,比如返回一个删除成功的消息。

三、基于ajax的信息系统设计与实现

为了与传统的b/s结构的信息系统进行对比,在研究过程中,本文在研究过程中开发了一个基于ajax的信息系统。系统以学生成绩管理为核心,实现一些日常教务的网络化管理。 系统数据库采用sql server 2000数据库,java环境采用jdk 1.5.0_05版,应用服务器使用tomcat 5.5。系统总体上分为3层:数据层、中间层、客户层。系统体系结构如图3.1所示。

图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所示。

图3.2 系统运行效果

以下结合系统自动完成控件(auto-complete),说明在ajax模式下客户端与服务器交互的实际过程。

自动完成功能是一个为用户提供提示的功能,可以减少用户的输入量,从而提高用户体验。在学生查找姓名框中只要输入一个姓,如输入“张”;系统就会自动把数据库中所有姓“张”的学生全部找出来,供用户选择,用户只要用鼠标点击或使用方向键即可完成输入。使用效果如图3.3所示。

当用户输入“张”时,系统捕获到输入框的一个keyup事件,调用事先为keyup事件注册的javascript函数,生成一个xml字符流:

张

getautolist

这个字符流通过sendxml()函数发送给服务器端studentservlet,servlet接收到xml数据流后使用dom4j解析,得到action节点的值为getautolist,然后调用studentbean中的getautolist方法,查找所有姓张的学生用户,序列化成xml流后再由servlet返回给客户端。返回给客户端的也是xml数据流:

图3.3 自动完成功能中客户端与服务器交互的过程

在这里,由于返回的是一组结构化的数据,使用responsexml,将传回的数据流转化为xml文档,用dom解析之后,将学生信息添加到自动完成的提示层中,达到图中效果,这样就完成了整个交互过程。系统中其他模块实现过程也类似。

四、ajax模式与传统模式的b/s系统的对比分析

为了体现ajax相对于传统b/s模式的优势,将基于ajax技术的b/s系统和基于传统b/s模式的相同功能的系统进行对比。

4.1 服务器负荷对比

进行服务器负荷的对比时使用的监测工具是p6spy和sql profiler。p6spy和sql profiler通过记录系统数据库操作相关信息,如查询(query)、statement对象、结果集(resultset)以及查询的流量等,来间接反应服务器的负荷。很明显,上诉指标与服务器负荷是成正比的,指标值越大,也就意味着服务器负荷越高。

分别在传统b/s模式系统和ajax模式系统下,大约每隔5秒添加一条学生信息,一共添加10条。sql profiler监测结果如图4.1所示。

图4.1传统b/s模式(左)和ajax(右)系统下,sql profiler监测结果

图中纵坐标表示指标值,横坐标表示时间,单位毫秒,其中折线图表示queries、statements、result set、select statements这些指标的值随时间推移发生的变化。下半部分图纵坐标表示流量,单位byte,横坐标表示时间,单位毫秒。

通过对比,很容易看出,由于传统模式下提交表单之后,页面需要刷新,故除了执行insert语句插入记录之外,还需要执行select语句,以重新生成页面,这就增加了服务器的处理量。而使用了ajax之后,由于页面没有刷新(也没有必要刷新),系统将新增学生的信息以xml流在后台传给服务器,服务器只进行一次insert操作,将操作成功信息传给客户端,客户端通过dom直接在页面上添加新增学生信息。

从两个图对比可以看出,使用ajax之后可以减少一半以上的服务器开销,而且随着并发访问量的增加,这个差距将进一步扩大。当并发访问量大于某一阕值,传统模式的b/s系统的服务器有可能因为大规模访问而死机,但是相同条件下,使用ajax技术的系统却可以运行良好。

4.2网络流量对比

通过使用netlimiter,监测ie浏览器的流量,对两种模式系统中完成同样操作的网络流量进行对比。

系统启动之后,在两个系统中,分别添加10条学生信息。得到监测结果分别如图4.2所示。图中左边是流量的具体数据,右上方的图是发送数据流量随时间变化的图示,右下方的图是接受到的数据流量随时间变化的图示。

图4.2传统b/s模式(左)和ajax(右)系统下,netlimiter监测结果

流量监测的对比结果似乎更加明显,使用ajax技术的系统只是在一开始系统载入时,流量比较大,因为它要载入大量的js类库,但是在之后添加10条记录的过程中,每次发送的数据量都在1kb左右,而接收到的流量小得甚至无法直接从图中看到。但是没有使用ajax技术的系统,第一次载入和之后的每次添加,接收和发送的数据量都差不多,两者相加之和每次都在100kb以上。整个过程的流量之和分别为1,248,510byte(传统模式下)和299,435byte(ajax模式下),前者居然是后者的4.1倍。换句话说,使用ajax之后大约可以降低76%的网络流量。而且随着添加记录的数量的增加,流量差距进一步拉大。如表4.1所示。

表4.1 同样的操作两个系统流量比较结果

添加10条记录

添加20条记录

添加30条记录

传统模式

1,248,510byte

2,195,370 byte

3,268,735 byte

ajax模式

299,435byte

326,150 byte

360,530 byte

倍数

4.1倍

6.7倍

9.0倍

4.3 结果分析

不管是服务器负荷的测试,还是网络流量的测试,除去测试的误差和偶然因素,基于 ajax技术的b/s系统相比于传统的b/s模式的系统具有以下优势。

1. 减轻服务器的负担和网络流量

在前两节与传统b/s模式系统进行服务器负荷和网络流量的对比中,这点体现的淋漓尽致。ajax的原则是“按需取数据”,可以最大程度地减少冗余请求,减少响应对服务器造成的负担。ajax根据实际需要向服务器端发送请求,用什么就取什么、用多少就取多少,就不会有数据的冗余和浪费,减少了数据下载总量,而且更新页面时不用重载全部内容,只更新需要更新的那部分,既缩短了用户等待时间,也减少了资源的浪费。还可以把服务器负荷转嫁到客户端,利于客户端闲置的处理能力来处理,如表单验证、客户端数据网格排序、生成图表等。

2. 带来更好的用户体验

ajax使用xmlhttprequest对象发送请求并得到服务器响应,在不重新载入整个页面的情况下用javascript操作dom最终更新页面。所以在读取数据的过程中,用户所面对的不是白屏,是原来的页面内容(也可以加一个loading的提示框让用户知道处于读取数据过程),只有当数据接收完毕之后才更新相应部分的内容。这种更新瞬间完成,用户几乎感觉不到,这种体验是十分美妙的。在本系统中,利用css,模仿了c/s应用程序的菜单、面板等,让用户拥有更好的使用体验,感觉就像在使用一个c/s程序一样。

3. 进一步促进页面呈现和数据的分离

在b/s模式的系统中,页面呈现和数据本身没有清晰的界限,数据和数据表现的格式混杂在一起,而基于 ajax技术的b/s系统采用xml作为数据的载体,数据通过dom解析之后表现出来,能够做到数据与数据表现的彻底分离,有利于分工合作、减少页面的修改引起的web应用程序错误,提高效率、更加适用目前的系统要求。

4. 降低系统维护成本

c/s结构的系统在部署时,系统支持工程师需要为每个用户安装客户端,在系统日常运行时,支持工程师也需要在现场进行维护和更新。对于系统开发商来说,c/s结构的系统部署和维护成本相对较高;而经常性的进行本地系统维护和升级给用户也带来很大的不便。

相对而言,基于ajax技术的系统,系统开发商要做的就是让工程师在服务器端完成系统的调试、部署、维护、更新,基本上无须在用户操作现场实施。这就很大程度上地降低了系统的后期维护成本,而用户也不必担心程序是否会发生错误,只需打开浏览器即可。

目前,ajax虽然得到广大厂商和开发者的追捧,但它还只是一个新生事物,并不是十分完美成熟的技术,所以还是存在一定的不足。

1. 程序兼容性问题

ajax大量使用了javascript和xmlhttprequest,它们需要浏览器的支持,但是只有ie5.0及以上版本、mozilla1.0、netscape7及以上版本的浏览器才完全支持javascript和xmlhttprequest。mozilla虽然也支持xmlhttprequest,但是在mozilla中xmlhttprequest的使用方式有所不同,需要在开发过程中,注意保证程序的兼容性。除此之外,有时候,相同javascript和css的效果在不同的浏览器中也存在一些差异。

另外,一些手持移动设备(如手机、pda等)目前还不能很好的支持ajax。

本系统中,由于需要实现某些效果,使用了一些ie浏览器的特性,使得系统在firefox等其他浏览器中一些功能无法正常使用,没有很好的做到跨浏览器。

2. 部分浏览器功能失效

ajax更新页面内容的时候并没有刷新整个页面,因此,网页的后退功能是失效的。同样,浏览器的“添加到收藏夹”功能也是无法正常使用,添加到收藏夹的url通常不能跳转到当时的状态。为了解决这些问题,一些ajax的程序往往屏蔽了浏览器的这些功能按钮和快捷键。

在本系统中,使用了ie浏览器支持的showmodaldialog方法打开应用程序,隐藏了浏览器的工具栏和菜单,从而避免用户使用后退、刷新等功能。遗憾的是,在其他浏览器中,并不支持showmodaldialog方法。

目前,ajax受到了全世界开发者的热切关注,基于ajax技术的b/s系统也渐渐在实际应用中变得越来越多。相信在不久的将来,随着不同浏览器之间兼容性的不断提高,ajax将会成为信息系统开发领域中主要的开发模式。

本文在研究过程中,对ajax技术进行了初步尝试,一些问题没有很好的解决,如浏览器的兼容性问题,为了实现一些效果,运用了一些ie6.0浏览器才支持的特性,以致于在firefox等其他浏览器,或者ie的早期版本中,一些功能无法正常使用。这需要在今后的开发中,继续改进。

这次论文大赛,让我受益匪浅,最主要的是提高了自己独立解决问题的能力,比如在遇到问题时,如何利用互联网和图书馆资源来寻找问题的答案,以及对于一个问题有多种解决方案时进行对比,找出最佳方案。同时对信息系统开发有了更深的认识,对面向对象有了更深的理解,这对我以后的学习和工作有很大帮助。

原创作品,转载请注明出处。

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/