by Peter Moss
28. February 2010 05:55
In AJAX programming, one of the most important issues is to make sure that your requests back to the server are initiated after a web page has been completely loaded.
In the past, developers had to resort to various techniques (DHTML, page events) that were used to detect when page loading has been completed.
Browser object models differed diametrically. In addition, different versions of the same browser type had to be coded separately. Browsers have evolved since those early days, programming models have been (are being) updated to a point where there is enough commonality to allow for writing code that would run in all browsers. Anyway, a simple task of detecting when a browser has completed downloading all URLs contained in any given page was not trivial.
Today, thanks to upgrades to DOM event model, we can use a Javascript timer object to detect when a document object state changes. I have tested this simple method in the latest versions of Safari, Firefox, IE, and Opera.
Here is an example of Javascript method that would detect when the browser is done processing a page.
Don't try it on Blackberry native browser as this browser does not support document.readyState property. But Blackberry browsers have always been lagging technology wise. Try Opera Mini on your mobile device, it works the same way as the desktop version.
This example will work in all browsers that support thedocument.readyState property and the setInterval() method.
<html><head>
<script type="text/javascript">
// -----------------------------------------------------
// Copyright © 2009 Peter Moss, All Rights Reserved.
// Author: Peter Moss, P. Eng., http://www.petermoss.com
// This source code can be used in any derived work
// provided that the above copyright notice is shown.
// -----------------------------------------------------
var _timer = setInterval(isPageReady, 100);
function isPageReady()
{
if ( document.readyState != "loaded" &&
document.readyState != "complete"
)
{
alert('Page is not ready. Document state: ' + document.readyState);
return;
}
clearInterval( _timer );
// -----------------------------------------------
// At this point the page is fully loaded.
// You can add your initialization callbacks here.
// -----------------------------------------------
alert('All page URLs have been downloaded!');
var oif = document.getElementById('olympics');
oif.style.display = 'block';
}; // end of isPageReady()
</script>
</head>
<body>
<iframe id="olympics" style="display: none"
src ="http://www.vancouver2010.com/widgets/medals-widget/" width="320" height="340"
frameborder=0 scrolling="no">
</iframe>
</body></html>
In the above example, I used iframe to download a widget from another domain, however the output is not shown until the download is complete. This method can be used for all other XMLHttpRequest calls that need to go out to the server and update some other sections of a page.
The iframe element can be changed to a script element with some JSON request with a callback to be called when the page (including all other JSON calls) is completely finished. All dynamic Javascript document transformations can run from that point on.
6a5b6779-3468-4563-894e-b16bc8bc6481|1|5.0
Tags:
AJAX
Subscribe