Ajax做进度条的问题(已解决)
《Ajax基础教程》上有个例子做进度条的，我按照它的代码写，运行的时候就是看不见这个进度条，但是到了时间会显示Complete!。求助...progressBar.jsp:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Progress Bar Test</title>
<script>
var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
var key;
var bar_color = "blue";
var span_id = "block";
var clear = "???";
function go() {
checkDiv();
var url = "ProgressBarServlet?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() {
var url = "ProgressBarServlet?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.visiblity = "visible";
}
}
function clearBar(){
for (var i = 0; i < 10; i++) {
var elem = document.getElementById("block" + i);
elem.innerHTML = clear;
elem.style.backgroundColor = "red";
}
}
</script>
</head>
<body>
<h1>Ajax Progress Bar Example</h1><br/>
Launch long-running process:
<input type="button" value="Launch" id="go" onclick="go();" /><br/>
<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 id="complete" align="center"></td>
</tr>
</tbody>
</table>
</body>
</html>
ProgressBarServlet.java:
package src;
import
import
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class ProgressBarServlet extends javax.servlet.http.HttpServlet implements javax.servlet.Servlet {
private int counter = 1;
public ProgressBarServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
String task = request.getParameter("task");
String res = "";
if (task.equals("create")) {
res = "<key>1</key>";
counter = 1;
} else {
String percent = "";
switch (counter) {
case 1: percent = "10"; 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;
}
counter++;
res = "<percent>" + percent + "</percent>";
}
PrintWriter out = response.getWriter();
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
out.println("<response>");
out.println(res);
out.println("</response>");
out.close();
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
[[italic] 本帖最后由 hwoarangzk 于 2008-1-9 16:21 编辑 [/italic]]
失败...
