基于不重新发明轮子的原则,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" οnblur="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非常方便。