首先, 配置好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></