JSON versus JSONP Tutorial – Resurrected

 JSON versus JSONP Tutorial – Resurrected

JSONP is a simple way to overcome browser restrictions when sending JSON responses from different domains from the client. But the practical implementation of the approach involves subtle differences that are often not explained clearly.

Here is a simple tutorial that shows JSON and JSONP side by side.

JSON (Javascript Object Notation) is a convenient way to transport data between applications, especially when the destination is a Javascript application.

JQuery has functions that make Ajax/HTTPD calls from a script to a server very easy and $.getJSON() is a great shorthand function for fetching a server response in JSON. But this simple approach fails if the page making the ajax call is in a different domain from the server. The Same Origin Policy prohibits these cross-domain calls in some browsers as a security measure.

The security implications of allowing cross domain requests should be considered carefully in your application but if you do want to allow them then you need a way to overcome the browser restrictions.

JSONP (JSON with Padding) JSONP wraps up a JSON response into a JavaScript function and sends that back as a Script to the browser.

A script is not subject to the Same Origin Policy and when loaded into the client, the function acts just like the JSON object that it contains.

JSON

Here is a minimal example that uses JSON as the transport for the server response. The client makes an ajax request with the JQuery shorthand function $.getJSON. The server generates a hash, formats it as JSON and returns this to the client. The client formats this and puts it in a page element.

Server:

  get '/json' do
    content_type :json
    content = { :response  => 'Sent via JSON',
                :timestamp => Time.now,
                :random    => rand(10000) }
    content.to_json
  end

Client:

  var url = host_prefix + '/json';
  $.getJSON(url, function(json){
    $("#json-response").html(JSON.stringify(json, null, 2));
  });

JSONP

The only change on the Client side with JSONP is to add a callback parameter to the URL. The simplest way to do this is to add ‘callback=?’ in which case jQuery will generate a unique function name and pass that to the server (e.g. jQuery19009536794223822653_1359406689359).

On the Server you need to get the ‘callback’ parameter and, instead of returning the raw JSON, you wrap that string in a function definition, like this “()”. You don’t need to know the function name in advance – you just get it from that callback parameter.

You should also set the content type to ‘application/javascript’, although this doesn’t appear to matter in my tests.

Back on the client side you treat the returned function just like the raw JSON object.

Server:

  get '/jsonp' do
    callback = params['callback']
    content_type :js
    content = { :response  => 'Sent via JSONP',
                :timestamp => Time.now,
                :random    => rand(10000) }
    "#{callback}(#{content.to_json})"
  end

Client:

  var url = host_prefix + '/jsonp?callback=?';
  $.getJSON(url, function(jsonp){
    $("#jsonp-response").html(JSON.stringify(jsonp, null, 2));
  });

JSON vs JSON/P

Code examples are here – read more