Good practice method for loading JavaScript via ajax

Question

Disclaimer: I'm fairly new to AJAX!

I've looked around, and I'm not sure which method to use to load javascript using ajax.

I'm using ajax to request pages that each require their own 6-10 short methods. In total there will be maybe 5-6 of these pages, so an approximate total of 35+ methods.

I would prefer to access necessary javascript as each page that requires it loads.

I've seen a few methods, and I'm not sure which one would best suit my needs:

1. Include an empty script element in the head, and manipulate the src attribute via. the DOM.

2. Create a new script element via. the DOM and append it to the document.body (this sounds the same as #1).

3. jQuery (which I'm already using) has an ajax getScript() method.
4. I haven't read anything about it, but can I just include a script element as part of the ajax response?

As I'm new to ajax and web development in general, I'm curious as to the ups and downs of each method as well as any methods I've missed.

Some concerns are: -Will a cached copy be used or will the script download each time an ajax request is made. Note that the scripts will be static. -Browser compatibility. I use Chrome, but this app will be used across versions of IE >= 7 as well as Firefox.

Answer 1

Go with getScript. It essentially does the same thing as the second method, but you don't have to worry about how to listen for load in various browsers (mainly IE).

AJAX response is simply text as far as the DOM is concerned. It has no effect unless you insert that into the DOM somehow.

Answer 2

In a jQuery environment, I'd use getscript(). You're right to wonder about the cache -- getscript includes a cache-busting feature (designed primarily to defeat aggressive IE caching, although of course useful in other scenarios). You can perform the equivalent of a non-cache-busted getscript like this:

$.ajax({
    cache: true,
    dataType: "script",
    url: "your_js_file.js",
    success: yourFunction
});

Answer 3

check this link and you have the option to choose which one suit you http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/

Answer 4

As all the other answers here just say "use jquery" without any further info/explanation/justification, it's probably worth actually looking at the other options you mentioned.

• Option#1

  could be a little complicated as it requires you to wait until one script has download and run before fetching the next one (as you've only one script element).

• Option#2

  is better as you can append a second script element to DOM before the first one has finished downloading, without affecting the download/execution.

• Option#3

  recommended by everyone before me, is fine IF you're in a jQuery environment and already loading the (quite heavy) jQuery library for other uses - loading it for this alone is obviously superfluous. It's also worth noting that $.getScript() and $.ajax() both use eval() to execute the script. eval() is not "evil" in this context as it's a trusted source, but it can in my experience occasionally be slightly more difficult to debug eval()-ed code.

• Option#4

  isn't possible afaik.

• Option#5

  recommended by Nick Craver in the first OP comment is what I'd go with tbh - if the scripts are static as you say, caching will be more efficient than multiple HTTP requests. You could also look into using a cache.manifest for aggressive caching if you're especially concerned about bandwidth: http://www.html5rocks.com/tutorials/appcache/beginner/