What is JSONP all about ?
It's actually not too complicated...
Say you're on domain example.com, and we want to make a request to domain example.net. To do so, we need to cross domain boundaries, a no-no in most of browserland.
The one item that bypasses this limitation is <script> tags. When we use a script tag, the domain limitation is ignored, but under normal circumstances, we can't really do anything with the results, the script just gets evaluated.
Enter JSONP. When we make our request to a server that is JSONP enabled, we pass a special parameter that tells the server a little bit about our page. That way, the server is able to nicely wrap up its response in a way that our page can handle. For example, say the server expects a parameter called "callback" to enable its JSONP capabilities. Then our request would look like:
However, with JSONP, when the server receives the "callback" parameter, it wraps up the result a little differently, returning something like this:
As we can see, it will now invoke the method we specified. So, in our page, we define the callback function:
And now, when the script is loaded, it'll be evaluated, and our function will be executed. Voila, cross-domain requests!
It's also worth noting the one major issue with JSONP: we lose a lot of control of the request. For example, there is no "nice" way to get proper failure codes back. As a result, we end up using timers to monitor the request, etc, which is always a bit suspect. The proposition for JSONRequestis a great solution to allowing cross domain scripting, maintaining security, and allowing proper control of the request. These days (2015), CORS is the recommended approach vs. JSONRequest. JSONP is still useful for older browser support, but given the security implications, unless we have no choice CORS is the better choice.
Because we can ask the server to append a prefix to the returned JSON object. E.g
In other words, we can have cross-domain data exchange. Normally, XMLHttpRequest doesn't permit cross-domain data-exchange directly (one needs to go through a server in the same domain)
Also worth noting: even though the server should be considered as "trusted" before attempting that sort of "trick", the side-effects of possible change in object format etc. can be contained. If a function_prefix (i.e. a proper js function) is used to receive the JSON object, the said function can perform checks before accepting/further processing the returned data.
client side snippet of code
Server side piece of PHP code
JSONP is a great away to get around cross-domain scripting errors. We can consume a JSONP service purely with JS without having to implement a AJAX proxy on the server side.
We can use the b1t.co service to see how it works. This is a free JSONP service that alllows we to minify our URLs. Here is the url to use for the service: http://b1t.co/Site/api/External/MakeUrlWithGet?callback=[resultsCallBack]&url=[escapedUrlToMinify]
To actually make the JSONP call, we can do it about several ways (including using jQuery) but here is a pure JS example:
A simple example for the usage of JSONP.