JSONP. 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. Note that for JSONP to work, a server must know how to reply with JSONP-formatted results. JSONP does not work with JSON-formatted results. The JSONP parameters passed as arguments to a script are defined by the server.
A typical JSONP request is similar to the following sample code: <! How it works[edit] To see how this technique works, first consider a URL request that returns JSON data. This JSON data could be dynamically generated, according to the query parameters passed in the URL. Here, a HTML <script> element specifies for its src attribute a URL that returns JSON: In this example, the received payload would be: Padding[edit] Rosetta Flash[edit] JSON and the Dynamic Script Tag: Easy, XML-less Web Services for JavaScript.
December 21, 2005 Making requests to third-party web services from an AJAX application is a pain, but new web services that offer the option of returning JSON (JavaScript Object Notation) instead of XML can provide significant relief. In fact, if you make web services requests using the dynamic script tag approach -- and the web service lets you specify a JavaScript callback function -- you can have unfettered access to the web service in a seamless, cross-domain, cross-browser fashion. Here's what you need to try out this dynamic script tag request: To create my class, I distilled a lot of existing information, and then adapted it to fit no. 2 above. Until recently, finding a web service that returns JSON and lets you specify a callback function was, well, darn near impossible unless you wrote one yourself.
Fortunately, Yahoo recently has offered the option on many of their REST-ish web services. The KISS Factor Compared to using the XMLHttpRequest object and a proxy, this stuff is easy. JSONRequest. Using PUT/POST/DELETE with JSONP and jQuery. JSONRequest Proposal. GetJSON. Description: Load JSON-encoded data from the server using a GET HTTP request. This is a shorthand Ajax function, which is equivalent to: Data that is sent to the server is appended to the URL as a query string. If the value of the data parameter is a plain object, it is converted to a string and url-encoded before it is appended to the URL. Most implementations will specify a success handler: This example, of course, relies on the structure of the JSON file: Using this structure, the example loops through the requested data, builds an unordered list, and appends it to the body. The success callback is passed the returned data, which is typically a JavaScript object or array as defined by the JSON structure and parsed using the $.parseJSON() method.
As of jQuery 1.5, the success callback function receives a "jqXHR" object (in jQuery 1.4, it received the XMLHttpRequest object). Important: As of jQuery 1.4, if the JSON file contains a syntax error, the request will usually fail silently.