Struts2对AJAX的支持

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Struts2对AJAX的支持相关的知识,希望对你有一定的参考价值。

一、简介
       struts2确实一个非常棒的MVC框架。这里部分记述一下struts2对AJAX的支持。实现AJAX有两种方式,一种是使用原生的javascript代码实现,一种是使用第三方的ajax框架(jquery,dwr,dojo等),jquery和dwr比较简单,做项目时也会经常用到。Struts2并没有发明新的AJAX框架,而是使用两个较为流行的框架,即Dojo框架和DWR框架。
   Dojo是一个用javascript语言实现的开源Dhtml工具包,是一个客户端的AJaX框架,是一个JS的工具集。Struts2提供了一些基于Dojo的标签,支持AjaX功能。
   DWR框架是Direct Web Remoting的缩写。是一个服务端的AjaX框架。他包含服务端Java类库、一个DWR Servlet以及Javascript库。
  struts2对ajaX的集成,主要依赖与ajax主题(theme)实现的。struts2共有三种主题:simple、XHTML、ajax。默认是XHTML主题,ajax主题是XHTML的扩展,并加入了ajax的特性。
二、struts2集成Dojo步骤
   
   第1步:添加jar包    struts2-dojo-plugin-2.1.8.1.jar
   第2步:引入标签库(jsp代码)
     <%@ taglib uri="/struts-tags" prefix="s"%>
     <%@ taglib uri="/struts-dojo-tags" prefix="sx" %>
  
   第3步:引入头信息(jsp代码)
        <!-- 引入头信息 -->
        <sx:head/>
 

A、FCK的功能
    <!-- 使用textarea标签 -->
<sx:textarea name="intro" rows="10" cols="30" label="介绍"></sx:textarea>

技术分享
B、自动提示时间功能
  <!-- 时间标签 -->
  <sx:datetimepicker name="birth"></sx:datetimepicker>


技术分享




C、树的功能
    <!-- tree-->
    <sx:tree label="城市" id="city">
      <sx:treenode label="北京" id="bj">
        <sx:treenode label="朝阳" id="cy"></sx:treenode>
        <sx:treenode label="海淀" id="cy"></sx:treenode>
        <sx:treenode label="昌平" id="cy"></sx:treenode>
      </sx:treenode>
      <sx:treenode label="河北" id="bj">
          <sx:treenode label="石家庄"></sx:treenode>
          <sx:treenode label="保定"></sx:treenode>
          <sx:treenode label="张家口">
              <sx:treenode label="怀安县">
              </sx:treenode>
              <sx:treenode label="万全县"></sx:treenode>
              <sx:treenode label="尚义县"></sx:treenode>
              <sx:treenode label="张北县"></sx:treenode>
          </sx:treenode>
      </sx:treenode>
      <sx:treenode label="河南" id="bj"></sx:treenode>
    </sx:tree>

技术分享
D、自动提示功能
     <!-- autocompleter 自动完成-->
    <sx:autocompleter name="sle" list="{‘abc‘,‘abcd‘,‘abcde‘,‘abcdef‘,‘abcdefg‘}">
    </sx:autocompleter>


技术分享




三、
Struts2 集成DWR 步骤(

dwr 全面解析http://blog.csdn.net/zhaizhanpo/article/details/2988512

  DWR包含 2个主要部分:
   (1) 一个运行在服务器端的Java Servlet,它处理请求并且向浏览器发回响应。
   (2) 运行在浏览器端的JavaScript,它发送请求而且还能动态更新网页。
     DWR工作原理是通过动态把Java类生成为Javascript。它的代码就像Ajax魔法一样,你感觉调用就像发生在浏览器端,但是实际上代码调用发生在服务器端,DWR负责数据的传递和转换。这种从Java 到JavaScript的远程调用功能的方式使DWR用起来有种非常像RMI或者SOAP的常规RPC机制,而且DWR的优点在于不需要任何的网页浏览器插件就能运行在网页上。
 
    下载与配置DWR

1)在web应用中加载DWR的Jar包


目前2.0尚不支持struts2

如果是用dwr2.0的jar包,还需要同时导入log4j.jar和commons-loggin.jar包

2)配置web.xml文件(配置DWR的核心Servlet,该Servlet负责将服务器端的Java方法暴露出来)
    <!-- 在web.xml中配置的Dwr的核心Servlet -->
  <servlet>
     <servlet-name>dwr</servlet-name>
     <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
     <init-param>
        <param-name>debug</param-name>
        <param-value>true</param-value>
     </init-param>
  </servlet>
  <servlet-mapping>
     <servlet-name>dwr</servlet-name>
     <url-pattern>/dwr/*</url-pattern>
  </servlet-mapping>
</web-app>

3)在WEB-INF/lib目录下 ,创建dwr.xml文件。Java方法被暴露出来了,但是具体要暴露哪些方法,需要在dwr.xml中配置被暴露的方法。
   <?xml version="1.0" encoding="UTF-8"?>

    <!-- START SNIPPET: dwr -->
<!DOCTYPE dwr PUBLIC
    "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"
    "http://www.getahead.ltd.uk/dwr/dwr10.dtd">

<dwr>
    <allow>
        <create creator="new" javascript="validator">
            <param name="class" value="org.apache.struts2.validators.DWRValidator" />
        </create>
        <convert converter="bean"
            match="com.opensymphony.xwork2.ValidationAwareSupport" />
    </allow>

    <signatures>
        <![CDATA[
        import java.util.Map;
        import org.apache.struts2.validators.DWRValidator;

        DWRValidator.doPost(String, String, Map<String, String>);
        ]]>
    </signatures>
</dwr>
  dwr.xml配置文件中,将org.apache.struts2.validators.DWRValidator类创建成一个JavaScript 对象,名为validator。DWR框架提供中方式,允许客户端调用validator的方法时,转换成调用DWRValidator实例的方法。

4)建立前台Jsp登陆页面
 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
   
    <title>My JSP ‘index.jsp‘ starting page</title>
   
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">   
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
   
  </head>
 
  <body>
  <s:head theme="ajax"/>  <--也可以放在头部,或者任意位置-->
    <s:form method="post" action="rs" validate="true" theme="ajax">
            <s:textfield label="用户名" name="username" />           
            <s:password label="密码" name="password"></s:password>
            <s:textfield label="年龄" name="age"></s:textfield>
            <s:submit value="注册" />
        </s:form>           
  </body>
</html>
  注意的是:需要将表单设置为Ajax主题,并且设置validate="true".当某个输入组件失去焦点时,系统将负责将输入内容发送到服务器端进行校验。

5)建立Action类
  import com.opensymphony.xwork2.ActionSupport;

@SuppressWarnings("serial")
public class ReAction extends ActionSupport {
    private String username;
    private String userpass;
    private int age;
    public int getAge() {
        return age;
    }
    public void setAge(int age) {
        this.age = age;
    }
    public String getUsername() {
        return username;
    }
    public void setUsername(String username) {
        this.username = username;
    }
    public String getUserpass() {
        return userpass;
    }
    public void setUserpass(String userpass) {
        this.userpass = userpass;
    }
    public String execute() throws Exception{
        return SUCCESS;
    }
}

6)建立相应的struts.xml文件
  <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
    "http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<constant name="struts.devMode" value="true"></constant>
<constant name="struts.il8n.encoding" value="gbk"></constant>
    <package name="ge" extends="struts-default">
       <action name="rs" class="com.zhuxuli.action.ReAction">
          <result name="input">/index.jsp</result>
          <result name="success">/success.jsp</result>
       </action>
    </package>
</struts>

7)现在一个完整的登陆流程都写完了,最后差的一点就是需要在action包下面配置一个校验文件了
注意,本流程是用户登陆的Ajax验证,文件名为:“action类名-validation.xml”
  <!DOCTYPE validators PUBLIC
          "-//OpenSymphony Group//XWork Validator 1.0.2//EN"
          "http://www.opensymphony.com/xwork/xwork-validator-1.0.2.dtd">
         
<validators>
    <field name="username">
        <field-validator type="requiredstring">
            <message>用户名不能为空</message>
        </field-validator>
    </field>
    <field name="userpass">
        <field-validator type="requiredstring">
            <message>密码不能为空</message>
        </field-validator>
    </field><field name="age">
        <field-validator type="int">
            <param name="min">1</param>
            <param name="max">100</param>
            <message>年龄必须在1到100之间</message>
        </field-validator>
    </field>   
</validators>

现在一个完整的DWR in struts2的验证模式已经成功

以上是关于Struts2对AJAX的支持的主要内容,如果未能解决你的问题,请参考以下文章

json与java对象的转换,以及struts2对json的支持,实现ajax技术

struts2学习笔记-------struts2的ajax支持

Struts2-学习笔记系列(15)-ajax支持和JSON

struts2标签学习笔记

Struts2学习利用ajax异步上传

extjs ajax请求与struts2进行交互