Ajax显示进度条
文件一览
progressBar.htmlProgressBarServlet.javaprogressBar.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 = " "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"> </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>?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;@Overrideprotected 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();}}?运行效果如下图