Skip to content
May 14, 2008 / ranacse05

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”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<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.

Advertisements

2 Comments

Leave a Comment
  1. yousufcse05 / May 17 2008 3:10 pm

    thanks rana.i also want to know about this.i will try it later.gud luck.

  2. WillieNY / Jan 24 2010 9:21 pm

    You have great blog and this post is good!

    best regards, Greg

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: