How to create AJAX semi-synchronous behaviour

I spent the better part of last month beating my head against the wall before I came up with an easy way to dynamically load, and chain together HTML canvas classes which are stored on the server, but, obviously, initialized on the client (harder than it sounds when the ordering is important in an asynchronous environment).

I was wondering if someone could help me find a way to load simple javascript scripts. Lets define a load('foo.js') function which instructs the client to load script foo.js from the server and execute it as javascript code.

Given the three files, stored on the server:

A.js

a = 10;

B.js

load('A.js');
b = a + 10;

C.js

load('B.js');
c = b + 10;

If the client issues the command load('C.js'); what's the easiest/most reliable way to implement this. One idea I had was to scan the code serverside and return all the scripts at once. This requires the minimal amount of php requests. However, if the client has already requested C.js before, the script should exist client side, and this would be inneficient, especially if C.js and all its dependent files are large. Another option I considered was to wrap all of these serverside scripts in an object like so, for C.js above:

{
  depenencies: ['B.js'] ,
  code : 'c.age = b.age + 10;'
}

I just don't know how to 'pause' execution of script C.js after the load('B.js') statement, and then resuming it after B.js has been loaded.

EDIT Thanks to redsqaure for suggesting yepnope and requirejs. Unfortunately, I do not like them for several reasons. For one, requirejs is difficult (I am sure I will come under criticism for this one). My main gripe with this is that, if it is so difficult to learn, I might as well recreate it myself, learning it in the process, AND having greater control over it. Second, it requires you to change your style of writing. Switching to Dojo and having to use dojo.declare("ClassName", [ParentA,ParentB], {...}); to declare classes is one thing, but wrapping every snippet of code in requ开发者_如何转开发ire(['A','B',...], function(){}); is another. Finally, I don't know how simple it will be to instruct where to look for files. I want the user to be able to define a 'PATH' variable server side, and have the search occur in each of the folders/subfolders of the 'PATH'

---

Depends on how optimized you want it to be. Either you can go the route of synchronous XHR or use a callback (async and recommended). If you were to go the second route your code would look something like:

// Say C.js is dependent on A.js and B.js..
load(["A.js","B.js"], function() {       
     // code goes here    
});

EDIT

Taking a second look after you feedback what you want is somewhat possible, but would be brittle and hard to write in javascript. Below i have a sample/untested implementation of a dependency loader where a file can only have one call to load("file.js") possible. This would be more complex for multiple possible dependencies. Also I'm assuming these files are coming from the same domain.

// Usage: load("A.js")
// A.js -> B.js -> C.js
window.load = (function() {

    var loaded = {};

    return function(str, /* internally used */ callback) {

        if(!loaded[str]) {

            loaded[str] = true;

            $.get(str, function(data) {
                var matches = data.match(/load\(['|"](.*)["|']\)/);

                if(matches.length > 1) { // has deps

                    window.load(matches[1], function() {
                        window.eval(data);
                        if(!!callback) callback();
                    });

                } else { // no deps
                    window.eval(data);
                }

            });

        } 
    }
})();

---

Why not look into a script loader like yepnope.js or require.js