Skip to content

Cache jQuery’s JSONP Calls

by arlo on June 16th, 2013 

This post assumes your server already responds with proper Expires and Cache headers.

Short Answer

You have to set both cache:true and jsonpCallback MUST be a string, e.g. jsonpCallback:'myCallback'

$.ajax({
    url           : 'http://domain.com/api/getItems',
    // cache must be true
    cache         : true,
    // Caveat - jsonpCallback MUST be a string
    jsonpCallback : 'myCallback',
    dataType      : 'jsonp',
    data          : { itemId:123 }
});

Long Answer

First off, if you are not familiar with what it takes for you browser to cache a http call please read my previous post about browser caching.

Secondly, we must understand exactly what cache and jsonpCallback do to your URLs during jsonp calls.

No Cache and No jsonpCallback

Lets look at our previous example without cache and jsonpCallback enabled.

$.ajax({
    url      : 'http://domain.com/api/getItems',
    dataType : 'jsonp',
    data     : { itemId:123 }
});

With this example your browser will make the following call. Take special notice to the callback=jQuery19107020940016955137_1371398351628 and the _=1371398351629 params inserted into our URL.

http://domain.com/api/getItems?itemId=123&callback=jQuery19107020940016955137_1371398351628&_=1371398351629

Although you do not enable jsonpCallback the param callback is still present.

Incase you do not know how jsonp works, you NEED a callback param so that the serverside script can “wrap” the json in a function which is referred to as “padding”. Hence JSONPadding.

So jQuery created a function behind our backs called jQuery19107020940016955137_1371398351628 and the JSON returned by our server is expected to look something like this: jQuery19107020940016955137_1371398351628( { ..... } );. Notice that our JSON is wrapped [padded] in a function call and the function’s name is “jQuery19107020940016955137_1371398351628″.

Now lets take a look at the mysterious _ (underscore) param. This param is injected by jQuery with the sole purpose of making the URL unique. jQuery decides to insert this when the cache attribute is set to false. Although this http call IS cached by the browser, jQuery guarantees the same URL will not be called twice by setting the _ (underscore) param to a timestamp.

Setting Cache and jsonpCallback

Since we know http calls are cached by the browser we need to make sure we keep calling the same URL to take advantage of our browsers cache.

$.ajax({
    url           : 'http://domain.com/api/getItems',
    cache         : true,
    jsonpCallback : 'myCallback',
    dataType      : 'jsonp',
    data          : { itemId:123 }
});

By setting cache to true we eliminate jQuery’s _ param and by setting jsonpCallback to a string we ensure that the same function name will be used time and time again. The above example creates a http call like the following:

http://domain.com/api/getItems?itemId=123&callback=myCallback

As you can see our string callback was used and our underscore param was eliminated. The next time you make this same jsonp call your browser will recognize this URL and use browser cache instead of actually making the http call.

Make sure you actually have a javascript function called “myCallback”.

You can think of the “myCallback” function as a “success” method. When the jsonp call returns “myCallback” function will receive the JSON.

From → HTTP, Javascript, JQuery

  • http://torkiljohnsen.com Torkil Johnsen

    Your last codeblock seems to have an error: Shouldn’t it be jsonpCallback, instead of just callback?

  • http://www.arlocarreon.com Arlo Carreon

    Right you are! Thanks for the catch, fixed.