Cacher is the code snippet organizer for pro developers

JSONP is JSON with padding. Response is JSON data but with a function call wrapped around it.

JSON (Javascript Object Notation) is a convenient way to transport data between applications, especially when the destination is a Javascript application.

JSONP is a simple way to overcome browser restrictions when sending JSON responses from different domains from the client.

//JSON
 {"title":"Mr.", "name":"VIKAS KOHLI"}

//JSONP
 func( {"title":"Mr.", "name":"VIKAS KOHLI"});
 
 
 ===================================
JSONP is a simple way to overcome browser restrictions when sending JSON responses from different domains from the client.

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) makes this possible in all browsers.

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.

var flickrApiUrl = "https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";

$.getJSON(flickrApiUrl, {
    tags: "sun, beach",
    tagmode: "any",
    format: "json"
}).done(function(data){
  console.log(data);
});