Check out my latest project: Full Frontal JavaScript Conference

What is JSONP?

jQuery 1.2 introduced JSONP support, but on initial read of the release notes, I wasn't completely sure what it was - so for anyone else that might want the Dr Seuss explanation.

JSONP is script tag injection, passing the response from the server in to a user specified function

How you can use JSONP

You need to mould both your request and response to handle JSONP - and in doing so, you can have cross domain JSON requests.

Your server will need to return the response as JSON, but also wrap the response in the requested call back, something like this in PHP (hosted on http://myotherserver.com):

$data = getDataAsJSON($_GET['id']);
echo $_GET['jsonp_callback'] . '(' . $data . ');';
// prints: jsonp123({"name" : "Remy", "id" : "10", "blog" : "http://remysharp.com"});

The jQuery script would be:

$.ajax({
  dataType: 'jsonp',
  data: 'id=10',
  jsonp: 'jsonp_callback',
  url: 'http://myotherserver.com/getdata',
  success: function () {
    // do stuff
  },
});

jQuery will change the url to include &jsonp_callback=jsonpmethod - but you can exclude it and it default to just 'callback'.

Example in the Wild

Twitter's JavaScript blog plugin works in exactly the same way. You create a function to handle the data from Twitter, and insert a script tag. Once the script is inserted, it calls the function passing the Twitter data as a JSON object.

How it works in jQuery

jQuery attaches a global function to the window object that is called when the script is injected, then the function is removed on completion.

Note that if the request is being made to the same domain, then jQuery will switch it down to a straight Ajax request.

Potential Problems

  1. Security. There's documents out on the web that can help, but as a cursory check, I would check the referrer in the server side script.
  2. There's no error handling. The script injection either works, or it doesn't. If there's an error from the injection, it'll hit the page, and short of a window wide error handler (bad, bad, very bad), you need to be sure the return value is valid on the server side.

25 Responses to “What is JSONP?”

  1. Shameless plug for my jsonp plugin here: http://code.google.com/p/jquery-jsonp/

    Thought it was relevant ;)

  2. I've been trying to use JSONP and it is very confusing. Not one example I've seen explains it totally.

    What is "getdata" in your URL? I have a page and I'm displaying a page on another domain inside a frame. The page is a search engine results page which is hosted by another site.

    What I want to do is make AJAX calls that return HTML and JSON from within the hosted page (inside a frame in my main page) via JavaScript that is on my webserver.

    From what I can tell, JSON-P will do the trick but I'm finding it difficult to understand the examples I've seen due to things not being explained completely.

    Any help?

  3. Remy, you're a godsend. After hours of searching you have finally shown me the light with this 1 line:

    echo $_GET['jsonp_callback'] . '(' . $data . ');';

    Nobody was properly explaining how the server-side needed to prepend the callback variable.

    Thanks again.

  4. best one line explanation of JSONP i've seen. thanks.

  5. Thanks for the example, however, there were a couple things I didn't understand.

    First, Is getdata your PHP file?

    Second, getDataAsJSON is not a PHP function and there seems to be almost no documentation on it.

    Thanks

Leave a Reply
Not required

CODE: Please escape code and wrap in <pre><code>, doing so will automatically syntax highlight