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


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


// this is going to be refreshed -->

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


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…

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...

View Comments

  • 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.