Ajax:进度条
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript"> var xmlHttp; var key; var bar_color = 'gray'; var span_id = "Span"; var clear = " "; function createXMLHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTp"); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } function go() { createXMLHttpRequest(); checkDiv(); var button = document.getElementById("go"); button.disabled = true; var queryString = "WS.asmx/ProgressBar?task=create"; xmlHttp.onreadystatechange = handleStateChange; xmlHttp.open("GET", queryString, true); xmlHttp.send(null); } function handleStateChange() { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { setTimeout("pollServer()", 2000); } } } function pollServer() { createXMLHttpRequest(); var queryString = "WS.asmx/ProgressBar?task=poll"; xmlHttp.onreadystatechange = pollCallback; xmlHttp.open("GET", queryString, true); 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 = progressResult(percent_complete); for (var i = 1; i <= index; i++) { var elem = document.getElementById("Span" + i); elem.innerHTML = clear; elem.style.backgroundColor = bar_color; var next_cell = i + 1; if (next_cell > index && next_cell <= 9) { document.getElementById("Span" + next_cell).innerHTML = percent_complete + "%"; } } if (index < 9) { setTimeout("pollServer()", 2000); } else { document.getElementById("complete").innerHTML = "Complete!"; document.getElementById("go").disabled = false; } } } } function progressResult(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("Span" + i); elem.innerHTML = clear; elem.style.backgroundColor = "white"; } } </script> </head> <body> <h1> Ajax进度条</h1> <input type="button" value="Go" id="go" onclick="go();" /> <table align="center"> <tbody> <tr> <td> <div id="progressBar" style="padding: 2px; border: solid back 2px; visibility: hidden"> <span id="Span1"> </span> <span id="Span2"> </span> <span id="Span3"> </span> <span id="Span4"> </span> <span id="Span5"> </span> <span id="Span6"> </span> <span id="Span7"> </span> <span id="Span8"> </span><span id="Span9"> </span> </div> </td> </tr> <tr> <td align="center" id="complete"> </td> </tr> </tbody> </table> </body> </html>
后台代码:
private static int counter = 1;//书中没有static,但是显示结果一直我10%,加上static就可以了 [WebMethod] public void ProgressBar() { var task = Context.Request.QueryString["task"]; string res = ""; if (task.Equals("create")) { res = "<key>1</key>"; counter = 1; } else { string precent = ""; switch (counter) { case 1: precent = "10"; break; case 2: precent = "23"; break; case 3: precent = "35"; break; case 4: precent = "51"; break; case 5: precent = "64"; break; case 6: precent = "73"; break; case 7: precent = "89"; break; case 8: precent = "100"; break; default: break; } counter++; res = "<percent>" + precent + "</percent>"; } Context.Response.ContentType = "text/xml"; Context.Response.Write("<response>"); Context.Response.Write(res); Context.Response.Write("</response>"); }
运行结果如下: