Basic Ajax tutorial (3) _ creating an automatic refresh page

Source: Internet
Author: User

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

<Html> <Script type = "text/javascript">
Var xmlHttp;
Function createXMLHttpRequest (){
If (window. ActiveXObject ){
XmlHttp = new ActiveXObject ("Microsoft. XMLHTTP ");
} Else if (window. XMLHttpRequest ){
XmlHttp = new XMLHttpRequest ();
}
}
Function doStart (){
CreateXMLHttpRequest ();
Var url = "Handler. ashx? Task = reset ";
XmlHttp. open ("GET", url, true );
XmlHttp. onreadystatechange = startCallback;
XmlHttp. send (null );
}

Function startCallback (){
If (xmlHttp. readyState = 4 ){
If (xmlHttp. status = 200 ){
SetTimeout ("pollServer ()", 5000 );
RefreshTime ();
}
}
}
Function pollServer (){
CreateXMLHttpRequest ();
Var url = "Handler. ashx? Task = foo ";
XmlHttp. open ("GET", url, true );
XmlHttp. onreadystatechange = pollCallback;
XmlHttp. send (null );
}
 
Function refreshTime (){
Var time_span = document. getElementByIdx_x ("time ");
Var time_val = time_span.innerHTML;
Var int_val = parseInt (time_val );
Var new_int_val = int_val-1;
If (new_int_val>-1 ){
SetTimeout ("refreshTime ()", 1000 );
Time_span.innerHTML = new_int_val;
} Else {
Time_span.innerHTML = 5;
}
}

Function pollCallback (){
If (xmlHttp. readyState = 4 ){
If (xmlHttp. status = 200 ){
Var message = xmlHttp. responseXML. getElementsByTagName_r ("message") [0]. firstChild. data;
If (message! = "Done "){
Var new_row = createRow (message );
Var table = document. getElementByIdx_x ("dynamicUpdateArea ");
Var table_body = table. getElementsByTagName_r ("tbody"). item (0 );
Var first_row = table_body.getElementsByTagName_r ("tr"). item (1 );
Table_body.insertBefore (new_row, first_row );
SetTimeout ("pollServer ()", 5000 );
RefreshTime ();
}
}
}
}
 
Function createRow (message ){
Var row = document. create_rElement ("tr ");
Var cell = document. create_rElement ("td ");
Var cell_data = document. create_rTextNode (message );
Cell. appendChild_xss (cell_data );
Row. appendChild_xss (cell );
Return row;
}
 
</Script>

</Head>

<Body> <Input type = "button" value = "Launch" id = "go" onclick = "doStart ();"/>
<P> Page will refresh in <span id = "time"> 5 </span> seconds. </p>
<Table id = "dynamicUpdateArea" align = "left"> <tbody> <tr id = "row0"> <td> </tr> </tbody> </table> </body>

</Html>

 

 

Server Page

 

<% @ 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 res = "";
String task = context. Request. QueryString ["task"]. ToString ();
String message = "";
If (task = "reset ")
{

Counter = 1;
}
Else
{
Switch (counter ){
Case 1: message = "Steve walks on stage1"; break;
Case 2: message = "iPods rock2"; break;
Case 3: message = "Steve says Macs rule3"; break;
Case 4: message = "Change is coming4"; break;
Case 5: message = "Yes, OS X runs on Intel-has for years5"; break;
Case 6: message = "Macs will soon have Intel chips6"; break;
Case 7: message = "done"; break;
}
Counter ++;
}
Res = "<message>" + message + "</message> ";
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;
}
}

}

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.