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

【IT168知识库】AJAX在信息系统中的应用研究AJAX在信息系统中的应用研究/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的调试功能。

另外，新的控件将使客户端控件与服务器端代码的捆绑更为简便。

Atlas客户脚本框架（Atlas Client Script Framework）也使与网页及相关项目的交互更为便利。

基于Ajax的开发框架，国内外开发了许多优秀的商业和开源的产品。

1. BindowsBindows 是一个处于Web应用程序中表示层的“胖客户”图形用户界面工具，拥有与现代桌面应用程序相同的外观、感觉和事件。

是一个轻量级的B/S应用程序开发框架。

该框架已经将Javascript的OOP和基于IE6.0的DHTML发挥到极点，其中Javascript用于客户端界面的显示和处理，XMLHTTP用于客户端与服务器的信息传输。

Bindows提供了一个封装好的可以直接利用的JS类库，使得开发过程变得十分快捷。

Web系统原有的界面交互性差、页面刷新等问题都可以很好地解决。

然而Bindows并非完美，它封装了太多的原本HTML就提供的控件、事件和方法，使得类库过于庞大并且内部藕合性太强，而一次性加载类库也导致了Bindows窗口初始化的时间过长。

同时，Bindows大量运用了IE6.0的技术，限制了Bindows进行跨浏览器和跨平台的运用。

2. DoradoDorado是由上海锐道信息技术有限公司开发的一套基于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事件。

要捕获浏览器的事件，就是为某个事件注册一个处理函数。

如，<input type="button" name="uploadPhotoBtn" value="上传照片" onClick="uploadPhoto();" />，这里就为一个表单按钮注册了一个鼠标单击的处理函数uploadPhoto()，当鼠标单击这个按钮时，就会执行uploadPhoto()这个函数。

2. 初始化XMLHttpRequest对象在捕获了用户的交互事件之后，如果需要与服务器交互，就要使用XMLHttpRequest。

但是，浏览器不同或者版本不同，这个XMLHttpRequest的实例化过程实现方式也不同。

IE 以ActiveX控件的形式提供，而Mozilla等浏览器则以XMLHttpRequest类的形式提供，所以需要保证程序兼容性，实现跨浏览器运行。

3. 向服务器发送请求在得到一个实例化了的XMLHttpRequest对象之后，就可以向服务器发送一个HTTP的请求了。

在发送之前需要指定响应处理函数，即服务器响应之后的回调函数（callback），将XMLHttpRequest对象的onreadystatechange属性指定为回调函数。

名即可，比如：XMLHttpRequestObject.onreadystatechange = callBackHandler。

指定响应处理函数之后，调用XMLHttpRequest对象的open和send方法后，就向服务器发送了一个HTTP的请求了。