Refreshing DIV content with AJAX

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…


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.