Refreshing DIV content with AJAX

| October 31, 2009 | Ajax, How to..., Know more | 1 Comment

Normally, when we need to update the certain part of the page we do refresh the whole page. But it seems to be inefficient when we need to update a small portion of the page and we are refreshing the whole.Using the div tag in the page or tableless page have made easy for programmer to refresh a portion or division by using DIV with AJAX.

Here i have taken an example to show how to use AJAX in DIV.

In the example, there are three files (in the same folder):
ajax.js
index.html
boo.php

ajax.js should contain

<!--
// Customise those settings
 
var seconds = 5;
var divid = "timediv"; // div that need to refresh
var url = "boo.php"; // php file that contains code
 
////////////////////////////////
//
// Refreshing the DIV
//
////////////////////////////////
 
function refreshdiv(){
 
// The XMLHttpRequest object
 
var xmlHttp;
try{
xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
}
catch (e){
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
alert("Your browser does not support AJAX.");
return false;
}
}
}
 
// Timestamp for preventing IE caching the GET request
 
fetch_unix_timestamp = function()
{
return parseInt(new Date().getTime().toString().substring(0, 10))
}
 
var timestamp = fetch_unix_timestamp();
var nocacheurl = url+"?t="+timestamp;
 
// The code...
 
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
document.getElementById(divid).innerHTML=xmlHttp.responseText;
setTimeout('refreshdiv()',seconds*1000);
}
}
xmlHttp.open("GET",nocacheurl,true);
xmlHttp.send(null);
}
 
// Start the refreshing process
 
var seconds;
window.onload = function startrefresh(){
setTimeout('refreshdiv()',seconds*1000);
}
-->

and second file “index.html” contains the div to be refreshed

<!--
<script src="ajax.js">
 
<strong>This is the current date and time (updates every 5 seconds):</strong>
 
<script type="text/javascript"><!--
refreshdiv();
// --></script>
<div id="timediv"></div>   // this is going to be refreshed
-->

third file “boo.php” that contains the php code to read time from the system.

<!--
<?
// Format time output
 
$str = "It is %a on %b %d, %Y, %X - Time zone: %Z";
 
// Echo results
 
echo(gmstrftime($str,time()));
 
?>
-->

Although the content of this file could have been any, I decided it to be a PHP function (gmstrftime) which requests the current time and formats it. Every time the DIV is refreshed, the function returns the current time formatted; therefore you can clearly see that the example works, as the time will keep refreshing every 5 seconds.

The result, once you completed the example, should look like this:
This is the current date and time (updates every 5 seconds):
It is Thru on Oct 22,2009,16:03:50 – Time zone :GMT

You can change the code of boo.php to whatever you wish to try new things…

Related Posts

About The Author

Ashesh

सयौ थुङ्गा फूलका हामी एउटै माला नेपाली, Welcome to my webpage. I'm from the Himalayan Country of Nepal. Well talking about me, I like mostly Web programming and Designing and furthermore I like Philosophical literature, Photography, Social networking. And I am Romantic and Sentimental person to some extent. Read more...

One Comment
  1. jon

    I got this working, this is my first time using AJAX, however i went to essentially duplicate it, added a “2” on the end of some of the variables, and i want it to refresh 2 divs, but they co-mingle into the second div for some reason, the second one overtakes the first one after 5 seconds and stays up, but then the first div just doesnt show anymore.

Leave a Reply