文件一览
- 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 = " " 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; @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(); } }
?运行效果如下图