2007-09-26
webwork + ajax 整合实例
首先, 配置好webwork环境.
在webwork中应用ajax技术,只要在webwork的返回值上加以区别就可以把 动态取得的值,返回给前台浏览器.
在这个实例中,我们有一个html页面,一个java文件,然后再配置文件中写上相关映射就OK了.
代码如下:
dynamicUpdate.html
<html>
<head>
<title>update of ajax</title>
<script type="text/javascript">...
var xmlHttp;
var dom;
function createXMLHttpRequest()...{
if(window.ActiveXObject)...{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else...{
xmlHttp = new XMLHttpRequest();
}
}
function doStart()...{
createXMLHttpRequest();
var url = "dynamicUpdate.action?task=reset";
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange = startCallback;
xmlHttp.send(null);
}
function startCallback()...{
if(xmlHttp.readyState == 4)...{
if(xmlHttp.status == 200 )...{
setTimeout("pollServer()",5000);
refreshTime();
}
}
}
function pollServer()...{
createXMLHttpRequest();
var url = "dynamicUpdate.action?task=foo";
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange = pollCallback;
xmlHttp.send(null);
}
function refreshTime()...{
var time_span = document.getElementById("time");
var time_val = time_span.innerHTML;
var int_val = parseInt(time_val);
var new_int_val = int_val -1;
if(new_int_val > -1)...{
setTimeout("refreshTime()",5000);
time_span.innerHTML = new_int_val;
}else...{
time_span.innerHTML = 5;
}
}
function pollCallback()...{
if(xmlHttp.readyState == 4)...{
if(xmlHttp.status == 200)...{
//alert(xmlHttp.responseText)
// alert(xmlHttp.responseXML.childNodes.length)
// alert(xmlHttp.responseXML.getElementsByTagName("message")[0]);
createXMLParser(xmlHttp.responseText);
var message = dom.getElementsByTagName("message")[0].firstChild.data;
if(message != "done")...{
var new_row = createRow(message);
var table = document.getElementById("dynamicUpdateArea");
var table_body = table.getElementsByTagName("tbody").item(0);
var first_row = table_body.getElementsByTagName("tr").item(1);
table_body.insertBefore(new_row,first_row);
setTimeout("pollServer()",5000);
}
}
}
}
function createRow(message)...{
var row = document.createElement("tr");
var cell = document.createElement("td");
var cell_data = document.createTextNode(message);
cell.appendChild(cell_data);
row.appendChild(cell);
return row;
}
//初始化XML解析器
function createXMLParser(text)...{
if(window.ActiveXObject)...{
dom = new ActiveXObject("Microsoft.XMLDOM");
dom.async = false;
dom.loadXML(text);
}else...{
var parser = new DOMParser();
dom = parser.parseFromString(text,"text/html");
}
}
</script>
</head>
<body>
<h1>Ajax Dynamic Update Example</h1>
This page will automatically update itself:
<input type="button" value="Launch" id="go" onclick="doStart()"/>
<p>
Page will refresh in <span id="time">5</span> seconds
</p>
<table id="dynamicUpdateArea" align="left">
<tbody>
<tr id="row0"><td></td></tr>
</tbody>
</table>
</body>
</html>
DynamicUpdate.java
package control;
import java.io.PrintWriter;
import java.math.*;
import javax.servlet.http.HttpServletResponse;
import com.opensymphony.webwork.ServletActionContext;
import core.BookActionSupport;
public class DynamicUpdate extends BookActionSupport...{
private int counter = 1;
private double random;
public String execute()...{
String res = "";
String task = getParameter("task");
String message = "";
random = Math.floor(Math.random()*100);
while(random > 7)...{
random = Math.sin(random)*10 ;
random = Math.abs(Math.floor(random));
System.out.println(random);
}
counter = (int)random;
if(task.equals("reset"))...{
counter = 1;
}else...{
switch(counter)...{
case 1: message = "Steve walks on stage"; break;
case 2: message = "iPods rock"; break;
case 3: message = "Steve says Macs rule"; break;
case 4: message = "Change is coming"; break;
case 5: message = "Yes,OS X runs on Intel-has for years"; break;
case 6: message = "Macs will soon have Intel chips"; break;
case 7: message = "done"; break;
}
}
res = "<message>" + message + "</message>";
try...{
HttpServletResponse response = ServletActionContext.getResponse();
PrintWriter out = response.getWriter();
response.setContentType("text/html");
response.setHeader("Cache-Control","no-cache");
out.write(res);
out.close();
}catch(Exception e)...{
System.out.println(e.getMessage());
}
return "";
}
}
xwork.xml
在此配文件需要注意你的包名,我的包名是helloWorld;
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xwork PUBLIC "-//OpenSymphony Group//XWork 1.0//EN" "X:WorkSpaceBFPPropertyconfigwebxwork-1.0.dtd">
<xwork>
<include file="webwork-default.xml"/>
<package name="helloWorld" extends="webwork-default">
<interceptors>
<interceptor name="params" class="com.opensymphony.xwork.interceptor.ParametersInterceptor"/>
</interceptors>
<default-interceptor-ref name="defaultStack"/>
<action name="dynamicUpdate" class="control.DynamicUpdate">
<result name="success">/jsp/domainS.jsp</result>
<interceptor-ref name="model-driven"/>
<interceptor-ref name="params"/>
</action>
</package>
</xwork>
OK,如果你是copy 的代码,在配置文件正确的情况下,应该可以运行了. 看看结果吧. 一定要注意配置文件和浏览器版本.在IE5以下的版本是不支持ajax的.
Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1799725
在webwork中应用ajax技术,只要在webwork的返回值上加以区别就可以把 动态取得的值,返回给前台浏览器.
在这个实例中,我们有一个html页面,一个java文件,然后再配置文件中写上相关映射就OK了.
代码如下:
dynamicUpdate.html
<html>
<head>
<title>update of ajax</title>
<script type="text/javascript">...
var xmlHttp;
var dom;
function createXMLHttpRequest()...{
if(window.ActiveXObject)...{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else...{
xmlHttp = new XMLHttpRequest();
}
}
function doStart()...{
createXMLHttpRequest();
var url = "dynamicUpdate.action?task=reset";
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange = startCallback;
xmlHttp.send(null);
}
function startCallback()...{
if(xmlHttp.readyState == 4)...{
if(xmlHttp.status == 200 )...{
setTimeout("pollServer()",5000);
refreshTime();
}
}
}
function pollServer()...{
createXMLHttpRequest();
var url = "dynamicUpdate.action?task=foo";
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange = pollCallback;
xmlHttp.send(null);
}
function refreshTime()...{
var time_span = document.getElementById("time");
var time_val = time_span.innerHTML;
var int_val = parseInt(time_val);
var new_int_val = int_val -1;
if(new_int_val > -1)...{
setTimeout("refreshTime()",5000);
time_span.innerHTML = new_int_val;
}else...{
time_span.innerHTML = 5;
}
}
function pollCallback()...{
if(xmlHttp.readyState == 4)...{
if(xmlHttp.status == 200)...{
//alert(xmlHttp.responseText)
// alert(xmlHttp.responseXML.childNodes.length)
// alert(xmlHttp.responseXML.getElementsByTagName("message")[0]);
createXMLParser(xmlHttp.responseText);
var message = dom.getElementsByTagName("message")[0].firstChild.data;
if(message != "done")...{
var new_row = createRow(message);
var table = document.getElementById("dynamicUpdateArea");
var table_body = table.getElementsByTagName("tbody").item(0);
var first_row = table_body.getElementsByTagName("tr").item(1);
table_body.insertBefore(new_row,first_row);
setTimeout("pollServer()",5000);
}
}
}
}
function createRow(message)...{
var row = document.createElement("tr");
var cell = document.createElement("td");
var cell_data = document.createTextNode(message);
cell.appendChild(cell_data);
row.appendChild(cell);
return row;
}
//初始化XML解析器
function createXMLParser(text)...{
if(window.ActiveXObject)...{
dom = new ActiveXObject("Microsoft.XMLDOM");
dom.async = false;
dom.loadXML(text);
}else...{
var parser = new DOMParser();
dom = parser.parseFromString(text,"text/html");
}
}
</script>
</head>
<body>
<h1>Ajax Dynamic Update Example</h1>
This page will automatically update itself:
<input type="button" value="Launch" id="go" onclick="doStart()"/>
<p>
Page will refresh in <span id="time">5</span> seconds
</p>
<table id="dynamicUpdateArea" align="left">
<tbody>
<tr id="row0"><td></td></tr>
</tbody>
</table>
</body>
</html>
DynamicUpdate.java
package control;
import java.io.PrintWriter;
import java.math.*;
import javax.servlet.http.HttpServletResponse;
import com.opensymphony.webwork.ServletActionContext;
import core.BookActionSupport;
public class DynamicUpdate extends BookActionSupport...{
private int counter = 1;
private double random;
public String execute()...{
String res = "";
String task = getParameter("task");
String message = "";
random = Math.floor(Math.random()*100);
while(random > 7)...{
random = Math.sin(random)*10 ;
random = Math.abs(Math.floor(random));
System.out.println(random);
}
counter = (int)random;
if(task.equals("reset"))...{
counter = 1;
}else...{
switch(counter)...{
case 1: message = "Steve walks on stage"; break;
case 2: message = "iPods rock"; break;
case 3: message = "Steve says Macs rule"; break;
case 4: message = "Change is coming"; break;
case 5: message = "Yes,OS X runs on Intel-has for years"; break;
case 6: message = "Macs will soon have Intel chips"; break;
case 7: message = "done"; break;
}
}
res = "<message>" + message + "</message>";
try...{
HttpServletResponse response = ServletActionContext.getResponse();
PrintWriter out = response.getWriter();
response.setContentType("text/html");
response.setHeader("Cache-Control","no-cache");
out.write(res);
out.close();
}catch(Exception e)...{
System.out.println(e.getMessage());
}
return "";
}
}
xwork.xml
在此配文件需要注意你的包名,我的包名是helloWorld;
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xwork PUBLIC "-//OpenSymphony Group//XWork 1.0//EN" "X:WorkSpaceBFPPropertyconfigwebxwork-1.0.dtd">
<xwork>
<include file="webwork-default.xml"/>
<package name="helloWorld" extends="webwork-default">
<interceptors>
<interceptor name="params" class="com.opensymphony.xwork.interceptor.ParametersInterceptor"/>
</interceptors>
<default-interceptor-ref name="defaultStack"/>
<action name="dynamicUpdate" class="control.DynamicUpdate">
<result name="success">/jsp/domainS.jsp</result>
<interceptor-ref name="model-driven"/>
<interceptor-ref name="params"/>
</action>
</package>
</xwork>
OK,如果你是copy 的代码,在配置文件正确的情况下,应该可以运行了. 看看结果吧. 一定要注意配置文件和浏览器版本.在IE5以下的版本是不支持ajax的.
Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1799725
- 12:23
- 浏览 (548)
- 评论 (0)
- 分类: webwork及其他MVC
- 相关推荐
发表评论
cnhzliye
- 浏览: 19794 次
- 性别:
- 来自: 杭州
- 详细资料
搜索本博客
最近加入圈子
链接
最新评论
-
[Jakarta Commons笔记] Co ...
看了Javadoc , 被 MultiValueMap 代替了。
-- by icank -
IE和firefox通用的复制到 ...
转载请注明出处copy text to clipboard with javas ...
-- by 花花公子 -
IE和firefox通用的复制到 ...
感谢！好像firefox处于安全考虑才对这个事件特殊处理？
-- by terryang -
[Jakarta Commons笔记] Co ...
[url][url][url][url][url][img][img] [lis ...
-- by xj_eon -
[Jakarta Commons笔记] Co ...
在使用时，MultiHashMap被建议不使用，为什么？有替代类？
-- by qfs_v
评论排行榜