By now, nearly everyone who works in web development has heard of the term Ajax, which is simply a term to describe client-server communication achieved without reloading the current page. Most articles on Ajax have focused on using XMLHttp as the means to achieving such communication, but Ajax techniques aren’t limited to just XMLHttp. There are several other methods; we’ll explore some of the more common ones in this series of articles.

Dynamic Script Loading
The first alternate Ajax technique is dynamic script loading. The concept is simple: create a new <script/> element and assign a JavaScript file to its src attribute to load JavaScript that isn’t initially written into the page. The beginnings of this technique could be seen way back when Internet Explorer 4.0 and Netscape Navigator 4.0 ruled the web browser market. At that time, developers learned that they could use the document.write() method to write out a <script/> tag. The caveat was that this had to be done before the page was completely loaded. With the advent of the DOM, the concept could be taken to a completely new level.

The Technique
The basic technique behind dynamic script loading is easy, all you need to do is create a <script/> element using the DOM createElement() method and add it to the page:

var oScript = document.createElement(”script”);
oScript.src = “/path/to/my.js”;
document.body.appendChild(oScript);

Downloading doesn’t begin until the new <script/> element is actually added to the page, so it’s important not to forget this step. (This is the opposite of dynamically creating an <img/> element, which automatically begins downloading once the src attribute is assigned.)

Once the download is complete, the browser interprets the JavaScript code contained within. Now the problem becomes a timing issue: how do you know when the code has finished being loaded and interpreted? Unlike the <img/> element, the <script/> element doesn’t have an onload event handler, so you can’t rely on the browser to tell you when the script is complete. Instead, you’ll need to have a callback function that is the executed at the very end of the source file.