div標(biāo)簽用于在頁(yè)面上生成一個(gè)div元素，但這個(gè)div元素內(nèi)容不是靜態(tài)內(nèi)容，而是從服務(wù)器上獲取數(shù)據(jù)，為了讓該div能夠取得服務(wù)器上的數(shù)據(jù)，必須為div標(biāo)簽指定一個(gè)href屬性，這個(gè)href屬性必須是一個(gè)action,該action負(fù)責(zé)生成該div的內(nèi)容
因?yàn)閐iv是一個(gè)ajax標(biāo)簽，因此要為這個(gè)標(biāo)簽增加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>遠(yuǎn)程Div</title>
<s:head theme="ajax"/>
<script type="text/javascript">...
function handler(widget, node) ...{
alert('本地JavaScript函數(shù)處理動(dòng)態(tài)Div');
node.innerHTML = Math.random() > 0.4 ? "Spring2.0寶典" : "輕量級(jí)J2EE企業(yè)應(yīng)用實(shí)戰(zhàn)";
}
</script>
</head>
<body>
<s:url id="rd" value="/random.action"/>
僅從服務(wù)器上獲取一次數(shù)據(jù)
<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>
動(dòng)態(tài)更新內(nèi)容的Div，每隔1s刷新一次(通過(guò)指定updateFreq="1000")<br>
使用indicator(通過(guò)指定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之后才開(kāi)始更新(通過(guò)指定delay="3000")<br>
指定與服務(wù)器交互出錯(cuò)的提示(通過(guò)指定errorText屬性)<br>
指定與服務(wù)器交互過(guò)程中的提示(通過(guò)指定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="加載服務(wù)器數(shù)據(jù)出錯(cuò)"
loadingText="正在加載服務(wù)器內(nèi)容">
初始化文本
</s:div>
指定顯示系統(tǒng)出錯(cuò)提示(通過(guò)指定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="正在加載服務(wù)器內(nèi)容">
初始化文本
</s:div>
執(zhí)行服務(wù)器腳本(通過(guò)指定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="正在加載服務(wù)器內(nèi)容">
初始化文本
</s:div>
執(zhí)行客戶端腳本(每次更新div時(shí)運(yùn)行handler函數(shù))
<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="正在加載服務(wù)器內(nèi)容">
初始化文本
</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("----------");
%>
服務(wù)器返回的隨機(jī)數(shù)字是：<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>
輕量級(jí)J2EE企業(yè)應(yīng)用實(shí)戰(zhàn)
<script language="JavaScript" type="text/javascript">...
alert('基于J2EE的Ajax寶典!');
</script>
下面是使用pub-sub方式的div標(biāo)簽實(shí)例
<%...@ page contentType="text/html;charset=GBK" language="java" %>
<%...@ taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
<title>遠(yuǎn)程Div</title>
<s:head theme="ajax"/>
</head>
<script>...
var controller = ...{
refresh : function() ...{alert("手動(dòng)刷新");},
start : function() ...{alert("啟動(dòng)自動(dòng)刷新");},
stop : function() ...{alert("停止自動(dòng)刷新");}
};
//將controller的refresh方法注冊(cè)成/refresh主題的發(fā)布者
dojo.event.topic.registerPublisher("/refresh", controller, "refresh");
//將controller的start方法注冊(cè)成/startTimer主題的發(fā)布者
dojo.event.topic.registerPublisher("/startTimer", controller, "start");
//將controller的stop方法注冊(cè)成/stopTimer主題的發(fā)布者
dojo.event.topic.registerPublisher("/stopTimer", controller, "stop");
//為after主題指定一個(gè)事件處理函數(shù)
dojo.event.topic.subscribe("/after", function(data, type, e)...{
alert('與服務(wù)器交互過(guò)程中. 現(xiàn)在的過(guò)程類型是：' + 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="手動(dòng)刷新" onclick="controller.refresh()">
<input type="button" value="停止計(jì)時(shí)器" onclick="controller.stop()">
<input type="button" value="啟動(dòng)計(jì)時(shí)器" onclick="controller.start()">
<br>
<s:url id="rd" value="/random.action"/>
使用pub-sub機(jī)制(通過(guò)指定listenTopics等屬性)<br>
發(fā)送表單請(qǐng)求參數(shù)(通過(guò)指定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="正在加載服務(wù)器內(nèi)容..."
listenTopics="/refresh"
startTimerListenTopics="/startTimer"
stopTimerListenTopics="/stopTimer"
updateFreq="9000"
autoStart="true"
formId="form"
notifyTopics="/after">
初始化文本
</s:div>
</body>
</html>