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…


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.