Struts2 Ajax

基于不重新发明轮子的原则，Struts 2并没有开发新的AJAX框架，而是使用时下Java EE平台中比较流行的AJAX框架——Dojo和DWR。
最近在Musachy Barroso等同志的无私奉献下，开发了Struts 2的JSON插件（Plugin），极大地方便了我们输出JSON结果（Result）。这些框架都是开发Ajax不错的选择，项目中可选择使用。

一、使用Ajax主题提交表单

1、JSP页面

<
s:head
 
theme
=
"ajax"
/>
<
div
 
id
=
"show"
>
原始内容
</
div
>
<
s:form
 
action
=
"deal"
 
method
=
"post"
 
theme
=
"ajax"
>
     <
s:datetimepicker
 
name
=
"chooseDate"
 
label
=
"日期选择"
/>
     <
s:submit
 
targets
=
"show"
 
loadingText
=
"请等待，提交中..."
/>
</
s:form
>

<s:head theme="ajax"/>
<div id="show">原始内容</div>
<s:form action="deal" method="post" theme="ajax">	
     <s:datetimepicker name="chooseDate" label="日期选择"/>
     <s:submit targets="show" loadingText="请等待，提交中..."/>
</s:form>

 

2、Action配置

<
action
 
name
=
"deal"
 
class
=
"com.xy.struts2.DealWithParams"
>
     <!-- 使用Ajax主题提交后必须返回一个视图 -->
    <
result
 
name
=
"success"
>
/AjaxResult.jsp
</
result
>
</
action
>

<action name="deal" class="com.xy.struts2.DealWithParams">
     <!-- 使用Ajax主题提交后必须返回一个视图 -->
    <result name="success">/AjaxResult.jsp</result>
</action>

 

3、AjaxResult

<
%@ page 
language
=
"java"
 
pageEncoding
=
"GBK"
%
>
<
%@ taglib 
prefix
=
"s"
 
uri
=
"/struts-tags"
 %
>
<
%
    //设置页面不缓存
    request.setAttribute("decorator","none");
    response.setHeader("Cache-Control","no-cache");
    response.setHeader("Pragma","no-cache");
    response.setDateHeader("Expires",0);
 %>
 <!-- 下面是Action返回页面的数据 -->
 <
s:property
 
value
=
"chooseDate"
/>
 <
s:property
 
value
=
"msg"
/>

<%@ page language="java" pageEncoding="GBK"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
	//设置页面不缓存
	request.setAttribute("decorator","none");
	response.setHeader("Cache-Control","no-cache");
	response.setHeader("Pragma","no-cache");
	response.setDateHeader("Expires",0);
 %>
 <!-- 下面是Action返回页面的数据 -->
 <s:property value="chooseDate"/>
 <s:property value="msg"/>

 

4、Action

代码略。

 

5、小结

利用Struts2整合的Ajax主题，可用实现表单异步提交，但是必须使用一个额外的视图来接受数据，有点麻烦。

 

二、使用JSON插件开发Ajax

JSON 插件提供了一种名为json的ResultType，一旦为某个Action指定了一个类型为json的Result，则该Result无需映射到任何视 图资源。因为JSON插件会负责将Action里的状态信息序列化成JSON格式的数据，并将该数据返回给客户端页面的JavaScript。

 

　　简单地说，JSON插件允许我们在JavaScript中异步调用Action，而且Action不再需要使用视图资源来显示该Action里的状态信息，而是由JSON插件负责将Action里的状态信息返回给调用页面——通过这种方式，就可以完成Ajax交互。

 

　　Struts2提供了一种可插拔方式来管理插件，安装Struts2的JSON插件与安装普通插件并没有太大的区别，一样只需要将Struts2插件的JAR文件复制到Web应用的WEB-INF/lib路径下即可。　

 

（1）将json-plugin.jar文件复制到Web应用的WEB-INF路径下，即可完成JSON插件的安装。

 

（2）把JSON.js、prototype-1.4.0.js复制到js文件夹下

（3）完成JSP页面

<
%@ page 
language
=
"java"
 
pageEncoding
=
"GBK"
%
>
<
%@ taglib 
prefix
=
"s"
 
uri
=
"/struts-tags"
%
>
<
html
>
    <
head
>
        <
title
>
<
s:text
 
name
=
"user.register"
 
/>
</
title
>
        <!--导入JS内库-->
        <
script
 
src
=
"js/prototype-1.4.0.js"
 
type
=
"text/javascript"
>
</
script
>
        <
script
 
src
=
"js/json.js"
 
type
=
"text/javascript"
>
</
script
>
        <!--自定义Ajax事件-->
        <
script
 
language
=
"JavaScript"
>
            function validateName()
            {
                //请求的地址
                var url
 = 
'validateName.action'
;
                var params
 = 
Form
.Element.serialize('user.uid');
                //创建Ajax.Request对象，对应于发送请求
                var myAjax
 = 
new
 Ajax.Request(
                url,
                {
                    //请求方式：POST
                    method:'post',
                    //请求参数
                    parameters:params,
                    //指定回调函数
                    onComplete: processResponse,
                    //是否异步发送请求
                    asynchronous:true
                });
            }
            function processResponse(request)
            {
                var action
 = 
request
.responseText.parseJSON();
                $("tip").innerHTML
 = 
action
.tip;
                $("tip2").innerHTML
=
'欢迎您，'
+action.user.uid;
            }
        </
script
>
    </
head
>
    <
body
>
    <
span
 
id
=
"tip"
 
style
=
"color:red;font-weight:bold"
>
</
span
>
        <
s:form
 
action
=
"Register"
 
validate
=
"true"
>
            <
s:textfield
 
name
=
"user.uid"
 
key
=
"user.uid"
 
onblur
=
"validateName();"
/>
            <
s:password
 
name
=
"user.upwd"
 
key
=
"user.upwd"
 
/>
            <
s:submit
 
key
=
"submit"
 
/>
        </
s:form
>
    </
body
>
</
html
>

<%@ page language="java" pageEncoding="GBK"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<html>
	<head>
		<title><s:text name="user.register" /></title>
		<!--导入JS内库-->		
		<script src="js/prototype-1.4.0.js" type="text/javascript"></script>
		<script src="js/json.js" type="text/javascript"></script>
		<!--自定义Ajax事件-->	
		<script language="JavaScript">
			function validateName()
			{
				//请求的地址
				var url = 'validateName.action';
				var params = Form.Element.serialize('user.uid');
				//创建Ajax.Request对象，对应于发送请求
				var myAjax = new Ajax.Request(
				url,
				{
					//请求方式：POST
					method:'post',
					//请求参数
					parameters:params,
					//指定回调函数
					onComplete: processResponse,
					//是否异步发送请求
					asynchronous:true
				});
			}
			function processResponse(request)
			{				
				var action = request.responseText.parseJSON();
				$("tip").innerHTML = action.tip;
				$("tip2").innerHTML='欢迎您，'+action.user.uid;
			}	
		</script>
	</head>
	<body>
	<span id="tip" style="color:red;font-weight:bold"></span>
		<s:form action="Register" validate="true">
			<s:textfield name="user.uid" key="user.uid" onblur="validateName();"/>
			<s:password name="user.upwd" key="user.upwd" />
			<s:submit key="submit" />
		</s:form>
	</body>
</html>

 

（4）完成Action

代码略。

 

（5）配置Action

<
package
 
name
=
"a"
 
extends
=
"json-default"
 
namespace
=
""
>
 <
action
 
name
=
"validateName"
 
class
=
"demo.ValidateName"
>
      <
result
 
type
=
"json"
/>
</
action
>

<package name="a" extends="json-default" namespace=""> 
 <action name="validateName" class="demo.ValidateName">
      <result type="json"/>
</action>	

 

（6）总结

使用JSON插件开发Ajax非常方便。

评论

3 楼 andrew 2008-10-08  

[img][/img][url][/url][flash=200,200][/flash]

引用

[u][/u][i][/i][b][/b]

2 楼 miaozilong 2008-10-05  

[e-mail]

1 楼 miaozilong 2008-10-05  

如果想在表单中直接验证，而不是等下提交的时候 ，有什么属性可以设置的？
<s:datetimepicker name="chooseDate" label="日期选择"/>  例如这里面失去焦点的时候我就想提交了