Introduction to JSON with padding or JSONP

If you are passionate about JavaScript, and if you have tried making an API call from JavaScript and if you failed tragically, then believe me buddy, you are at right place. In this post we are going to talk about JSONP, or putting otherwise, JSON with padding.

Web browser generally do not allow making cross domain API calls. Yet if you are so desperate making the call, your call will be blocked. Under the same origin policy (SOP), a JavaScript code loaded from one domain is not allowed to fetch data from another domain. Execution of raw JavaScript from a 3rd party raised security concerns and creates a possible vulnerability. The browser when encounter that a JSON data has arrived from another domain, it blocks the data before getting parsed.

The JSONP, however, adds a padding to the JSON data, pretending as it being a normal http response and not any JSON information, thus allowing it to pass the browser’s security wall, all the way back to the caller.

Let’s see how we can actually implement this concept. I have a Rest API, hosted in Azure, and I am going to make a GET call to the API. The API has a simple code block which return a message hello world.

   1: exports.get = function(request, response) {

   2:  

   3:     response.send(statusCodes.OK, JSON.stringify("Hello World"));

   4:  

   5: }

In the client application, there is an ajax call that is made to the API.

   1: getAllData = function(){

   2:  

   3:         console.log('calling api...');

   4:         $.ajaxSetup({ cache: false });

   5:  

   6:                  $.ajax({

   7:                     type: "GET",

   8:                     url: "http://myzaureapi/api/values",

   9:                     dataType: "jsonp",

  10:                     jsonp: false,

  11:                     ifModified:false,

  12:                     crossDomain: true,

  13:                     jsonpCallback: "DataFetched",

  14:                     cache: true,            

  15:                     success: function () {

  16:                         console.log('api call was a sucess');

  17:                     },

  18:                     error: function(err){

  19:                         console.log('error in api call' + err.message);

  20:                     }

  21:                 });

  22:         }    

  23:  

  24: var DataFetched = function(result){

  25:  

  26:     alert("Success Data");

  27: }

If you look closely to the $.ajaxSetup you will see a jsonpCallback property. This is a callback, a method actually, in other words, that would be called when the API returns some data. But if unless we add padding to the data in our case which is the JSON “{“Hello World”}”, the API call would not be a success.

In case of JSONP, the method specified in the callback is only the method that adds padding to the data. So modifying the API to something like this would suffice:

   1: exports.get = function(request, response) {

   2:     

   3:     response.send(statusCodes.OK, 

   4:                 "DataFetched(" + JSON.stringify("Hello World") + ")");

   5:  

   6: }

So our data which was like {“Hello World”} would now be like DataFetched{{“Hello World”}}. Whenever this sequence arrives back, the browser separates the padding and the information. The method in the padding is called and the information is sent as a parameter to the method.

I hope you’d like the post.

Happy Coding!!!