I've written a couple of articles in the last few months about my adventures in JavaScript.  While I certainly don't claim to be even proficient, I am getting better day by day.  As I pick up tricks and tips, I try to pass them on to help others out (hopefully!).  

Recently, we ran into an issue at work.  We're constantly adding JavaScript functionality to our company intranet.  While adding references to JavaScript files in the master pages that drive the templates is easy to do, there is a process that all master page changes have to go through, and this can limit the desirability of future changes.  What we needed was a way to dynamically load JavaScript files when needed, so that only the core init.js file that is loaded with every page request needs to be referenced on the master pages.

I've never done this kind of thing before, so I did a little snooping around.  There are apparently alot of solutions out there, some of them better and more robust than others.  After studying what they do, I decided to try my hand at building a simple JS loader in Spry, given that the core files I need are already in place.  Here's the result:

Spry.Utils.addLoadListener(function() { addEventHandlers() });

var wiki = 'wikicontent';

function addEventHandlers() {
    if (Spry.$$(wiki)) {
        loadJS('js/showlinks.js')
        getLinks();
    }
}
function loadJS(file) {
    var syncJS = Spry.Utils.loadURL("GET",file,false,addJS);    
}
function addJS(req){
    if (window.location.href.indexOf("http")==-1 || req.xhRequest.status==200) {
        var head = document.getElementsByTagName('head')[0]; 
        newJS = document.createElement('script');
        newJS.setAttribute('type', 'text/javascript');
        newJS.text = req.xhRequest.responseText;
        head.appendChild(newJS);    
    }
}

Turns out this is really easy.  The first thing you'll want to do, of course, is check to see if the element/function/etc that needs special JavaScript loaded exists.  In my example, I'm checking to see if the div that wraps a wiki element exists.

If it does, I call the loadJS() function (yes, I know, quite original!).  This function is really a go-between function that allows the meat of the process–the URL load–to be independant of this context and, therefore, reusable.  It takes only one argument: the relative path to the JavaScript file that needs to be loaded.

This argument is then passed to an instance of the Spry.loadURL function.  This function will make a synchronous XMLHttpRequest to the specified URL.  Easy.

Now for the most important part.  When the XMLHttpRequest returns a value, it needs to be written back to the DOM so that the functions included in the JavaScript file will be available for use.  This is accomplished on the callback function of the loadURL(), 'addJS'.  This function bascially takes the returned XML response, parses it, and writes it to a new script tag, which we create.  Finally, the new script tag is appended to the "head" tag of the page.

BIG GOTCHA:  IE7 will not recognize "innerHTML" for the script tag, so you have to use "text".  

That's it.  Now all functions and variable available in the requested JavaScript file are immediately available for use–in fact, this example makes a call to "getLinks()", the core function of the "showlinks.js" file.

Now obviously, this is an extremely simple example, and more complicated scenarios will require more processing, more capturing of errors, etc.  And one downside is that for this example, it require that SpryData.js, SpryDOMUtils.js, and an init.js be loaded with the page.  This could get a bit expensive, and less elegant (IMO) methods of accomplishing the same thing can occur with a tad less overhead.  Nonetheless, if you can spare the fractionally greater load times, it provides a simple way to make your coding even more flexible…and it uses Spry, to boot!