ajax 动态数据,如何用Ajax展示后台动态数据

Ajax已经在很多项目中被使用，我不擅长也不喜欢写前台，但因为对Ajax的好奇，我终于还是学起了JavaScript以及很久以前摆弄过的HTML，对于前者高手，我是佩服得无体投地，但绝不会从事；对于后者高手，我一直把他们视为异类，呵。

所幸，JavaScript不难，如果不涉及动态内容的话，还是容易上手的，但如果一点动态内容都不学习的话，我搞Ajax干嘛？神经！HTML嘛，我随便写写，像“巴巴”一样难看，但毕竟是金黄色的，嘿嘿。

我一直关注后台，看过一些项目用到Ajax，感觉Ajax可以在前台的事件驱动下调用后台Servlet，再由Servlet调用商业逻辑，返回纯文本或者XML信息，然后利用innerHTML动态改变局部页面，这是个了不起的事件，但这只限于一次的Request和Response。但这些自从有了Ajax后就都不是问题了。

既然以上不是问题，问题就来了。有一个这样的需求，当我们在处理一个很长时间的逻辑的时候，能不能在前台及时显示处理的过程，这样就会有很好的用户体验，这就是今天的问题——用Ajax展示后台动态数据。以下是需要注意的地方：

1，考虑到后台逻辑的独立性，我们尽量不要去改写后台逻辑的代码，但又要求，后台不仅要同时跑逻辑，又要及时向前台提供数据，于是，我们只能想到利用多线程。

2，设计一个信息包装Bean，便于前后台传递状态。

于是，就有了以下的代码。

前台页面progressBar.html，你可以写成你要的JSP，不难的。

/p>

Transitional//EN">

Ajax

Session Test

var xmlHttp;

function

createXMLHttpRequest() {

if (window.ActiveXObject) {

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

}

else if (window.XMLHttpRequest) {

xmlHttp = new

XMLHttpRequest(); }

}

function go()

{

createXMLHttpRequest();

clear();

var url =

"AjaxSessionServlet?methord=start&rand"+Math.random();

var button = document.getElementByIdx("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()", 500);

}

}

}

function pollServer()

{

createXMLHttpRequest();

var url =

"AjaxSessionServlet?methord=poll&rand="+Math.random();

xmlHttp.open("GET", url, true);

xmlHttp.onreadystatechange = pollCallback;

xmlHttp.send(null);

}

function pollCallback()

{

if (xmlHttp.readyState == 4) {

if (xmlHttp.status == 200) {

var percent =

xmlHttp.responseXML.getElementsByTagName_r("percent")[0].firstChild.data;

var msg =

xmlHttp.responseXML.getElementsByTagName_r("msg")[0].firstChild.data;

document.getElementByIdx("complete").innerHTML = percent+"%";