So how does JSONP really work?

JSONP is a way to fetch JSON data from a different domain, often in an asynchronous way, but without being restricted by the browser’s same-origin policy like you would be with XMLHttpRequest. But perhaps you only know it via a library like jQuery, which auto-magically handles JSONP URLs.


My experience with JSONP until then had been exclusively through jQuery. jQuery.getJSON() magically switches to JSONP mode when you have a callback parameter in your JSON URL, so what did I care what it was doing under the covers? Something ajax-y and magical. Well, it’s time to learn more.

The simplest JSONP example

JSONP is actually really simple, so let’s just look at some code. Here’s a working example in six lines:

<script>
function processJSON (json) {
  // Do something with the JSON response
};
</script>

<script src='http://api.flickr.com/services/feeds/photos_public.gne?
jsoncallback=processJSON&tags=monkey&tagmode=any&format=json'></script>

First, we see processJSON() is a Javascript function that we’ve defined in our own code before the Flickr script is called.

Next, note the jsoncallback=processJSON query param in the Flickr API URL. This tells it to return its JSON “padded” inside a Javascript function call that corresponds to the name of our already-defined function. (The server needs to support this special query param, of course.)

Upon running this code, a request will be sent to Flickr, and the response will look like:

processJSON( {
    "title": "Recent Uploads tagged monkey",
    "link": "http://www.flickr.com/photos/tags/monkey/",
    "description": "",
    "modified": "2015-02-03T21:23:22Z",
    "generator": "http://www.flickr.com/",
    "items": [ 
        // ... Much more JSON here ...
    ]
} )

Finally, because Javascript called via the script tag isn’t subject to the browser’s same-origin policy, the response will simply be executed in the browser with our processJSON() function, with the JSON data passed as its argument.

At that point, you do whatever you need to do with the JSON in your function: parse it, filter it, ask it out on a date, etc. You might recognize this as a callback pattern, i.e. after the API request has finished, we tell it to “call us back” via processJSON() with the results.

Breaking it all down

The core elements of JSONP, then, are as such:

  1. callback function defined on your site.
  2. request to the remote API via <script> tag:
    • Includes a special param providing the name of your callback function
  3. The response:
    • Is just Javascript
    • That consists of:
      • A function call, the name of which you specified in the request
      • With the argument being the JSON data of interest
    • Gets executed immediately, as if it were called from your own domain

This callback arrangement between you and the server, combined with avoiding same-origin restrictions, is really the whole trick to JSONP. And as you may have guessed by now, the function padding around JSON data is why it’s called JSONP.

Fundamentally, that’s all that’s going on! Check out the working jsFiddle example.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s