JSON and JSONP

While writing one of my blog posts, I realized that there was something odd when i saw something like 'JSONP'. Now, I am aware that JSON is quite a simple way to format javasript. Heck, its just a simple object format. But then what the heck is JSONP?

A bit of googling led me to a couple of discussions and the wiki page that explains all about JSONP.

If in doubt, you might wanna take a look at these.

http://en.wikipedia.org/wiki/JSONP

http://stackoverflow.com/questions/2067472/please-explain-jsonp

As per my understanding, JSONP is nothing but a smart way to issue cross browser ajax requests. What exactly happens is that when you are making an ajax request to a JSONP enabled server, you need to pass a special request parameter called 'callback' that refers to a function in the current page. This function would take a parameter of type object and simply return this object.

For e.g, this is what your url might look like

xyz.com?callback=callbackFunction

And here is how the callback would look like.

callbackFunction(data){
return data;
};

The above code would simply return whatever data is passed as the argument.

When the JSONP server receives your request, it simply wraps the JSON string in the callback name. For example, if the server was to send this object.

{name:'xyz','org':'xyzcorp'}

It will send the following instead

callbackFunction({name:'xyz','org':'xyzcorp'});

And the above code is nothing but a straightforward invocation of your callback. This is considered as an invocation because when you issue a jsonp request, under the hood, instead of sending an xmlhttp request, which is used only for same-domain requests, an new script tag is created and the value of the src is set to the url. This is the only way to perform a cross domain ajax request because the script tag is the only html element which can be injected from a different domain. 

In a nutshell, here's what happens 

1. There should be a callback function in the current page that returns its argument. 
2. A script tag is created Set the value of the script tag is set to the url and the callback is added to the url 
3. The request reaches the server, which constructs a JSON string and wraps it with the callback name. 
4. This string when returned, act as a script, since it was a request for a script tag. 
5. Upon return, it is executed by the browser, and since it is nothing but a method invocation, your callback would be called. 
6. And poof, since your callback simply returns the data that you received from the server, you get the JSON object. 

If you are using jQuery, you may observe that jQuery creates a new random callback function for each request. Now I am not sure why they do that. Maybe its because of some security reasons. But since it happens under the hood, you dont need to worry much. All that you need to do is to specify the format of the data type as jsonp when issuing the ajax request.

Here's how you can do it

$.ajax("http://xyz.com",
{dataType: 'jsonp'}
);

As you see, its pretty simple. All you needed to do was to mention the data type, and jQuery took care of creating a callback and returning the JSON object retrieved from the server.

Hope that helped!

Happy Programming :)
Signing Off

Ryan