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

div标签用于在页面上生成一个div元素，但这个div元素内容不是静态内容，而是从服务器上获取数据，为了让该div能够取得服务器上的数据，必须为div标签指定一个href属性，这个href属性必须是一个action,该action负责生成该div的内容

因为div是一个ajax标签，因此要为这个标签增加theme="ajax"属性

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 >

 

<! 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 ="random"  class ="lee.RandomAction" >
             < 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  RandomAction  implements  Action
... {
    private String data;

    public String getRdmStr()
    ...{

        String result = String.valueOf(Math.round(Math.random() * 10000));
    
       
        return data != null && !data.equals("") ? data + result : result;
    }

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

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

 

remotediv.jsp

 

<% ... @ page contentType="text/html;charset=GBK" language="java"  %>
<% ... @ taglib prefix="s" uri="/struts-tags"  %>
< html >
< head >
     < title > 远程Div </ title >
     < s:head  theme ="ajax" />
     < script  type ="text/javascript" > ...
    function handler(widget, node) ...{
        alert('本地JavaScript函数处理动态Div');
        node.innerHTML = Math.random() > 0.4 ? "Spring2.0宝典" : "轻量级J2EE企业应用实战";
    }
</ script >
</ head >
< body >
< s:url  id ="rd"  value ="/random.action" />
仅从服务器上获取一次数据
< s:div  id ="div1"  
       theme ="ajax"  
       cssStyle ="border:1px solid black;background-color:#dddddd;width:300px;height:40px;padding-top:8px;padding-left:20px"
       href ="%{rd}" ></ s:div >
< br >
动态更新内容的Div，每隔1s刷新一次(通过指定updateFreq="1000") < br >
使用indicator(通过指定indicator="indicator") < br >
< s:div   id ="div2"
        theme ="ajax"
        cssStyle ="border: 1px solid black;background-color:#dddddd;
            width:300px;height:40px;padding-top:8px;padding-left:20px"
        href ="%{rd}"
        updateFreq ="6000"
        indicator ="indicator" >
    初始化文本
</ s:div >
< img  id ="indicator"  src ="${pageContext.request.contextPath}/images/indicator.gif"  alt ="Loading..."  style ="display:none" />< br >

3s之后才开始更新(通过指定delay="3000") < br >
指定与服务器交互出错的提示(通过指定errorText属性) < br >
指定与服务器交互过程中的提示(通过指定loadText属性) < br >
< s:div   id ="div3"
        theme ="ajax"
        cssStyle ="border: 1px solid black;background-color:#dddddd;
            width:300px;height:40px;padding-top:8px;padding-left:20px"
        href ="%{rd}"
        updateFreq ="1000"
        delay ="3000"
        errorText ="加载服务器数据出错"
        loadingText ="正在加载服务器内容" >
    初始化文本
</ s:div >

指定显示系统出错提示(通过指定showErrorTransportText="true") < br >
< s:div   id ="div4"
        theme ="ajax"
        cssStyle ="border: 1px solid black;background-color:#dddddd;
            width:300px;height:40px;padding-top:8px;padding-left:20px"
        href ="/AjaxNoUrl.jsp"
        updateFreq ="1000"
        showErrorTransportText ="true"
        loadingText ="正在加载服务器内容" >
    初始化文本
</ s:div >

执行服务器脚本(通过指定executeScripts="true")
< s:url  id ="test"  value ="/Test3.action"   />
< s:div   id ="div5"
        theme ="ajax"
        cssStyle ="border: 1px solid black;background-color:#dddddd;
            width:300px;height:40px;padding-top:8px;padding-left:20px"
        href ="%{test}"
        updateFreq ="9000"
        executeScripts ="true"
        loadingText ="正在加载服务器内容" >
    初始化文本
</ s:div >

执行客户端脚本(每次更新div时运行handler函数)
< s:url  id ="test"  value ="/Test3.action"   />
< s:div   id ="div5"
        theme ="ajax"
        cssStyle ="border: 1px solid black;background-color:#dddddd;
            width:300px;height:40px;padding-top:8px;padding-left:20px"
        href ="%{test}"
        updateFreq ="9000"
        handler ="handler"
        loadingText ="正在加载服务器内容" >
    初始化文本
</ s:div >
</ body >
</ html >

 

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
System.out.println("----------");
%>
服务器返回的随机数字是： < s:property  value ="rdmStr" />

 

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 >

 

下面是使用pub-sub方式的div标签实例

 

<% ... @ page contentType="text/html;charset=GBK" language="java"  %>
<% ... @ taglib prefix="s" uri="/struts-tags"  %>
< html >
< head >
     < title > 远程Div </ title >
     < s:head  theme ="ajax" />
</ head >
< script > ...
    var controller = ...{
        refresh : function() ...{alert("手动刷新");},
        start : function() ...{alert("启动自动刷新");},
        stop : function() ...{alert("停止自动刷新");}
    };

    //将controller的refresh方法注册成/refresh主题的发布者
    dojo.event.topic.registerPublisher("/refresh", controller, "refresh");
    //将controller的start方法注册成/startTimer主题的发布者
    dojo.event.topic.registerPublisher("/startTimer", controller, "start");
    //将controller的stop方法注册成/stopTimer主题的发布者
    dojo.event.topic.registerPublisher("/stopTimer", controller, "stop");
    //为after主题指定一个事件处理函数
    dojo.event.topic.subscribe("/after", function(data, type, e)...{
        alert('与服务器交互过程中. 现在的过程类型是：' + type);
        //data : text returned
        //type : "before", "load" or "error"
        //e    : request object
    });
</ script >
< body >
< form  id ="form" >
     < s:textfield  name ="data"  label ="输入框" />
</ form >

< input  type ="button"  value ="手动刷新"  onclick ="controller.refresh()" >
< input  type ="button"  value ="停止计时器"  onclick ="controller.stop()" >
< input  type ="button"  value ="启动计时器"  onclick ="controller.start()" >
< br >
< s:url  id ="rd"  value ="/random.action" />
使用pub-sub机制(通过指定listenTopics等属性) < br >
发送表单请求参数(通过指定formId="form") < br >
< s:div   id ="div1"
        theme ="ajax"
        cssStyle ="border: 1px solid black;background-color:#dddddd;
            width:300px;height:40px;padding-top:8px;padding-left:20px"
        href ="%{rd}"
        loadingText ="正在加载服务器内容..."
        listenTopics ="/refresh"
        startTimerListenTopics ="/startTimer"
        stopTimerListenTopics ="/stopTimer"
        updateFreq ="9000"
        autoStart ="true"
        formId ="form"
        notifyTopics ="/after" >
    初始化文本
</ s:div >
</ body >
</ html >