jQuery $.getScript last modified date

Question

I've read that it could be wise (for caching purposes) to call a file with it's last modified date and let the server resolve it to the original file. In this way you could set caching to for example 10 years and use a static name for a certain version of the file.

However since I also load in javascript asynchronously on my site, I need to be able to do the same in javascript/jQuery.

This is my current code, how would I be able to get the last-modified date of the script in question being loaded?

//load new js
if (typeof loadedScripts[url] === 'undefined') {
    $.getScript("javascript/" + url + ".js", function() {
        if (typeof window["load_" + url] !== 'undefined') {
            promises = promises.concat(window["load_" + url](html));
        }
        loadedScripts[url] = 1;
    });
}
else {
    if (typeof window["load_" + url] !== 'undefined') {
        promises = promises.concat(window["load_" + url](html));
    }
}

(It also executes a function called on load, but that is not interesting for this question)

I know it is possible to get the last modified date of the current document with document.lastModified, but I'm unsure how it would translate into a $.getScript call.

I have also enabled caching:

//set caching to true
$.ajaxSetup({
    cache: true
});

@adeneo I do want to cache the files whenever possible. But they also need to reload whenever they get updated. So it seems an appropiate approach. — skiwi, Jan 02 '14 at 13:40
$.getScript doesn't cache files by default, so why would you need it. You could of course enable caching in $.ajaxSetup, but that has a tendency to cause issues. — adeneo, Jan 02 '14 at 13:46
Let the browser take care of caching. Just enable caching for the request or use the code from first example here http://api.jquery.com/jquery.getscript/ — pawel, Jan 02 '14 at 13:47
@adeneo Forgot to mention, but I have set it to always cache. — skiwi, Jan 02 '14 at 13:48
@pawel I'm unsure whether the browser can decide to cache or not in an effective `$.ajax()` call? — skiwi, Jan 02 '14 at 13:48
@DanielA.White Why don't you use ArbitraryLibraryOrPlugin? Does it matter? — Sumurai8, Jan 02 '14 at 13:51
Okay then, $.getScript is just a shortcut for $.ajax, and that has somewhat access to [the header](http://stackoverflow.com/questions/1557602/jquery-and-ajax-response-header), how to use this to set last-modified is beyond me. You seem to have a nice little function with promises and everything set up, and if this is the way you load scripts, I'd strongly suggest you just add them with script tags in the head instead, or use the Google analytics way of inserting script tags dynamically instead of using $.getScript for everything. — adeneo, Jan 02 '14 at 13:52

Christian · Answer 1 · 2014-01-02T14:01:07.753

For caching purposes, I rather would suggest the ETag. http://en.wikipedia.org/wiki/HTTP_ETag

We use it for busting the cache if needed and it works great.

However, jQuery's Ajax function provides an ifModified param: http://api.jquery.com/jquery.ajax/

Here's the explanation:

Allow the request to be successful only if the response has changed since the last request. This is done by checking the Last-Modified header. Default value is false, ignoring the header. In jQuery 1.4 this technique also checks the 'etag' specified by the server to catch unmodified data.

Using this param, the first request to get the Script would look like this:

GET /script.js HTTP/1.1
Host: www.orange-coding.net

HTTP/1.1 200 OK
Last-Modified: Wed, 02 Jan 2013 14:20:58 GMT
Content-Length: 4096

And a second request would look like this:

GET /script.js HTTP/1.1
Host: www.orange-coding.net
If-Modified-Since: Wed, 06 Oct 2010 08:20:58 GMT

HTTP/1.1 304 Not Modified

jQuery $.getScript last modified date

1 Answers1