The Slow Load Technique/Reverse AJAX - Simulating Server Push in a Standard Web Browser

By Bryce Nesbitt, OIC

This article describes a method of sending status updates to a web browser with no polling delay.  The technique sidesteps a fundamental issue with the web, namely that web servers can't initiate conversations to web browsers.  All HTTP transactions start with a request from the browser, and end with a response from the server.

November 2005 Update Does this sound a lot like AJAX? Actually it predates AJAX, and it works more like reverse-AJAX. It lets the server decide when to refresh the client, without requiring the client to poll.  The technique is fully AJAX compatible.

When the server has status to send to a web browser, it must generally wait for the browser to initiate the conversation.  For automatic updates, the standard technique to is to have the client poll the server every few seconds.  But this has several disadvantages:  it is inefficient, and it introduces delay.  Even if you poll every half second, you introduce up to a half second delay in presenting the information in the browser.  In cases where the web browser is replacing physical controls, this delay can be unacceptable.

The "slow load" technique is fairly simple, totally cross-platform, and workable even with the oldest javascript-capable browsers, and feature limited mobile browsers.  It uses a hidden frame to pass data from the server to the browser.  The trick is that the server loads this page "slowly".  The server hangs on to the connection initiated by the web browser.  It may hang on to this connection for minutes, or hours, or even days.  When there is finally new data to send, the communication path is already open.  Seconds of polling delay are replaced with milliseconds of transit time.  Here's what it looks like:

Hidden frame 0, reloaded once per event
 Frame 1, client side script, stays loaded all the time
<html>
<head>
<script>
function squirt_data()
{
window.top.frames.main.
  push_event("key",$value);
window.top.frames.me.location=
 "to_browser.cgi";
}
</script>
</head>
<body onload="squirt_data()">
This frame is not meant
to be looked at directly.
</body>
</html> 		<html><head>
<title>Main body window</title>
<script>
function push_event(key,value)
{
 if(key = "key" )
    {
    document.getElementById('hitme').
         value=value;
    }
}
</script>
</head>
<body>
<form><input id="hitme" type="text" value="------"></form>
</body>
</html>

The server passes data by writing keys and values in the "squirt_data()" Javascript function, and then reloads itself to get ready for next time. The source files can be found here: slow_load_cgi  slow_load_main.html. You can try it in a frame here.