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
<!-- <mce:script mce_src="ajax.js">< ! <strong>This is the current date and time (updates every 5 seconds): <script type="text/javascript">< ! refreshdiv(); // --> // this is going to be refreshed --></script>
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…
Source: http://www.aleixcortadellas.com
Siam
February 2, 2010
Great tutorial…thnx a lot……….