Ajax实现网页进度条
HTML页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><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 = '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 = "progressBar.ashx?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 = "progressBar.ashx?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', 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.backgroundColor = 'white'; } }</script></head><body><h1>Ajax Progress Bar Example</h1>Launch long-running progress:<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></tbody></table></body></html>
using System;using System.Collections.Generic;using System.Linq;using System.Web;namespace Ajax{ /// <summary> /// progressBar 的摘要说明 /// </summary> public class progressBar : IHttpHandler { public static int counter = 1; public void ProcessRequest(HttpContext context) { string task = context.Request.Params.Get("task"); string res = string.Empty; if (task.Equals("create")) { res = "<key>1</key>"; counter = 1; } else { string percent = string.Empty; 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>"; } context.Response.ContentType = "text/xml"; context.Response.AddHeader("Cache-Control","no-cache"); context.Response.Write("<response>"); context.Response.Write(res); context.Response.Write("</response>"); context.Response.End(); } public bool IsReusable { get { return false; } } }}