AjaxClassLoader - Javascript classes manager with Ajax

With Actionscript 2 projects I have been used to work with classes files organized in a tree structure. Each class can use one or more other classes with the *import* keyword. This is a widespread structure in class-based programming languages (Actionscript, C #, Java, etc...).

So while working with Javascript my first thought was to reproduce this so practical structure. This is why some time ago I create a Javascript file loading system that makes possible to recreate this structure with Javascript when taking my first steps with Ajax. I recently had the occasion to use this project, I wanted to give it to the community.

Script in itself is not complicated, it is more a good practice, an idea than a real class. An idea which flash developers will like, more especially as it makes it possible to easily use Actionscript classes in Javascript by reducing the conversion work to its minimum when it's needed to convert ActionScript classes to Javascript.

The goal of the class is to make it possible to dynamically load a Javascript class file to be able to use it the line after the load instruction. I so use the Ajax object in synchronous mode so it respects the execution order of the script.

For the example I would use the script AjaxClassLoader.js and a class of classpath com.mywebsite.myclasspath.MyClass to make the usual hello world.

My example class is stored in a file whose server path can be: /com/mywebsite/myclasspath/MyClass.js. It is first necessary to load the main AjaxClassLoader class with a simple script tag:

<script type="text/javascript" src="AjaxClassLoader.js"></script>

The AjaxClassLoader is loaded, I can so import my example class:

<script type="text/javascript">
var MyClass = AjaxClassLoader.load('com.mywebsite.myclasspath.MyClass');
var iMyClass = new MyClass();
iMyClass.foo();
</script>

The example class looks like:

function MyClass(){}
MyClass.prototype.foo = function()
{
    alert('hello world');
}

You must get it now. When you open the web page, the class with the classpath com.mywebsite.myclasspath.MyClass is loaded, instanciated and when I call the foo method it invokes a Javascript alert with ' hello world' as message.

In practice it is slightly more complicated. The example class file contains exactly:

ClassMyClass();
function ClassMyClass()
{
    AjaxClassLoader.getClassPathObject('com.mywebsite.myclasspath').MyClass = MyClass;
    
    function MyClass(){}
    MyClass.prototype.foo = function()
    {
        alert('hello world');
    }
}

I prefer to use the function ClassMyClass (this is a dummy name with only a naming convention for my personal use) to wrap the declaration of the class to allow the use of local variables without polluting the global context of the script execution. It is even not necessary at all but a good practice.

The AjaxClassLoader.getClassPathObject method create or access the "classPath" object used to contains the class.

This example is included in the simple_usage_example file.

This is the point where the idea becomes really interesting. It is indeed possible to use a class that uses one or more other.

If my above class example had to use another class I would simply have to write:

ClassMyClass();
function ClassMyClass()
{
    AjaxClassLoader.getClassPathObject('com.mywebsite.myclasspath').MyClass = MyClass;

    //Strictly the same thing like importing a class with Actionscript 2.
    var mySecondClass = AjaxClassLoader.load('com.mywebsite.mysecondclasspath.MySecondClass');
    
    function MyClass(){}
    MyClass.prototype.foo = function()
    {
        //The class can be directly used there because
        //it exists in the scope of the ClassMyClass scope.
        var iMySecondClass = new mySecondClass();
        iMySecondClass.foo();
    }
}

To illustrate the use of the class to inherits another and import another, I included a complete example in the file full_usage_example of the file.

Download the AjaxClassLoader class file and examples.