webwork + ajax 整合实例

来源：互联网发布：ug4.0螺纹铣刀编程编辑：程序博客网时间：2024/06/05 22:43

首先, 配置好webwork环境.

在webwork中应用ajax技术,只要在webwork的返回值上加以区别就可以把动态取得的值,返回给前台浏览器.

在这个实例中,我们有一个html页面,一个java文件,然后再配置文件中写上相关映射就OK了.

代码如下:

dynamicUpdate.html

<html>

<head>

<title>update of ajax</title>

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:

<p>

Page will refresh in <span id="time">5</span> seconds

</p>

<tbody>

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

</interceptors>

<default-interceptor-ref name="defaultStack"/>

<result name="success">/jsp/domainS.jsp</result>

<interceptor-ref name="model-driven"/>

<interceptor-ref name="params"/>

</action>

</package>

</xwork>

OK,如果你是copy 的代码,在配置文件正确的情况下,应该可以运行了. 看看结果吧. 一定要注意配置文件和浏览器版本.在IE5以下的版本是不支持ajax的.