Ajax与STRUTS结合构建Web应用研究

摘 要：以无刷新页面提交技术Ajax为前提，通过描述传统应用页面提交的刷新过程中出现的弊端，结合Ajax的技术特点，介绍Ajax技术中的主要组成部分及实现原理。根据Web应用框架STRUTS的工作方式，将Ajax技术与其结合，构建框架下的无刷新Web应用，并介绍主要实现方法。通过对STRUTS框架中Ajax技术的使用，使得浏览器和服务器间异步通信，实现无刷新页面提交。最后阐述Ajax技术的优势及其结合STRUTS框架的实现特点。

关键词：Ajax;STRUTS;XML HTTP Request；异步通信

中图分类号：TP311文献标识码：A

文章编号：1004-373X(2008)22-057-02

Web Application Using Ajax and STRUTS

QI Yanjun,XING Jijun

(Institute for Economy & Management,Northwest University of Political and Law,Xi′an,710063,China)

Abstract： Declared the defect of brush-up Web page in traditional page submission.The peculiarity,principle and main parts of Ajax are introduced.According to the typical of STRUTS framework,combining Ajax with Web application of STRUTS .Using Ajax and STRUTS,asynchronous communication can be fulfilled between client and server.An example is used to introduce how to implement Ajax application.The advantages of Ajax and STRUTS in combination with Ajax to create Web application that no brush-up page are explained.

Keywords：Ajax STRUTS;XML HTTP Request;asynchronous communication

在传统Web应用运行方式中，用户发出HTTP请求到服务器端，后端对该请求进行处理后返回一个新的页面到客户端。但是服务器端在处理客户端提交的服务请求时，客户处于空闲等待状态（无论请求量的大小），因而在每次发出服务请求后都需要花时间等待。而Ajax（Asynchronous JavaScript and XML applications）技术通过Javascript来异步取得XML数据的应用程序，在Web应用中，用户发出的Web服务请求使得用户感觉到几乎所有的操作会很快响应而没有页面重载（白屏）的等待［1］。

1 Ajax技术

Ajax技术采用XMLHTTP组件XMLHTTPRequest对象，无需刷新页面便可向服务器传输或读写数据（即无刷新更新页面），如同桌面应用同服务器交换数据，不用每次都刷新界面也不用每次将数据处理的工作提交给服务器,这样即减轻了服务器的负担又加快响应速度、缩短用户等候时间。

1.1 原理

Ajax不是一门新的语言或技术，是几项技术按一定的方式组合在一起，同共协作发挥各自的作用，包括：

(1) 使用XHTML和CSS标准化呈现；

(2) 使用DOM实现动态显示和交互；

(3) 使用XML和XSLT进行数据交换与处理；

(4) 使用XMLHTTP Request进行异步数据读取；

(5) 使用JavaScript绑定和处理所有数据；

其基本应用模型如图1所示：

从图1中可看出，Ajax应用方式相当于在用户和服务器之间加了一个中间层，通过Ajax 引擎，诸如数据验证和数据处理等工作由Ajax 引擎完成，而从服务器读取数据时由Ajax 引擎向服务器提出请求，使得用户操作与服务器之间实现异步响应。

1.2 Ajax结合STRUTS

STRUTS作为MVC 2的Web应用框架，在Web应用中得到了广泛的应用，由于一些老的Web应用还是采用用户直接将请求发送到服务器端，因此使得用户请求响应较慢。在原有Web应用中加入Ajax技术，将其融入到STRUTS中，优化Web应用［3,4］。方便之处在于：

(1) 不需要任何新的库文件或服务器代码，只需要使用现有的STRUTS库文件和action。

(2) Ajax中包含的所有技术JavaScript，XML，Java和Struts为广泛所知。

(3) 应用可以一块块移植到Ajax，确定应用需求，并将它们更新到动态Ajax显示。

STRUTS中实现Ajax处理的流程如图2所示：

基于上述流程在Web页面引入Ajax的步骤如下：

（1） 在Web页面加入ajax.js文件，其中包含发送和接收Ajax调用的JavaScript方法；

（2） 将需要更新的Web页面设置在标签中，并分配id；

（3） 当事件触发时更新页面，调用serverURL()方法，通过URL传递到需要执行服务器端处理的Struts Action；

（4） Struts Action处理结束后转发回同样的页面， 在服务器响应到达时调用processEnded()方法，服务器响应到达由XMLHTTP Request/Microsoft.XMLHTTP 对象调用。

2 实 现

以作者以前的STRUTS应用为基础，将Ajax应用到其中某个页面，介绍Ajax在STRUTS中实现的主要方法。

2.1 JavaScript中的方法

（1） serverURL()方法［5-9］：该方法负责发送Ajax请求，主要实现如下：

function serverURL (url) {

//调用AJAX

if (window.XMLHttpRequest) {// 非IE浏览器

req = new XMLHttpRequest();

req.onreadystatechange = processEnded; //服务器状态

改变时，指定响应函数

…

req.open("GET",url,true);

req.send(null);//发送请求

} else if (window.ActiveXObject) {// IE浏览器

req = new ActiveXObject("Microsoft.XMLHTTP");

… }

}

(2)processEnded()方法: 该方法在Ajax调用前设定,在服务器响应到达后由XMLHTTP Request/Microsoft.XMLHTTP 对象调用。主要实现如下：

function processEnded () {