Ajax basic tutorial (2) _ display progress bar

<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN">

<Html> <Script type = "text/javascript">
Var xmlHttp;
Var key;
Var bar_color = 'Gray ';
Var span_id = "block ";
Var clear = "& nbsp ;";

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> <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"> & nbsp; </span> <span id = "block2"> & nbsp; </span>
<Span id = "block3"> & nbsp; </span> <span id = "block4"> & nbsp; </span>
<Span id = "block5"> & nbsp; </span> <span id = "block6"> & nbsp; </span>
<Span id = "block7"> & nbsp; </span> <span id = "block8"> & nbsp; </span>
<Span id = "block9"> & nbsp; </span> </div> </td> </tr>
<Tr> <td align = "center" id = "complete"> </td> </tr> </tbody> </table> </body>

</Html>

 

Server code

<% @ 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;
}
}

}