" Live as if you were to die tomorrow. Learn as if you were to live forever.. "
- Mahatma Gandhi
" Live as if you were to die tomorrow. Learn as if you were to live forever.. "
- Mahatma Gandhi
|
AJAX technology has gained considerable popularity in the world of web and especially Web 2.0. so much that it would be difiicult to find a web developer who hasn’t been exposed to the benefits of this technology.
Sometimes in our project work we need to keep refreshing a page in a certain time interval. For instane, take a live online cricket score card which updates automatically. In such cases, we prefer to call a Ajax function to refresh the desired <div> or section.
Suppose we have a function, updateScoreCard(); which refresh a portion of page in a given time interval.
In this we use setInterval(“updateScoreCard()”, 30000); Here function will call automatically after every 30 seconds.
But the problem here is that, every Ajax call opens a new connection. If you check net tab of the Firebug of FireFox, then you can find how the connection is opening.
This process is working like:
Browser Request —– Data Read from file / DB —- Data Sent To Browser—- Close Connection
Then how to keep refreshing your page without opening multiple connections ?
A new technology, called Comet or Server Push or Reverse Ajax can be implemented, which will keep refreshing the page when some new data comes to DB or file content changes . In this process the page opens a connection and that connection will never be closed. If other pages update the DB then all related page content will be updated automatically because server will send the updates. No need to call any Ajax to refresh page content
Browser Request —-DB is Checked for Updates —– Data Sent To Browser ——–
/|\ |
|_____________________________________|
|
|
I have written some code using jQuery and PHP in my own style where I have used an IFrame which contains a page that is forever loading.
This process has one drawback, which is, if you open more then one page in the same browser then it will not work for all pages. It will only work for the page opened first because browser thinks that first page is still loading. If you open multiple pages in multiple browsers then also it will work.
In this example I am showing a clock where clock time is updated with server time, which means every second server time changes,the server script updates the front end page too.
I have two pages view.php and response.php.
view.php will be visible to user ie it will show the clock and response.php is the ajax page which will send the latest time.
view.php
|
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Comet demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" / >
<script type="text/javascript" src="
http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
</head>
<body>
<div id="comet_frame" style="display:none;visablity:invisable;"></div>
<div id="content"></div> <br />
</body>
</html>
<script type="text/javascript">
var comet =
{
load: function()
{
$("#comet_frame").html('<iframe id="comet_iframe" src="response.php"></iframe>');
},
unload: function()
{
$("#comet_frame").html('<iframe id="comet_iframe" src=""></ iframe>');
},
clearFrame: function()
{
$("#comet_iframe").html("");
},
timer: function(result)
{
$("#content").html(result);
}
}
$(document).ready(function()
{
comet.load();
});
</script>
response.php
<?php
function flushHard()
{
// echo an extra 256 byte to the browswer - Fix for IE.
for($i=1;$i<=256;++$i)
{
echo ' ';
}
flush();
ob_flush();
}
set_time_limit(0);
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
flushHard();
$x = 0;
while(1)
{
if($x == 10)
{
echo '<script type="text/javascript">parent.comet.clearFrame();</script>'."\n";
}
else
{
echo '<script type="text/javascript">parent.comet.timer("'.date('H:i:s').'");</script>'."\n";
}
flushHard();
++$x;
sleep(1);
}