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