Showing posts with label auto refresh using ajax. Show all posts
Showing posts with label auto refresh using ajax. Show all posts

Wednesday, 11 July 2012

Tagged under: , , ,

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