《struts2权威指南》学习笔记之struts2 ajax标签s和submit

<s:a>这个标签生成一个超级链接，用于像服务器发送异步请求，并将服务器响应加载在指定HTML元素中

web.xml

 

<? xml version="1.0" encoding="GBK" ?>
< web-app  version ="2.4"  xmlns ="http://java.sun.com/xml/ns/j2ee"
    xmlns:xsi ="http://www.w3.org/2001/XMLSchema-instance"  
    xsi:schemaLocation ="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd" >

< 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 >



         < filter >
         < filter-name > struts2 </ filter-name >
         < filter-class > org.apache.struts2.dispatcher.FilterDispatcher </ filter-class >
     </ filter >

     < filter-mapping >
         < filter-name > struts2 </ filter-name >
         < url-pattern > /* </ url-pattern >
     </ filter-mapping >

</ web-app >

 struts.xml

 

<! 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.custom.i18n.resources"  value ="messageResource" />
     < constant  name ="struts.i18n.encoding"  value ="GBK" />

     < package  name ="ajax"  extends ="struts-default" >
         < action  name ="AjaxTest"  class ="lee.AjaxTestAction" >
             < result > /AjaxResult.jsp </ result >
         </ action >
         < action  name ="Test3" >
             < result > /testjs.jsp </ result >
         </ action >
     </ package >

</ struts >

 

RandomAction

 

package  lee;

import  com.opensymphony.xwork2.Action;

import  java.io.Serializable;


public   class  AjaxTestAction  implements  Action, Serializable
... {

    private static int counter = 0;
    private String data;

    public long getServerTime()
    ...{
        return System.currentTimeMillis();
    }

    public int getCount()
    ...{
        return ++counter;
    }

    public String getData()
    ...{
        return "服务器提示：" + data;
    }

    public void setData(String data)
    ...{
        this.data = data;
    }

    public String execute() throws Exception 
    ...{
        return SUCCESS;
    }
}

 

AjaxResult.jsp

 

<% ... @ page contentType="text/html;charset=GBK" language="java"  %>
<% ... @ taglib prefix="s" uri="/struts-tags"  %>
<% ...
    request.setAttribute("decorator", "none");
    response.setHeader("Cache-Control","no-cache"); //HTTP 1.1
    response.setHeader("Pragma","no-cache"); //HTTP 1.0
    response.setDateHeader ("Expires", 0); //prevents caching at the proxy server
%>

服务器计数器:  < s:property  value ="count" />< br >
当前时间是： < s:property  value ="serverTime" />< br >
服务器返回的提示是： < s:property  value ="data" />

testjs.jsp

 

<% ... @ page contentType="text/html;charset=GBK" language="java"  %>
<% ...
    request.setAttribute("decorator", "none");
    response.setHeader("Cache-Control","no-cache"); //HTTP 1.1
    response.setHeader("Pragma","no-cache"); //HTTP 1.0
    response.setDateHeader ("Expires", 0); //prevents caching at the proxy server
%>

< script  language ="JavaScript"  type ="text/javascript" > ...
    alert('Spring2.0宝典');
</ script >
轻量级J2EE企业应用实战
< script  language ="JavaScript"  type ="text/javascript" > ...
    alert('基于J2EE的Ajax宝典!');
</ script >

 

remotelink.jsp

 

<% ... @ page contentType="text/html;charset=GBK" language="java"  %>
<% ... @ taglib prefix="s" uri="/struts-tags"  %>
< html >
< head >
     < title > 远程链结 </ title >
     < s:head  theme ="ajax" />
</ head >

< script  type ="text/javascript" > ...
    function before()...{alert("before request");}
    function after()...{alert("after request");}
    function handler(widget,node)...{
      alert("本地函数");
      dojo.byId(widget.targetsArray[0]).innerHTML="spring2.0宝典";
    }
    dojo.event.topic.subscribe("/after",function(data,type,e)...{
      alert("正处于dojo的异步交互过程中，类型是:"+type);
    })
    
</ script >

< body >
< s:url  id ="ajaxTest"  value ="/AjaxTest.action"   />
< s:url  id ="test3"  value ="/Test3.action"   />
< div  id ="t1"  style ="background-color:#bbbbbb;width:360px;height:80px" > Div 1 </ div >
< br />
< div  id ="t2"  style ="background-color:#bbbbbb;width:360px;height:80px" > Div 2 </ div >
< br />

< br />
同时修改Div1和Div2的内容 < br />
且将事件发布到/after主题(指定notifyTopics属性) < br />
< s:a     id ="link1"    
        theme ="ajax"
        href ="%{ajaxTest}"
        indicator ="indicator"
        targets ="t1,t2"  notifyTopics ="/after"   > 修改Div1和Div2内容 </ s:a >
< img  id ="indicator"  src ="${pageContext.request.contextPath}/images/indicator.gif"  alt ="Loading..."  style ="display:none" />

< br />
指定服务期返回失败时的错误提示(指定errorText属性) < br />
因为系统中AjaxNoUrl.jsp页面不存在，肯定出错！ < br />
< s:a     id ="link2"
        theme ="ajax"
        href ="/AjaxNoUrl.jsp"
        errorText ="系统服务器返回信息出错"
        targets ="t1" > 修改'Div 1'内容，使用自定义出错提示 </ s:a >
< br />
指定系统加载中的提示信息(指定loadingText属性) < br />
< s:a     id ="link3"
        theme ="ajax"
        href ="%{ajaxTest}"
        loadingText ="系统正在加载中..."
        targets ="t1" > 修改'Div 1'内容，使用自定义加载信息 </ s:a >
< br />

执行远程JavaScript代码(指定executeScripts＝true属性) < br />
< s:a     id ="link4"
        theme ="ajax"
        href ="%{test3}"
        executeScripts ="true"
        targets ="t2" > 接执行远程JavaScript </ s:a >
< br />

通过使用自定义JavaScript函数来实现Ajax交互(指定handle属性) < br />
< s:a     id ="link5"
        theme ="ajax"
        href ="%{ajaxTest}"
        handler ="handler"
        targets ="t2" > 使用自定义的处理函数 </ s:a >
< form  id ="form" >
   < input  type =textbox  name ="data" >
</ form >
提交表单请求(通过指定formId属性)
< s:a     id ="link6"
        theme ="ajax"
        href ="%{ajaxTest}"
        targets ="t2"
        formId ="form" > Div 2 会显示在上面文本框中输入的内容 </ s:a >
</ body >
</ html >

 

remotebutton.jsp

 

<% ... @ page contentType="text/html; charset=UTF-8" %>
<% ... @ page pageEncoding="UTF-8" %>
<% ... @ taglib prefix="s" uri="/struts-tags"  %>
< html >
< head >
     < title > 远程按钮 </ title >
     < s:head  theme ="ajax"  debug ="true" />
</ head >

< script  type ="text/javascript" > ...
    dojo.event.topic.subscribe("/after", function(data, type, e)...{
      alert('正处于Dojo的异步交互过程中，类型是：'+type);
      //data : text returned
      //type : "before", "load" or "error"
      //e    : request object
   });
</ script >

< body >

< div  id ="t1"  style ="background-color:#bbbbbb;width:360px;height:80px" > 将被改变的结果 </ div >
< s:url  id ="ajaxTest"  value ="/AjaxTest.action"   />
简单的提交按钮，使用indicator < br >
< img  id ="indicator"  src ="${pageContext.request.contextPath}/images/indicator.gif"  alt ="Loading..."  style ="display:none" />
<!--  targets属性设置用于装载被改变的HTML元素  -->
< s:submit  type ="submit"  theme ="ajax"  value ="提交"  targets ="t1"  href ="%{ajaxTest}"  align ="left"  indicator ="indicator" />
< br />
简单的提交按钮，使用pub-sub事件模型(设置notifyTopics=/after属性) < br >
< s:submit  type ="submit"  theme ="ajax"  value ="提交"  targets ="t1"  href ="%{ajaxTest}"  align ="left"  notifyTopics ="/after" />
< br />
图片按钮（通过指定type="image"） < br >
< s:submit  type ="image"  theme ="ajax"  label ="Alt Text"  targets ="t1"
  src ="${pageContext.request.contextPath}/images/struts-power.gif"  href ="%{ajaxTest}"  align ="left"   />
< br />
异步方式提交表单：(在下面输入的文本将在上面显示)
< s:form  id ="form"  action ="AjaxTest" >
   < input  type ="text"  name ="data" />
   < s:submit  type ="button"  theme ="ajax"  label ="发送"  targets ="t1"  id ="ajaxbtn" />
</ s:form >

</ body >
</ html >

 

struts.properties

struts.custom.i18n.resources=messageResource
struts.i18n.encoding=utf-8
struts.locale = UTF-8