Auto Refresh a Web Page using AJAX

AJAX is nothing but Asynchronous JavaScript and XML. It is not a new programming language, but a new way to use the existing standards. It is the art of exchanging data with a server, and updating parts of a web page without reloading the whole page!!

Ajax is not a single technology, but a group of technologies. HTML and CSS can be used in combination to mark up and style information. JavaScript and XMLHttpRequest object provide a method for exchanging data asynchronously between browser and server to avoid full page reloads.

 Using JavaScript for periodically refreshing a page can be quite annoying, as the entire page reloads time to time. Hence, a better option would be to use AJAX.
Include the following code in the <head> section of the page....

<script src="http://ajax.googleapis.com/ajax/ libs/jquery/1.3.0/jquery.min.js"></script> <script> var auto_refresh = setInterval( function() { $.ajaxSetup({ cache: false }); $('#loaddiv').fadeOut('slow').load(window.location.href).fadeIn("slow"); }, 20000); </script>

The section now refreshes after every 20 seconds. You can change the 20000 value to suite your requirements.
You can remove the ".fadeOut('slow')" and ".fadeIn(Slow)" parts if you want the page to be refreshed unnoticed.

Now, whichever section you want to be refreshed, must be included within the <div id="loaddiv"> tags as follows:

<div id="loaddiv"> <!--Your Content goes here--> </div>

You are now done!! Enjoy as your page refreshes without you noticing!!

Read More

Ajinkya Mandhare 21:49  2 comments