在 webwork 中应用 ajax 技术 , 只要在 webwork 的返回值上加以区别就可以把 动态取得的值 , 返回给前台浏览器 .
在这个实例中 , 我们有一个 html 页面 , 一个 java 文件 , 然后再配置文件中写上相关映射就 OK 了 .
代码如下 :
progressBar.html
<!
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
>
<
html
>
<
head
>
<
title
>
Ajax Progress Bar
</
title
>
<
script
type
="text/javascript"
>
...
var xmlHttp; var key = 1 ; var bar_color = " green " ; var span_id = " block " ; var clear = " " ; function createXMLHttpRequest() ... { if (window.ActiveXObject) ... { xmlHttp = new ActiveXObject( " Microsoft.XMLHTTP " ); } else if (window.XMLHttpRequest) ... { xmlHttp = new XMLHttpRequest(); } } function go() ... { key = 1 ; createXMLHttpRequest(); checkDiv(); var url = " ProgressBar.action?task=create " ; var button = document.getElementById( " go " ); button.disabled = true ; xmlHttp.open( " GET " ,url, true ); xmlHttp.onreadystatechange = goCallback; xmlHttp.send( null ); } function goCallback() ... { if (xmlHttp.readyState == 4 ) ... { if (xmlHttp.status == 200 ) ... { setTimeout( " pollServer() " , 1000 ); } } } function pollServer() ... { createXMLHttpRequest(); key = key + 1 ; var url = " ProgressBar.action?task=poll&key= " + key; xmlHttp.open( " GET " ,url, true ); xmlHttp.onreadystatechange = pollCallback; xmlHttp.send( null ); } function pollCallback() ... { if (xmlHttp.readyState == 4 ) ... { if (xmlHttp.status == 200 ) ... { var percent_complete = xmlHttp.responseXML.getElementsByTagName( " percent " )[ 0 ].firstChild.data; var index = processResult(percent_complete); for ( var i = 1 ; i < index; i ++ ) ... { var elem = document.getElementById( " block " + i); elem.innerHTML = clear; elem.style.backgroundColor = bar_color; var next_cell = i + 1 ; if (next_cell > index && next_cell <= 9 ) ... { document.getElementById( " block " + next_cell).innerHTML = percent_complete + " % " ; } } if (index < 9 ) ... { setTimeout( " pollServer() " , 1000 ); } else ... { document.getElementById( " complete " ).innerHTML = " Complete " ; document.getElementById( " go " ).disabled = false ; } } } } function processResult(percent_complete) ... { var ind; if (percent_complete.length == 1 ) ... { ind = 1 ; } else if (percent_complete.length == 2 ) ... { ind = percent_complete.substring( 0 , 1 ); } else ... { ind = 9 ; } return ind; } function checkDiv() ... { var progress_bar = document.getElementById( " progressBar " ); if (progress_bar.style.visibility == " visible " ) ... { clearBar(); document.getElementById( " complete " ).innerHTML = "" ; } else ... { progress_bar.style.visibility = " visible " ; } } function clearBar() ... { for ( var i = 1 ; i < 10 ; i ++ ) ... { var elem = document.getElementById( " block " + i); elem.innerHTML = clear; elem.style.backgroundColor = " white " ; } }
</
script
>
</
head
>
<
body
>
<
h1
>
Ajax Progress Bar Example
</
h1
>
Launch long-running progress:
<
input
type
="button"
value
="Launch"
id
="go"
onclick
="go();"
>
<
p
>
<
table
align
="center"
>
<
tbody
>
<
tr
><
td
>
<
div
id
="progressBar"
style
="padding:2px;border:solid black 2px;visibility:hidden"
>
<
span
id
="block1"
>
</
span
>
<
span
id
="block2"
>
</
span
>
<
span
id
="block3"
>
</
span
>
<
span
id
="block4"
>
</
span
>
<
span
id
="block5"
>
</
span
>
<
span
id
="block6"
>
</
span
>
<
span
id
="block7"
>
</
span
>
<
span
id
="block8"
>
</
span
>
<
span
id
="block9"
>
</
span
>
</
div
>
</
td
></
tr
>
<
tr
><
td
align
="center"
id
="complete"
></
td
></
tr
>
</
tbody
>
</
table
>
</
body
>
</
html
>
ProgressBar.java
package
control;
import
java.io.PrintWriter;
import
javax.servlet.http.HttpServletResponse;
import
com.opensymphony.webwork.ServletActionContext;
import
core.BookActionSupport;
public
class
ProgressBar
extends
BookActionSupport
...
{ private int counter = 1 ; public String execute() ... { String task = getParameter( " task " ); String key = getParameter( " key " ); key = key == null ? " 0 " :key; counter = Integer.valueOf(key).intValue(); String res = "" ; if (task.equals( " create " )) ... { res = " <key>1</key> " ; counter = 1 ; } else ... { String percent = "" ; switch (counter) ... { case 1 : percent = " 20 " ; break ; case 2 : percent = " 23 " ; break ; case 3 : percent = " 35 " ; break ; case 4 : percent = " 51 " ; break ; case 5 : percent = " 64 " ; break ; case 6 : percent = " 73 " ; break ; case 7 : percent = " 89 " ; break ; case 8 : percent = " 100 " ; break ; } res = " <percent> " + percent + " </percent> " ; res = " <rsponse> " + res + " </rsponse> " ; } try ... { HttpServletResponse response = ServletActionContext.getResponse(); PrintWriter out = response.getWriter(); response.setContentType( " text/xml " ); response.setHeader( " Cache-Control " , " no-cache " ); out.write(res); out.close(); } catch (Exception e) ... { System.out.println(e.getMessage()); } return "" ; } }
xwork.xml
在此配文件需要注意你的包名,我的包名是helloWorld; 并且我的ProgressBar.java放在control目录下。注意区别!
<?
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
="ProgressBar"
class
="control.ProgressBar"
>
<
result
name
="success"
>
/jsp/domainS.jsp
</
result
>
<
interceptor-ref
name
="model-driven"
/>
<
interceptor-ref
name
="params"
/>
</
action
>
</
package
>
</
xwork
>
OK,如果你是copy 的代码,在配置文件正确的情况下,应该可以运行了. 看看结果吧. 一定要注意配置文件和浏览器版本.在IE5以下的版本是不支持ajax的.