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