<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> <head> <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 = "Handler.ashx?task=create";
var button = document.getElementByIdx_x("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 checkDiv() {
var progress_bar = document.getElementByIdx_x("progressBar");
if (progress_bar.style.visibility == "visible") {
clearBar();
document.getElementByIdx_x("complete").innerHTML = "";
} else {
progress_bar.style.visibility = "visible"
}
}
function clearBar() {
for (var i = 1; i < 10; i++) {
var elem = document.getElementByIdx_x("block" + i);
elem.innerHTML = clear;
elem.style.backgroundColor = "white";
}
}
function pollServer() {
createXMLHttpRequest();
var url = "Handler.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_r("percent")[0].firstChild.data;
var index = processResult(percent_complete);
for (var i = 1; i <= index; i++) {
var elem = document.getElementByIdx_x("block" + i);
elem.innerHTML = clear;
elem.style.backgroundColor = bar_color;
var next_cell = i + 1;
if (next_cell > index && next_cell <= 9) {
document.getElementByIdx_x("block" + next_cell).innerHTML =percent_complete + "%";
}
}
if (index < 9) {
setTimeout("pollServer()", 2000);
} else {
document.getElementByIdx_x("complete").innerHTML = "Complete!";
document.getElementByIdx_x("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;
}
</script>
</head>
<body> <h1>Ajax Progress Bar Example</h1> Launch long-running process:
<input type="button" value="Launch" id="go" onclick="go();"/> <p> <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>
服务端代码
<%@ WebHandler Language="C#" class="Handler" %>
using System;
using System.Web;
public class Handler : IHttpHandler {
private static int counter = 1;
public void ProcessRequest (HttpContext context) {
string task = context.Request.QueryString["task"].ToString();
string res = "";
if (task == "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>";
}
context.Response.ContentType = "text/xml";
context.Response.AddHeader("Cache-Control", "no-cache");
context.Response.Write("<response>"+res+"</response>");
context.Response.End();
}
public bool IsReusable {
get {
return false;
}
}
}
