Stock quotes, weather data, headlines ... These are frequently changed data but are not worth the manual full refresh of the page for these data modifications. Although sites like CNN.com do periodically reload, it can be frustrating to redraw an entire page just to change one or two headlines and several graphs. Of course, if you refresh the entire page, it may be hard to find out what new content is!
If you use Ajax, users do not have to repeatedly click the Refresh button. The technology news site Digg (Http://digg.com/spy) uses this technology. Digg keeps updating its pages with automatic refresh, and uses a very helpful fading technology to visually let users know which news is new (see Figure 4-7).
Figure 4-7 Digg.com, an example of automatically refreshing a page
If you look at Apple's news, you may have seen Steve Jobs's keynote address at Apple's 2005 World Developers Conference, revealing that Apple will start turning to Intel processors. MacRumors.com (http://www. MacRumors com/) 's team used AJAX technology to release this information fairly timely and to ease the pressure on its servers. Recently, Apple's itunes website (http://www.apple.com/itunes/) is using AJAX to dynamically update its downloads (the target is 500 million) (see Figure 4-8).
Automatically refreshing the page is actually fairly straightforward. For the example shown in Listing 4-7, use a button to start polling, but in practice it may be in the OnLoad event. The Dostart () method is responsible for booting, but the most interesting place is the settimeout () method in the Pollcallback () method, which allows a given method to be executed at a fixed interval of time (in milliseconds). The CreateRow () method is only an auxiliary function that leverages the DOM method to dynamically create content, and Refreshtime () is used to refresh the timer value.
Code Listings 4-7 dynamicupdate.html
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
<title>ajax Dynamic update</title>
<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 = "Dynamicupdateservlet?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 = "Dynamicupdateservlet?task=foo";
Xmlhttp.open ("Get", url, True);
Xmlhttp.onreadystatechange = Pollcallback;
Xmlhttp.send (NULL);
}
function Refreshtime () {
var Time_span = document.getElementById ("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 ("message") [0].firstchild.data;
if (Message!= "Done") {
var new_row = createrow (message);
var table = document.getElementById ("Dynamicupdatearea");
var table_body =
Table.getelementsbytagname ("Tbody"). Item (0);
var first_row =
Table_body.getelementsbytagname ("tr"). Item (1);
Table_body.insertbefore (New_row, First_row);
SetTimeout ("Pollserver ()", 5000);
Refreshtime ();
}
}
}
}
function CreateRow (message) {
var row = document.createelement ("tr");
var cell = document.createelement ("TD");
var cell_data = document.createtextnode (message);
Cell.appendchild (Cell_data);
Row.appendchild (cell);
return row;
}
</script>
<body>
This page would automatically update itself:
<input type= "button" value= "Launch" id= "Go" onclick= "Dostart" (); " />
<p>
Page'll refresh in <span id= ' time ' >5</span> seconds.
<p>
<table id= "Dynamicupdatearea" align= "left" >
<tbody>
<tr id= "Row0" ><td></td></tr>
</tbody>
</table>
</body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
