Browse DevX
Sign up for e-mail newsletters from DevX


A Server-Side Assist for Loading Client-Side JavaScript Code : Page 2

JavaScript lacks a function for loading and executing a library file while it's executing a main program file. Implementing an include directive on the server side is a simple technique for getting around this limitation.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Asynchronous Loading

Include is a pretty simple concept, so you might wonder why this would even be an issue. The answer may lie in the design of early browsers, as well as the more modern browsers that were derived from them. Asynchronous communications has always been essential to Web technology. When a browser loads a Web page, it finds tags that instruct it to load other items—images, applets, frames, scripts, and so on. These items, of course, can be on other servers. Because the browser is loading a number of items from potentially different locations, it loads them asynchronously and in parallel. That way, you can see the Web page that you have loaded from a very fast site, even while waiting for a huge image from a slow site to appear inside that page.

Browsers are so carefully built around asynchronous interaction that it can be tricky to force synchronous loading. If you've done any client-side Java programming (especially in the early days of Java), you probably remember how complicated image loading was. You couldn't just call a function that returned a fully loaded image. Instead, you would initiate a load, and the loading process would invoke callbacks to inform you about the progress of the load, culminating in a final message that told you everything was loaded.

Many programmers wrote their own libraries to take care of all of this (sometimes using threads), so that they could just call a function that returned a fully loaded image. But it was easy to get this code wrong, especially when trying to run the code on different platforms with different patterns of I/O behavior. Finally, such functions moved into the standard Java libraries, but it took quite a while.

So, how does this apply to JavaScript include? It's pretty much the same thing. JavaScript doesn't have a function that loads and executes a library file in the middle of executing a main program file. It doesn't have include as we know it from other languages.

Asynchronous Loading of JavaScript

You can have one script load another in a number of ways. The most common is to simply write a script tag to the end of the document:

document.write( "<script src=\"mycode.js\"></script>" );

The problem with this is that mycode.js is going to be loaded later. The following example shows why this is a problem:

// ... document.write( "<script src=\"mylibrary.js\"></script>" ); mylibrary_function( 1, 2, 3 ); // ...

This code attempts to load mylibrary.js and then call a function from that library called mylibrary_function(). But the first line only starts the include. It tells the browser to start loading and then continues to the second line, which tries to call the function. But the library isn't loaded yet, and the function isn't defined. So the call to mylibrary_function() will fail. (Actually, it probably will fail. I can't really predict what the browser will do, because the many JavaScript implementations in the numerous browser versions in use today are not consistent.)

This kind of include, then, is a hack. You'll find some workarounds for these problems as well, such as sleeping or breaking scripts into pieces, but these are also hacks, and they have still more problems of their own.

The XMLHttpRequest Solution

Most AJAX frameworks get around these problems by implementing some kind of include statement. They usually implement it with the XMLHttpRequest object, which is present in the most recent browsers.

The stated purpose of XMLHttpRequest is indicated by its name. It loads an XML file from a server using HTTP. However, it can be used to load any kind of file, including a .js file containing JavaScript code. Pass the loaded code to eval(), and it's ready to be called.

However, XMLHttpRequest isn't perfect. It exists in the latest browsers, but not everyone runs the latest browsers, so that won't do. And you may be subject to the usual complications caused by different browser implementations.

Thanks for your registration, follow us on our social networks to keep up-to-date