Wednesday, January 9, 2013

Automatic Load a page Using Ajax

Here we can learn about how to Automatically load page after 5 second using ajax and jquery.First we get little information about Ajax.
AJAX = Asynchronous JavaScript and XML.
AJAX is not a new programming language, but a new way to use existing standards.
AJAX is the art of exchanging data with a server, and updating parts of a web page - without reloading the whole page.


Example script :
Create two files :
1) main file
2) load file
create main.php this is main file.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js">
</script>
<script>
 setInterval(
function()
{
$('#content').fadeOut('slow').load('load.php').fadeIn("slow");}, 3000);
</script>
<title>Auto Load Page Div using Jquery - similar to twitter Live Search</title>
</head>
<body>
<div id="content" style="background-color:#ffffcc;font-size:24px;font-weight:bold;width:600px;margin:auto 10px;">
Please wait.</div>
<a href="#" target="_blank">Home</a>
</body>
<html>
The second file is load.php this file load every 5 second.
echo 'This content is loaded  via ajax every 5 seconds ..';

No comments:

Post a Comment

Thanks....