基于Ajax的网络答疑系统的研究与应用

郭瑾，高伟，刘德山

0 引言

在传统的浏览器与服务器的交互方式中，当用户触发一个HTTP请求到服务器，服务器对其进行处理后，再返回一个新的Web页到浏览器，每当服务器处理浏览器提交的请求时，用户总是被强制进入提交→等待→重新显示模式，这不仅效率低，而且大大减弱了用户体验。同时，刷新时造成的数据重复请求也加大了服务器的负担。

Ajax提供与服务器异步通信的能力，可以在浏览器快速无刷新的显示信息，它可以使得系统响应更敏捷、交互性更强、用户体验更丰富。

1 Ajax简介

Ajax是于2005年由Jesse James Garrett 最先提出的[1]。Ajax（Asynchronous JavaScript and XML）自从产生以来，催生了一系列基于Web的新的服务方式，其核心是利用Ajax的异步交互，减轻服务器负担，提高应用操作的执行效率。异步是指客户端的请求/响应和用户的动作是异步进行的，客户端在等待服务器响应时不必阻塞用户，用户可以继续进行其他的行为。

Ajax使用XHTML和CSS标准化呈现，使用DOM实现动态显示和交互，使用XML和XSTL进行数据交换与处理，使用XMLHttpRequest对象进行异步数据读取，使用JavaScript绑定和处理所有数据。

Ajax应用程序在用户和服务器之间引入了一个中间层：Ajax引擎，使用户操作与服务器响应异步化，改变了使用页面重载的响应方式。当用户提交请求时，使用JavaScript和XML立即跟新UI（User Inte-

Face），并向服务器发出异步请求；当请求返回时，使用JavaScript和CSS来相应地更新UI。用户端完全没有被中断的感觉。传统的Web应用交互模式是同步的，而基于Ajax技术的Web应用交互模式是异步的，如图1所示[1]。因此Ajax应用与传统的Web应用的区别主要在3个方面：

（1）不刷新整个页面，在页面内与服务器通信；

（2）使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力；

（3）应用仅有少量页面组成，大部分交互在页面内完成，不需要切换整个页面。

图1 两种Web应用模型交互模式的对比

由此可见，Ajax使得Web应用更加动态，并且提供了表现能力丰富的Ajax UI组件。

Ajax技术当中，最核心的技术就是XMLHttpRequest对象，它是Ajax技术与众不同的地方。Ajax的无刷新更新页面的效果，就是由XMLHttpRequest对象实现的。

XMLHttpRequest对象在IE5中首次出现，负责在客户端异步向服务器发送请求和处理响应。XML-HttpRequest使用户使用JavaScript向服务器提出请求并处理响应，同时不阻塞用户[2]。

XMLHttpRequest对象提供了一系列属性和方法来向服务器发送异步的Http请求。在服务器处理用户请求的过程中，XMLHttpRequest监听服务器的状态，并根据这些状态指示JavaScript做相应的处理。当服务器顺利完成响应用户行为的动作、并将响应数据返回时，XMLHttpRequest对象能够回调响应的处理函数；通过XMLHttpRequest提供的response系列方法，可以将这些响应数据由JavaScript操纵的DOM更新Web页面内容。

2 基于Ajax的网络答疑系统框架

网络答疑系统是基于J2EE和MVC开发模式，技术上采用Struts+Spring+Hibernate 3层开发模式。

MVC设计模式由控制器（Controller）、模型（Model）、视图（View）3部分组成[3]。模型表示应用程序的业务逻辑，获取业务数据并按照业务规则处理业务数据，所有的业务操作都在该层，是应用程序的核心。视图是整个应用程序的外在表现，主要功能是模块的显示以及根据业务处理结果，生成返回至客户端的页面。控制器主要功能是将模型和视图联系在一起，是一个分发器，不做任何数据处理。MVC模式实现了数据层、显示层和业务层的分离，提高了系统的可维护性、可扩展性和可重用性。

网络答疑系统由五层组成，如图2：

图2 基于Struts、Spring和Hibernate的Web开发框架

这5层分别是：

客户层：客户端使用浏览器进入系统访问，与服务器端软件进行交互；

表示层即Web层：使用Struts框架，处理用户的请求并做出相应的响应，处理应用程序的异常，在表单提交时进行数据校验，负责数据显示和用户交互；

业务逻辑层：使用Spring框架通过IoC（反转控制）机制进行业务逻辑的调用[4]，包括：处理应用程序的业务逻辑和业务校验、数据库的事务管理、数据访问层的连接管理等；

数据持久层：使用Hibernate框架从数据源中获取数据，实现数据的查询、更新和删除；

数据源层：数据库系统负责管理、存储、组织和分析系统的相关业务数据和用户相关数据。

以上框架充分利用了3种开源框架各自的优势，Struts引入MVC模式实现了视图、模型和控制互相分离，实现了表示逻辑和业务逻辑的解藕；Hibernate完成对象和关系数据库之间的映射，并提供高效的数据存储和获取能力[5]；Spring提供了IoC容器，完成持久访问对象的注入和业务逻辑的事务管理，关联Web层和数据持久层。采用多层体系结构，不仅实现了层间的松散耦合，提高了代码的可重用性及开发效率，并且便于维护。

在网络答疑系统中采用基于MVC模式的SSH 3层框架结构，该结构在服务器端提高了系统的灵活性，扩展性大大加强，便于调试，降低了维护成本。但客户端只是采用传统的浏览器与服务器的交互方式，这使得Struts在一些交互性强的页面应用不理想，导致刷新页面频繁，用户等待时间长。在网络答疑系统中，页面交互频繁，这样不仅导致系统效率低，而且造成时间和网络资源的浪费。

基于Struts在客户端的表现不足以及Ajax在客户端的特点，在网络答疑系统中将Ajax和MVC模式相结合，充分发挥Ajax在客户端的异步交互能力和MVC的可扩展行。加入Ajax后，网络答疑系统在原来的MVC 3层架构的基础上形成了Ajax引擎、Struts层、Spring层和Hibernate层4层架构，客户端表现出优秀的动态显示和交互能力。新的架构见图3：

图3 Ajax在网络答疑系统中的架构图

通过在网络答疑系统的客户端增加一个Ajax引擎，负责在客户端和用户之间交互，实现Ajax的功能。

当用户打开一个Web页面时，就载入了Ajax引擎。Ajax引擎初始化后，就开始初始化XMLHttpRequest对象，捕捉用户的行为，开始与用户的交互。当用户的某些请求触发Ajax时，Ajax在后台将用户的数据异步请求送到Struts框架中的控制器ActionServlet处理，ActionServlet找到对应的Action和ActionForm，在进行Form验证，验证通过则调用Action的Execute方法。在方法体内，调用业务逻辑模块，由Hibernate在“幕后”完成与数据库的交互。即业务逻辑类里通过HQL语句操作业务对象，Hibernate把HQL转换成SQL，通过O/R映射文件实现具体对数据源的操作，即穿过持久层映射到具体的数据库表。ActionServlet接受Execute方法返回的ActionForward对象，转发到ActionForward指定的另一个Action，Action层再将数据封装成XML格式返回给Ajax引擎。Ajax引擎解析服务器传递过来的数据，并借助于DOM、DHTML更新页面，显示数据，完成一次请求响应。具体的应用流程框图如图4：

Ajax的所有动作都是在后台进行的，这样就不会阻塞用户的行为，也避免了用户的等待时间。同时由于Ajax传输和接受的数据量相对都较小，因此页面更新速度快，用户有一种实时响应的体验。另外，添加Ajax引擎后，使客户端承担部分服务器端逻辑，减轻了服务器的负担，同时从服务器端剥离了与业务无关的页面交互逻辑，优化了代码结构。

图4 一次请求响应的应用流程框图

3 Ajax技术在网络答疑系统中的应用示例

在网络答疑系统中，Ajax主要用于页面交互和显示。在答疑系统中，按照章节进行问题的提出和答案的显示，学生在提问之前，可以先按章节进行浏览查找问题是否已经存在以及是否已经给出答案，这样按照章节逐层细化，呈现在用户面前的是一个井井有条、层次感十分鲜明、简单易用的网络答疑系统软件。因此，在该系统中使用了树形目录来实现，并采用Ajax技术实现树形目录的动态显示。

根据网络答疑系统的多层架构体系的构造。在具体实现时，表示层专注于树的外观显示，业务逻辑层完成处理树的生成、变化。下面分别介绍：

3.1 表示层

当点击某节点前的“ + ”、“ - ”图片时通过DIV 的style样式的display 属性控制子节点的展开和隐藏。部分代码如下：

3.2 业务逻辑层

3.2.1 动态加载

如果一次性获取完整的先序树，构造成XML提供给JavaScript解析，数据量越大，消耗的资源越多，客户端响应延迟时间就越长，因此对于大数据量的树，采用动态加载方式，即每次单击“+”图片时，判断是否已加载子节点数据，如果未加载则通过Ajax的XMLHTTP组件XMLHttpRequest对象异步发送请求，连接服务器获取节点数据。部分代码如下：

3.2.1 树形结构的构造

从数据库中返回的是有序的先序树，而XML是完整的树型结构文档，所以将树型数据构造成预定义的XML格式，只需从根节点开始，遍历一遍树，即可将树全部生成。部分代码如下：

在初始化页面时只读出根节点的内容并显示，在用户展开某一个根结点时，判断是否已经加载了子节点的数据，如果未加载调用Ajax引擎，通过XMLHtt- pRequest对象异步发出请求，连接到服务器，通过GET方法异步连接到URL加载数据。这样，每次只取一个节点的子节点序列，按XML格式封装成树的文档结构，提供给JavaScript的dhtmlTreeObject.prototype.-insertItem()解析并组织好HTML输出节点。

由于使用了异步交互方式，在与服务器交互的同时用户仍然可以继续页面的其它操作，并且每次只是读取子节点的数据，而不是加载所有的子节点和叶子节点的全部数据，这样，所取即所用的方式不会产生数据的冗余和浪费，减少了数据下载量，避免了更新页面时重载全部内容，缩短了用户等待时间。

4 结语

在网络答疑系统中，采用了基于Ajax的Struts+Spring+Hibernate的架构模式。此框架的应用一方面减少了用户交互过程中的等待时间，提高了系统的响应速度，同时采用成熟的SSH框架，缩短开发时间，降低了开发成本，增强了系统的可维护性和可扩展性。Ajax引擎的应用弥补了SSH框架在客户端的不足，实现了异步交互和动态刷新显示的功能，也避免了刷新等待造成的时间和带宽的浪费，提高了系统的资源利用率，比传统的Web应用模式具有更强的交互性。

[1] Jesse James Garrett.Ajax: A new approach to web applications [EB/OL] .http://www.adaptivepath.com.

[2] Ryan Asleson,Nathaniel T. Schutta. Foundation of Ajax[M] .Apress,Oct 2005.

[3] Husted T, Dumoulin C, Franciscus G, et al. Struts in action[M] .Amercia:Manning Publications Co,2003:1-581.

[4] Johnson R, Hoeller J,Arendsen A. et al. Spring-Java/J2EE application framework reference documentation[EB/OL] .http://static.springframework.org/spring/docs/1.2.x/referen ce/index.html.

[5] King G. Hibernate reference [EB/OL] .http://www.hibernate.org/hib_docs/v3/reference/en/html/architecture.html.