JSON versus JSONP Tutorial – Resurrected 

 July 27, 2017

By  NickLitten

 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.

Special Offer for all NICKLITTEN Punters

20% Off with Coupon: NICKLITTEN

In Partnership with SNUG CBD - American readers get 20% off

CBD helps with relaxation, focus and great for pain relief. I highly recommend the SNUG CBD Tincture to help keep you in the zone when programming!

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.


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.


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


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


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.


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


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


Code examples are here – read more


IBM i Software Developer, Digital Dad, AS400 Anarchist, RPG Modernizer, Shameless Trekkie, Belligerent Nerd, Englishman Abroad and Passionate Eater of Cheese and Biscuits. Nick Litten Dot Com is a mixture of blog posts that can be sometimes serious, frequently playful and probably down-right pointless all in the space of a day. Enjoy your stay, feel free to comment and remember: If at first you don't succeed then skydiving probably isn't a hobby you should look into.

Nick Litten

related posts:

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
__CONFIG_colors_palette__{"active_palette":0,"config":{"colors":{"cff50":{"name":"Main Accent","parent":-1},"a344d":{"name":"Accent Transparent","parent":"cff50"}},"gradients":[]},"palettes":[{"name":"Default","value":{"colors":{"cff50":{"val":"var(--tcb-skin-color-0)"},"a344d":{"val":"rgba(46, 138, 229, 0.85)","hsl_parent_dependency":{"h":210,"l":0.54,"s":0.78}}},"gradients":[]},"original":{"colors":{"cff50":{"val":"rgb(0, 178, 255)","hsl":{"h":198,"s":1,"l":0.5}},"a344d":{"val":"rgba(0, 178, 255, 0.85)","hsl_parent_dependency":{"h":198,"s":1,"l":0.5}}},"gradients":[]}}]}__CONFIG_colors_palette__

Get In Touch

I’m always looking for awesome input, feedback and critique!