5

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.

Improve this question
3
  • 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. Commented Jul 16, 2010 at 2:02
  • +1 on Nick's recommendation. Keep it simple. 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. Commented Jul 16, 2010 at 2:11

3 Answers 3

Reset to default
6

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
});
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

@Julian is correct, it should be "script" in this case, and it won't activate the cache feature since cache isn't undefined.
Yup, copy/paste mistake. Removed. Docs state that it will "intelligently" choose, presumably based on mime type...
We agree far too often, Nick :P
@Ken: better put the script dataType in case the server doesn't handle mimetypes correctly.
@Julian, agreed, safest option. @Nick, yup, but unfortunately we're agreeing far too often on my fat fingering...
1

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/

Improve this answer

Comments

0

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.

Improve this answer

3 Comments

I would recommend against this, $.getScript() intentionally doesn't cache, you can see here: github.com/jquery/jquery/blob/master/src/ajax.js#L265
I agree with Nick, go the $.ajax way with a script dataType.
@Nick @Julian - good points, I wasn't aware of jQuery sneaking in timestamps in the URL :). I say just ajaxSetup to have permanent caching throughout, or even better overwrite the native getScript method to optionally allow caching, and still be backwards compatible. If jQuery missed it, then we won't. Isn't that what JavaScript is all about? :P

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.