基于Ajax技术与MVC模式相结合的Web框架研究

摘要：针对现在基于B/S模式应用系统中普遍存在的问题：用户等待时间过长，服务器端压力过大，客户端资源闲置等，该文深入探讨Ajax技术的基础上，将成熟的开发模式MVC下的Struts框架与Ajax技术相结合，让两者协同工作，提高B/S模式Web应用程序的响应速度，改善用户体验，以构建更高效更合理的web应用框架。

关键词：Ajax技术；Struts框架；异步响应；JavaScript

中图分类号：TP311文献标识码：A文章编号：1009-3044(2008)34-1650-03

The Research of Web Application Framework Based on the Collaboration of Ajax Technology and MVC Pattern

HE Xi-chun, XIONG Qian-xing, WU Ting

(Department of Computer Science and Technology, Wuhan University of Technology, Wuhan 430063, China)

Abstract: There are many problems in the existing Electronic Application System with the B/S mode. For example: The user always needs to wait for a long time for the result; the server always has to be under large pressure; a large part of resources at the client-side are leaved unused and so on.. This article studies the Ajax technology at first, and then combines it with the Struts Framework based on the MVC design pattern. With the collaborative work from the two parts, we can promote the response speed of the Web applications based on the B/S mode and construct a more effective web-application framework.

Key words: Ajax technology; Struts framework; asynchronous response; JavaScript

随着Internet的飞速发展，基于Web的诸多应用以其丰富而生动的界面和方便使用等特点在信息化的建设中发挥的作用日益显著。随着服务器端开发技术的成熟，越来越多的开发人员开始亲睐B/S(Browser/Server)的设计模式。如何克服B/S模式自身的一些问题：例如用户体验不如C/S模式；服务器端压力过大，没有充分利用客户端的资源，也就成为应用系统需要研究的新问题。例如，某大型水路征稽系统，就是一个典型的电子政务系统。该系统集征稽与管理为一体，征稽部分帮助完成用户开票操作，管理部分用于数据的统计分析和查询。征稽部分对实时性和数据的准确性要求很高，

并且用户输入的过程中涉及到相关数据的验证。综合起来，就是要求服务器既能提供相当于本地系统似的响应速度，又可以提供大量数据的统计查询。

针对以上问题，本文提出将Ajax技术与MVC模式相结合的新型web框架应用到电子系统中。为了避免页面的臃肿和维护的困难，在中间层上采用MVC的设计模式。同时利用Ajax技术实现浏览器与服务器无刷新交互，数据的按需获取与页面的部分加载，极大的缓解网络流量。将Ajax的优越性，与现有的MVC设计模式相结合，使得Web应用不仅层次分明，可重用性强，具有高的健壮性和可伸缩性，而且具有良好、丰富的用户体验。

1 基于MVC模式的Struts框架介绍

MVC（Model－View－Control）模式，就是模型－视图－控制器模式，其核心思想是将程序划分

成相互独立又能协同工作的三个部分，现在是web应用程序普遍采用的开发模式。Struts即是MVC设计模式一种实现。

1) 控制器：控制层，起到控制整个业务流程（Flow Control）的作用，实现视图和模型部分的协同工作。在Struts中起着控制器的作用的是ActionServlet。所有的控制逻辑利用Struts一config.xml文件来配置。

2) 视图：视图是应用程序中与用户实现交互的界面相关的部分，即表示层，通常实现数据的输入和输出功能。主要是由JSP来控制页面的输出。

3) 模式：模型是应用程序的主体部分。模型表示业务数据，或者业务逻辑，具有实现具体的业务逻辑、状态管理的功能。

模型－视图－控制器模式工作流程见图1。

Struts框架优点显而易见：可以将逻辑处理与页面显示清楚分开；页面显示可以使用JSP标签库，从而大大提高开发效率；通过一个配置文件，既可以把握整个系统各部之间的联系，又可以大大减少后期维护的工作量。但是在服务器端提供了良好而成熟的架构实现的Struts框架，在客户端却没有相应的架构，这使Struts在一些交互性强的页面应用不理想，导致刷新页面频繁，延长用户的等待时间。在上例的系统中，存在很多用户交互频繁的页面，这也导致系统效率低下，造成服务器资源和网络资源的浪费。

2 Ajax的工作原理

Ajax（Asynchronous JavaScript and XML）并不是一门新的语言或技术，实际上它是几项技术按一定方式的组合，在共同的协作中发挥各自的作用。

传统的web应用遵循一种请求/响应的模式，对于每个请求都会重新加载整个页面。Ajax的工作原理相当于在用户和服务器之间加了一个中间层，使用户操作与服务器响应异步化，从而消除了网络交互过程中的“处理―等待―处理”的缺点[1]。每当需要更新时，客户端Web页面的修改是异步的和逐步增加的。并且客户端的浏览器可以分担一部分的业务逻辑，而不再仅仅是显示内容；服务器传送的仅仅是数据，而不是内容。这样，Ajax在提交Web页面内容时大大提高了用户界面响应的速度。在基于Ajax的应用程序中没有必要长时间等待整个页面的刷新。页面中需要更新的那部分才进行更改，如果可能的话，更新是在本地完成的，并且是异步的。所以基于Ajax技术的应用程序可以给用户提供桌面程序般的使用体验。基于Ajax的web模型和Ajax引擎模型见图2。

由于Ajax技术本身的优越性，基于Ajax技术的Web型框架现在已经应用到很多程序中。例如Gmail、Google Map、Google Suggest就是几个经典的Ajax应用。本文中重点要讨论的就是将Ajax技术与现有的MVC开发模式相结合，应用到项目开发中。

3 Ajax技术与MVC模式相结合的web框架

综合上面所分析的，基于MVC模式的Struts是一种框架，虽然它可以很好的将业务逻辑和表示分离，但是大多数的Struts应用都是标准的“如同一个平面文档Web页面”的结构。Ajax是一项技术，它的优势是使得Web页面看起来接近像用户所期望的桌面应用的动态应用程序，而不是一个平面的显示文档。将Ajax技术应用到Struts框架中，可以充分的发挥两者的优点，形成一种高效的web应用框架。

3.1 Ajax技术与MVC相结合的方法

Ajax中实现异步响应的onReadyStateChange事件具有在客户端程序中的事件监听功能。在MVC模式中，视图相当于用户看到的页面，通过内置的Ajax对象一步方式给控制器发送请求，Ajax中的onReadyStateChange则开始监听；控制器接受到页面发送过来的请求（Get或者Post方式），通过请求判断后发送给相应的业务或者数据模型；则业务或者数据模型开始执行业务操作，执行完毕后直接给页面发送数据更新的通知。页面中Ajax对象的onReadyStateChange接收到数据的更新通知后，根据实际的情况用DOM进行页面更新。从上面的结合原理上可以了解，Ajax技术与Struts框架的结合要体现在页面和控制器之间，进行异步的控制。通过分析，在Struts框架中应用Ajax技术，实际上就是加入一个Ajax引擎，这个引擎主要是用来发送Ajax异步请求到服务器和接收服务器的Ajax响应，并动态更新页面，由于采用的是Struts框架，那么无论是发送请求还是接收响应，都应该完成到StrutsForm形式和StrutsAction形式的转换。具体的结合方式可参见图3中所示。

用户的浏览器在执行任务时就装载了Ajax引擎，Ajax引擎用JavaScript语言编写，它负责解释执行用户界面及与服务器之的交互。Ajax引擎允许用户与应用软件之间的交互过程异步进行，独立于用与网络服务器间的交流。用JavaScript调用Ajax引擎来代替产生一个HTTP用户动作，内存中的数据编辑、页面导航、数据校验这些不需要重新载入，整个页面的需求可以交给Ajax来执行。

通过分析Ajax技术与Struts框架结合的原理，可以知道Ajax作为一项技术，能够很方便的融入到基于MVC模式的Struts框架中。它并不需要任何新的库文件或者服务器代码；只需要使用现有的Struts库文件和Action类。关键是在Struts的应用中根据实际业务的需要，以模块为单位加入Ajax的相关设置。首先需要确定哪些部分需要动态显示，然后将她们更新到Ajax的异步通信执行。

以Ajax技术的实现框架DWR为例。它能够把服务器端Java对象的方法公开给JavaScript代码。所以在这个引擎里，它最重要的就是提供了一个Java类到JavaScript对象的映射机制，也即是DWRServlet。DWR是作为Web应用程序中的Servlet部署的。而在Struts的视图、控制和模型三个组件中，ActionServlet就是它的控制器(Controller)。那么要将两个框架结合起来，其实也就是将DWRServlet和Actionservlet结合起来，作为整合框架的核心－MVC模式的新的控制器。

3.2 新型web框架的应用

某大型的水路征稽系统中的开票业务和协议签订业务，对系统的响应速度要求很高，且在运行的过程中，需要对用户的每一步输入的信息进行验证。这样的需求，可以通过应用Ajax技术和Struts架构相结合的新型框架来满足。

以统缴业务为例，该模块帮助用户完成协议的签订和电子协议的生成。首先需要在系统的web.xml文件中配置DWR和Struts这两个Servlet以及其映射。

……

＜servlet＞

＜servlet-name＞action＜/servlet-name＞

＜servlet-class＞

org.apache.struts.action.ActionServlet

＜/servlet-class＞

＜init-param＞

＜param-name＞application＜/param-name＞

＜param-value＞ApplicationResources＜/param-value＞

＜/init-param＞

＜init-param＞

＜param-name＞config＜/param-name＞

＜param-value＞/WEB-INF/struts-config.xml＜/param-value＞

＜/init-param＞

＜init-param＞

＜param-name＞debug＜/param-name＞

＜param-value＞2＜/param-value＞

＜/init-param＞

＜init-param＞

＜param-name＞detail＜/param-name＞

＜param-value＞2＜/param-value＞

＜/init-param＞

＜load-on-startup＞2＜/load-on-startup＞

＜/servlet＞

……

＜!----以上是指定Struts的ActionServlet---＞

＜servlet＞

＜servlet-name＞dwr-invoker＜/servlet-name＞

＜servlet-class＞

org.directwebremoting.servlet.DwrServlet

＜/servlet-class＞

＜init-param＞

＜param-name＞debug＜/param-name＞

＜param-value＞true＜/param-value＞

＜/init-param＞

……

＜/servlet＞

＜!---以上是指定DWR的DWRServlet----＞

要调用的JavaBean方法需要在DWR的配置文件dwr.xml中进行声明，建立映射，如：

＜create creator="new" javascript="getSnxyxx" scope="page"＞

＜param name="class"

value="edu.whut.cwts.tj.xy.getSnxyxx" /＞

＜/create＞

在页面中直接调用相关的JavaBean：

function funcresult(result)

{

if(result=="1")//如果公司名称验证通过，获取该公司到目前的协议情况

{var result;

getSnxyxx.getallxxdwmc.value, dwxz.value,funcresult);

}

……}

function funcresult(result)

{//对公司协议信息的显示

……

}

DWR允许用户像调用JavaScript的函数一样调用Java方法，对于Struts框架中的ActionForm类和Action类也可以直接通过DWR调用，只需要在dwr.xml文件根据实际业务需要，对用到的类进行如上的声明即可。程序中，根据实际业务需要有的地方DWR进行实现，有的地方用Struts来实现，有的需要两者结合实现，进行灵活控制，开发高效的水路电子征稽系统。

4 结束语

本文将现在比较流行的Ajax技术与成熟的开发模式MVC相结合，可以充分发挥两者的优点，组成更为合理高效的新型web框架。Ajax技术可以异步响应页面请求，使得页面的展现更加灵活动态；基于MVC模式的Struts框架使得系统的开发，测试和维护更加科学合理。将这种新型web框架应用到应用系统的开发中，有利于改善B/S模式应用系统中普遍存在的问题，充分利用客户端的资源，减轻服务器端压力，给用户提供基于web的功能和桌面级的用户体验。

参考文献：

[1] 游丽珍,郭宇春,李纯喜.Ajax引擎的原理和应用[J].微计算机信息,2006,6(9):205-207.

[2] 佘名高,吴海林,熊童满,等.Ajax在Struts中的应用[J].计算机技术与发展,2007,10(17):69-72.

[3] 田福生,张燕平.用Ajax技术实现B/S模式下客户端间信息交互[J].计算机技术与发展,2007,10(17):92-95.

[4] 马凯,赵宝龙.Ajax技术及其在STRUTS应用中的实现[J].电脑编程技巧与维护,2006(12):23-27.