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 patibility. I use Chrome, but this app will be used across versions of IE >= 7 as well as Firefox.

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 patibility. I use Chrome, but this app will be used across versions of IE >= 7 as well as Firefox.

• javascript
• jquery
• ajax
• dom

• 2 Why not just have one external file? If these are very short methods, a single file will be gzipped and cached and will be negligible to the client, and simplify your maintenance down to one <script> tag...unless you get a lot larger, this is definitely a simpler way to go. – Nick Craver Commented Jul 16, 2010 at 2:02
• +1 on Nick's remendation. Keep it simple. – Amir Commented Jul 16, 2010 at 2:03
• That would be the easy way :) But this is a learning process as much as it a practical one, and I would like to learn a method that scales. – Emma Commented Jul 16, 2010 at 2:11

3 Answers 3

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
});

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 plicated 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

  remended 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

  remended by Nick Craver in the first OP ment 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./tutorials/appcache/beginner/

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.