<?xml version="1.0" encoding="UTF-8"?><!-- generator="wordpress/2.3.3" -->
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	>
<channel>
	<title>Comments on: A Better Loading Message</title>
	<link>http://googlemapsbook.com/2006/09/12/better-loading/</link>
	<description>with PHP or Rails and AJAX: From Novice to Professional</description>
	<pubDate>Sun, 07 Sep 2008 17:06:28 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.3.3</generator>
		<item>
		<title>By: tony</title>
		<link>http://googlemapsbook.com/2006/09/12/better-loading/#comment-53888</link>
		<dc:creator>tony</dc:creator>
		<pubDate>Thu, 19 Jun 2008 13:09:18 +0000</pubDate>
		<guid>http://googlemapsbook.com/2006/09/12/better-loading/#comment-53888</guid>
		<description>This new code does not work properly.  I have copied the files verbatim and its simply not working.  I am not sure if there is a problem in the code or a problem on the site b/c none of the database examples are working in chapter 6.  Can you please fix?</description>
		<content:encoded><![CDATA[<p>This new code does not work properly.  I have copied the files verbatim and its simply not working.  I am not sure if there is a problem in the code or a problem on the site b/c none of the database examples are working in chapter 6.  Can you please fix?</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Caspar Gorvin</title>
		<link>http://googlemapsbook.com/2006/09/12/better-loading/#comment-74</link>
		<dc:creator>Caspar Gorvin</dc:creator>
		<pubDate>Wed, 04 Oct 2006 18:42:53 +0000</pubDate>
		<guid>http://googlemapsbook.com/2006/09/12/better-loading/#comment-74</guid>
		<description>In the example code above, the alert() message box makes sure, no application code is executed before all scripts are loaded. Replace the alert()-call with a call to your application's program entry function, and you'll get the effect as described. The last line in the onload()-message ('var cp = ...') may only call functions that don't rely on the scripts loaded. It's there to demonstrate that calling a function of a script that's beeing loaded will fail, because the onload() function continues (and terminates) without the loading to complete.

PS. sorry for the split replies, but the form cut off the text in the middle of the code expample.</description>
		<content:encoded><![CDATA[<p>In the example code above, the alert() message box makes sure, no application code is executed before all scripts are loaded. Replace the alert()-call with a call to your application&#8217;s program entry function, and you&#8217;ll get the effect as described. The last line in the onload()-message (&#8217;var cp = &#8230;&#8217;) may only call functions that don&#8217;t rely on the scripts loaded. It&#8217;s there to demonstrate that calling a function of a script that&#8217;s beeing loaded will fail, because the onload() function continues (and terminates) without the loading to complete.</p>
<p>PS. sorry for the split replies, but the form cut off the text in the middle of the code expample.</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Caspar Gorvin</title>
		<link>http://googlemapsbook.com/2006/09/12/better-loading/#comment-73</link>
		<dc:creator>Caspar Gorvin</dc:creator>
		<pubDate>Wed, 04 Oct 2006 17:55:55 +0000</pubDate>
		<guid>http://googlemapsbook.com/2006/09/12/better-loading/#comment-73</guid>
		<description>Why does this show the load message right away even though we loaded the scripts in the onload() function and the browser doesn't show anything before finishing the onload() function? Because the window.onload() function starts the loading of the scripts but doesn't wait until all the scripts are loaded. It terminates after setting up the XmlHttp-requests and - the browser displays the html-file's 'Loading...' message. The only tricky thing to remember is to not do anything in the application that depends on one of the scripts before all the scripts are loaded.</description>
		<content:encoded><![CDATA[<p>Why does this show the load message right away even though we loaded the scripts in the onload() function and the browser doesn&#8217;t show anything before finishing the onload() function? Because the window.onload() function starts the loading of the scripts but doesn&#8217;t wait until all the scripts are loaded. It terminates after setting up the XmlHttp-requests and - the browser displays the html-file&#8217;s &#8216;Loading&#8230;&#8217; message. The only tricky thing to remember is to not do anything in the application that depends on one of the scripts before all the scripts are loaded.</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Caspar Gorvin</title>
		<link>http://googlemapsbook.com/2006/09/12/better-loading/#comment-72</link>
		<dc:creator>Caspar Gorvin</dc:creator>
		<pubDate>Wed, 04 Oct 2006 17:41:06 +0000</pubDate>
		<guid>http://googlemapsbook.com/2006/09/12/better-loading/#comment-72</guid>
		<description>onLoadFunction(_this.XHRObject);
                }
            }
        };
    }

    // Open and send the request for the file
    this.XHRObject.open('GET',      
                        File,       // requested file
                        true);      // asynchronous call
                        
    this.XHRObject.send(null);      
};

// RequestAndRunScript()
// Requests a script file from the server and runs the script

CRequestObject.prototype.RequestAndRunScript = function (ScriptFile)
{
    var _this = this;

    // Define an onload function that will be called after loading the script
    var onLoadFunction = function(XHRObject)
                         {
                            eval( XHRObject.responseText );  
                            if (_this.onCompletion) {
                                _this.onCompletion();
                            }
                         };
    // Load the script file and run it                     
    this.RequestFile(ScriptFile, onLoadFunction);
};

// An example of an html-file's onload function:

window.onload = function()
{    
        // Load and initialize the scripts
        var RequestObject1 = new CRequestObject();
        var RequestObject2 = new CRequestObject();
        var RequestObject3 = new CRequestObject();
        var RequestObject4 = new CRequestObject();
        var RequestObject5 = new CRequestObject();
        RequestObject1.onCompletion = function() { RequestObject2.RequestAndRunScript('Script2.js'); };
        RequestObject2.onCompletion = function() { RequestObject3.RequestAndRunScript('Script3.js'); };
        RequestObject3.onCompletion = function() { RequestObject4.RequestAndRunScript('Script4.js'); };
        RequestObject4.onCompletion = function() { RequestObject5.RequestAndRunScript('Script5.js'); };
        RequestObject5.onCompletion = function() { alert('All scripts loaded'); };
        RequestObject1.RequestAndRunScript('Script1.js');
        
        // Initialize the application, do something useful...
        var cp = new CCommandProcessor();
     
};</description>
		<content:encoded><![CDATA[<p>onLoadFunction(_this.XHRObject);<br />
                }<br />
            }<br />
        };<br />
    }</p>
<p>    // Open and send the request for the file<br />
    this.XHRObject.open(&#8217;GET&#8217;,<br />
                        File,       // requested file<br />
                        true);      // asynchronous call</p>
<p>    this.XHRObject.send(null);<br />
};</p>
<p>// RequestAndRunScript()<br />
// Requests a script file from the server and runs the script</p>
<p>CRequestObject.prototype.RequestAndRunScript = function (ScriptFile)<br />
{<br />
    var _this = this;</p>
<p>    // Define an onload function that will be called after loading the script<br />
    var onLoadFunction = function(XHRObject)<br />
                         {<br />
                            eval( XHRObject.responseText );<br />
                            if (_this.onCompletion) {<br />
                                _this.onCompletion();<br />
                            }<br />
                         };<br />
    // Load the script file and run it<br />
    this.RequestFile(ScriptFile, onLoadFunction);<br />
};</p>
<p>// An example of an html-file&#8217;s onload function:</p>
<p>window.onload = function()<br />
{<br />
        // Load and initialize the scripts<br />
        var RequestObject1 = new CRequestObject();<br />
        var RequestObject2 = new CRequestObject();<br />
        var RequestObject3 = new CRequestObject();<br />
        var RequestObject4 = new CRequestObject();<br />
        var RequestObject5 = new CRequestObject();<br />
        RequestObject1.onCompletion = function() { RequestObject2.RequestAndRunScript(&#8217;Script2.js&#8217;); };<br />
        RequestObject2.onCompletion = function() { RequestObject3.RequestAndRunScript(&#8217;Script3.js&#8217;); };<br />
        RequestObject3.onCompletion = function() { RequestObject4.RequestAndRunScript(&#8217;Script4.js&#8217;); };<br />
        RequestObject4.onCompletion = function() { RequestObject5.RequestAndRunScript(&#8217;Script5.js&#8217;); };<br />
        RequestObject5.onCompletion = function() { alert(&#8217;All scripts loaded&#8217;); };<br />
        RequestObject1.RequestAndRunScript(&#8217;Script1.js&#8217;);</p>
<p>        // Initialize the application, do something useful&#8230;<br />
        var cp = new CCommandProcessor();</p>
<p>};</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Caspar Gorvin</title>
		<link>http://googlemapsbook.com/2006/09/12/better-loading/#comment-71</link>
		<dc:creator>Caspar Gorvin</dc:creator>
		<pubDate>Wed, 04 Oct 2006 17:39:04 +0000</pubDate>
		<guid>http://googlemapsbook.com/2006/09/12/better-loading/#comment-71</guid>
		<description>Here's the rest of the code example (the reply form cut it off):

                // Call the specified function 
                if (_this.XHRObject.status </description>
		<content:encoded><![CDATA[<p>Here&#8217;s the rest of the code example (the reply form cut it off):</p>
<p>                // Call the specified function<br />
                if (_this.XHRObject.status</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Caspar Gorvin</title>
		<link>http://googlemapsbook.com/2006/09/12/better-loading/#comment-70</link>
		<dc:creator>Caspar Gorvin</dc:creator>
		<pubDate>Wed, 04 Oct 2006 17:36:36 +0000</pubDate>
		<guid>http://googlemapsbook.com/2006/09/12/better-loading/#comment-70</guid>
		<description>Hello Mike,

I got your book this monday and I'm very pleased with it. I've been working with the Maps API for a while, but I still learn a lot from the book, in particular from the "Advanced" topics and from your hints on external sources for geocoding data. 

For the loading dilemma, I use an approach that is in my opignion easier and more flexible: 

1) put nothing but html in your html-file, don't load any scripts by meta-tags except for the Google API. 

2) show a "loading..." message in your html-file

3) in your onload() function, load your application's scripts via XmlHttpRequest

4) when onreadystate == 4 for the first script loaded, eval() the script and then go on and load the next script etc., to make sure, the scripts get loaded and initialized in the correct order

5) load your data files the same way

6) Due to the way the browsers implement variable scopes, any global objects contained in the scripts must be defined implicit, i. e. without the 'var' keyword. E. g.:
Define: 'myClass = function () {...}; '
Not: 'var myClass = function...' and not 'function myClass()...'

An implementation of the above (error checking stripped off):

// The CRequestObject class implements the XHTML-Request-Object class

// Constructor
function CRequestObject () 
{
    // Create an XMLHttpRequest-object (browser implementation dependend)
    if (window.XMLHttpRequest) {     // is Mozilla Firefox, Opera, Internet Explorer 7
        this.XHRObject = new XMLHttpRequest();
    }
    else {
            if (window.ActiveXObject) { // is Internet Explorer 6 or earlier
                this.XHRObject = new ActiveXObject("Microsoft.XMLHTTP");
            }
    }
}

// RequestFile()
// Requests a file from the server and calls the specified function on completion

CRequestObject.prototype.RequestFile = function (File, onLoadFunction)
{
    var _this = this; // a way to pass the this-pointer of the CRequestObject to the event handler (which overwrites the this pointer)

    this.XHRObject.onreadystatechange = function ()
        {
            if(_this.XHRObject.readyState == 4)  // complete
            {
                // Call the specified function 
                if (_this.XHRObject.status </description>
		<content:encoded><![CDATA[<p>Hello Mike,</p>
<p>I got your book this monday and I&#8217;m very pleased with it. I&#8217;ve been working with the Maps API for a while, but I still learn a lot from the book, in particular from the &#8220;Advanced&#8221; topics and from your hints on external sources for geocoding data. </p>
<p>For the loading dilemma, I use an approach that is in my opignion easier and more flexible: </p>
<p>1) put nothing but html in your html-file, don&#8217;t load any scripts by meta-tags except for the Google API. </p>
<p>2) show a &#8220;loading&#8230;&#8221; message in your html-file</p>
<p>3) in your onload() function, load your application&#8217;s scripts via XmlHttpRequest</p>
<p>4) when onreadystate == 4 for the first script loaded, eval() the script and then go on and load the next script etc., to make sure, the scripts get loaded and initialized in the correct order</p>
<p>5) load your data files the same way</p>
<p>6) Due to the way the browsers implement variable scopes, any global objects contained in the scripts must be defined implicit, i. e. without the &#8216;var&#8217; keyword. E. g.:<br />
Define: &#8216;myClass = function () {&#8230;}; &#8216;<br />
Not: &#8216;var myClass = function&#8230;&#8217; and not &#8216;function myClass()&#8230;&#8217;</p>
<p>An implementation of the above (error checking stripped off):</p>
<p>// The CRequestObject class implements the XHTML-Request-Object class</p>
<p>// Constructor<br />
function CRequestObject ()<br />
{<br />
    // Create an XMLHttpRequest-object (browser implementation dependend)<br />
    if (window.XMLHttpRequest) {     // is Mozilla Firefox, Opera, Internet Explorer 7<br />
        this.XHRObject = new XMLHttpRequest();<br />
    }<br />
    else {<br />
            if (window.ActiveXObject) { // is Internet Explorer 6 or earlier<br />
                this.XHRObject = new ActiveXObject(&#8221;Microsoft.XMLHTTP&#8221;);<br />
            }<br />
    }<br />
}</p>
<p>// RequestFile()<br />
// Requests a file from the server and calls the specified function on completion</p>
<p>CRequestObject.prototype.RequestFile = function (File, onLoadFunction)<br />
{<br />
    var _this = this; // a way to pass the this-pointer of the CRequestObject to the event handler (which overwrites the this pointer)</p>
<p>    this.XHRObject.onreadystatechange = function ()<br />
        {<br />
            if(_this.XHRObject.readyState == 4)  // complete<br />
            {<br />
                // Call the specified function<br />
                if (_this.XHRObject.status</p>
]]></content:encoded>
	</item>
</channel>
</rss>
