Ajax展示进度条 _Ajax

Ajax显示进度条

文件一览

progressBar.html
ProgressBarServlet.java

progressBar.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax Progress Bar</title>
<script type="text/javascript">
var xmlHttp;
var key;
var bar_color = 'gray';
var span_id = 'block';
var clear = "&nbsp;&nbsp;&nbsp;"

function createXMLHttpRequest() {
	if (window.ActiveXObject) {
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	} else if (window.XMLHttpRequest) {
		xmlHttp = new XMLHttpRequest();
	}
}

function go() {
	createXMLHttpRequest();
	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()",2000);
		}
	}
}

function pollServer() {
	createXMLHttpRequest();
	var url = "ProgressBarServlet?task=poll&key="+key;
	var button = document.getElementById("go");
	button.disabled = true;
	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()",2000);
			} 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.background = "white";
	}
}
</script>
</head>
<body>
<h1>Ajax Progress Bar Example</h1>
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">&nbsp;&nbsp;&nbsp;</span>
					<span id="block2">&nbsp;&nbsp;&nbsp;</span>
					<span id="block3">&nbsp;&nbsp;&nbsp;</span>
					<span id="block4">&nbsp;&nbsp;&nbsp;</span>
					<span id="block5">&nbsp;&nbsp;&nbsp;</span>
					<span id="block6">&nbsp;&nbsp;&nbsp;</span>
					<span id="block7">&nbsp;&nbsp;&nbsp;</span>
					<span id="block8">&nbsp;&nbsp;&nbsp;</span>
					<span id="block9">&nbsp;&nbsp;&nbsp;</span>
				</div>
			</td>
		</tr>
		<tr><td align="center" id="complete"></td></tr>
	</tbody>
</table>
</body>
</html>

?ProgressBarServlet.java

package ajaxbook.chap4;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ProgressBarServlet extends HttpServlet {

	private int counter = 1;
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		String task = req.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 = resp.getWriter();
		resp.setContentType("text/xml");
		resp.setHeader("Cache-Control", "no-cache");
		out.println("<response>");
		out.println(res);
		out.println("</response>");
		out.close();
	}

}

?运行效果如下图