Automatically Update
Today one of my friend ask me how can he load the data automatically after a few secs . Let me make it clear.He want to do something which will help the user.The user dont have to refresh his/her page.It’ll refresh and update it self.
For this you need AJAX.Here is a little example of this.I used 3 files here.
#1 index.php
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Ajax Auto Update Example</title>
<script src=”AJAX.JS”></script>
<style type=”text/css”>
<!–
.style1 {font-family: Verdana, Arial, Helvetica, sans-serif}
–>
</style>
</head><body onload=”show()”>
<table width=”561″ height=”174″ border=”0″ align=”center” cellpadding=”3″ cellspacing=”2″>
<tr>
<td height=”34″><div align=”center”><span class=”style1″>The Space Below will be update auto. </span></div></td>
</tr>
<tr>
<td><div id=”auto”></div></td>
</tr>
</table>
</body>
</html>
#2 ajax.js
var xmlHttp
function show()
{//Show Loading Massage
document.getElementById(“auto”).innerHTML=”<h3 style=\”color:#FF0000\”>Loading……</h3>”;xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert (“Your browser does not support AJAX!”);
return;
}
var url=”show.php”;
xmlHttp.onreadystatechange=stateChanged;//Get the value from show.php page.I use GET method here.You can use what u want GET/POST
xmlHttp.open(“GET”,url,true);
xmlHttp.send(null);//This page will refresh it self after 2 sec.If u chage the value ’2000′ the time will be changed .
setTimeout(‘show()’,2000);}
function stateChanged()
{
if (xmlHttp.readyState==4)
{
//Below line show the server responce on the index.php page.
document.getElementById(“auto”).innerHTML=xmlHttp.responseText;
}
}function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);
}
catch (e)
{
xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
}
return xmlHttp;
}
#3 show.php
<?php
//If u use data from the database use necessery code here.I just show the current BD time in the page.
$am=’AM’;
$time = localtime();
$hour = $time[2]+6;
if($hour>=12)
$am=’PM’;
$hour%=12;
echo “<h3 style=\”color:#009900\”>Now Time is–$hour:$time[1]:$time[0]-$am</h3>”;
?>
Note : You can make ur site like www.gopsop.com and www.crickinfo.com.
thanks rana.i also want to know about this.i will try it later.gud luck.
You have great blog and this post is good!
—
best regards, Greg