JSON versus JSONP Tutorial – Resurrected

  • Home
  • /
  • Blog
  • /
  • JSON versus JSONP Tutorial – Resurrected

July 27, 2017

 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.


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"}

Start your
7-day free trial

Take This Course with ALL ACCESS

Unlock your Learning Potential with instant access to every course and all new courses as they are released.
 [ For Serious Software Developers only ]

IBM i Training For Technology Experts


Successfully Work Remote 

 $ 129.00  $59.00

By adding new skills in information technology, employers will be confident that you have the necessary skills and tools needed to successfully work remotely


Snug CBD

 20% Discount

I have partnered with SNUG CBD givING you Organic CBD
20% discount code "NL20"