JSON with Padding (JSONP) is a technique for working around cross-domain Ajax limitations.
JSONP or "JSON with padding" is a communication technique used in JavaScript programs running in web browsers to request data from a server in a different domain, something prohibited by typical web browsers because of the same-origin policy. JSONP takes advantage of the fact that browsers do not enforce the same-origin policy on <script> tags.
To prevent cross-domain scripting, browsers normally block XMLHttpRequest (XHR) requests to other domains. JSONP works around this by wrapping or "padding" the JSON response such that it can be executed as a script.
For this reason, both the server and the client must support JSONP. The client adds a new <script> tag to the page, rather than creating an XHR, and typically informs the server what function name should be used for padding:
<script src="http://www.example.com/api/getdata?callback=response"></script>
The server then wraps the JSON response in a call to that function, which must be implemented by the client:
response({
"example1": "somedata",
"example2": "moredata"
});
Many client-side Ajax libraries abstract away the details of JSONP requests, allowing client code to treat them as normal JSON requests.
jQuery api example
$.ajax({
url: 'http://www.example.com/api/getdata',
jsonpCallback: 'jsonCallback',
contentType: "application/json",
dataType: 'jsonp',
success: function(json) {
console.log(json);
},
error: function(e) {
console.log(e);
}
});
Security Note:
Be sure that you trust the server providing the JSONP response as this method allows the page to return a script that will be executed within the context of your page. Connecting to an untrusted service could give them access to your otherwise secure information.
References
