《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 >
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值