AJAX Dynamically Update Data
If you go to Yahoo Finance or Google Finance, you may notice that, the
stock quotes on their pags are automatically changing without refreshing
the page. We can use AJAX to update data dynamically without reloading
the page. Let's see how to do it.
Create a page named "display.html". The functions are almost
the same:
<html><head>
<script type="text/javascript">
function requestHttp(url,posTag){//posTag for where to show the message
var httpRequest;
if(window.XMLHttpRequest){// Mozilla, Safari, ...
httpRequest = new XMLHttpRequest();
if(httpRequest.overrideMimeType){
httpRequest.overrideMimeType('text/xml');
}
}else if(window.ActiveXObject){ // IE
try{
httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try{
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){}
}
}
getFile(httpRequest,url,posTag);
}
function getFile(httpRequest,url,posTag){
if(!httpRequest){
alert('Error - Cannot create an XMLHTTP instance');
return false;
}
httpRequest.onreadystatechange = function(){
showContents(httpRequest,posTag);//function display contents
}
httpRequest.open('GET', url, true);
httpRequest.send('');
Insert a line to set timeout every 10 seconds. In other words, every
10 seconds, the page will be automotically send a request to the server,
so the page contents will be updated every 10 seconds:
setTimeout("requestHttp('banners.php','message')", 10000);//updated
every 10 seconds
The rest of codes are the same:
}
function showContents(httpRequest,posTag){
if(httpRequest.readyState == 4){
if(httpRequest.status == 200){
//alert(httpRequest.responseText);
document.all(posTag).innerHTML=httpRequest.responseText;
}else{
alert('Error');
}
}
}
</script>
</head>
We must insert a handler "onload" into the body tag:
<body onload="requestHttp('banners.php','message')">
<span id="message"></span>
</body></html>
The next page is "banners.php". The basic idea is that we put
serveal banners into an array, and use a timer to count time and select
a banner from the array. For example, when time is A, pick up banner X,
and when time is B, pick up banner Y.
Here is the source code of banners.php:
At beginning, use header "no-cashe".
<?php
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Pragma: no-cache");
Create a timer, and use seconds date('s'):
$timstr=date('s');//Ymdhis
$pos=substr($timstr,0,1);
Create a banner array:
$bannerArr=array(
"GPS Watches" =>"http://www.selectagps.com/GPS-Watches-n_35.html",
"Portable Vehicle GPS" =>"http://www.selectagps.com/Portable-Vehicle-GPS-n_21.html",
"Pocket GPS" =>"http://www.selectagps.com/Pocket-GPS-n_8.html",
"Notebooks/Laptops" =>"http://www.ishopsale.com/Notebooks-n_286.html",
"Audio & Video Players" =>"http://www.ishopsale.com/Audio-and-Video-n_50.html",
"Digital Cameras For Sale" =>"http://www.ishopsale.com/Digital-Cameras-n_263.html"
);
Use a loop to search array and select a banner based on the time:
$count=0;
foreach($bannerArr as $k=>$v){
if($count==$pos){
echo '<table width="480" height="60" border="1"><tr><td
align="center"><h1>';
echo '<a href="http://'.$v.'">'.$k.'</a>';
echo '</h1></td></tr></table>';
}
$count++;
}
?>
When you run the first page, you will see, the banners are automatically
changed every 10 seconds without reloading the page.
|
Earn your 
Go to