JSONP, Quickly

I discovered JSONP just recently, following Chriscomment. Though I initially didn’t intend to support JSON, JSONP made enough difference that I rewrote most of the TheRealURL code (all 20 lines of it) to support it. Since it took me some time to figure out JSONP initially, perhaps a quick guide might help those who follow.

JSONP allows you to make an HTTP request outside your own domain, which enables consuming Web Services from JavaScript code. It relies on a JS quirk: while XMLHttpRequest is blocked from making external requests, there’s no such limit on <script> elements. What JSONP does is add a <script src=> element to the DOM, with the external URL as the SRC target.

To serve JSONP simply return the JSON data inside a function. e.g., this JSON:

{ "hello" : "Hi, I'm JSON. Who are you?"}

Becomes:

some_function({ "hello" : "Hi, I'm JSON. Who are you?"})

(The reason is that the latter is actually code that will run inside the created by the JSONP client, so it needs to be executable code rather than plain JSON data)

some_function is provided by the calling client, usually in the 'callback' parameter. So, a query like this:

get_jsonp?callback=getthedata

Should return:

getthedata({ "hello" : "Hi, I'm JSON. Who are you?"})

On the server side, this means adding some code similar to this:

// assume $json holds the JSON response
if ($GET['callback'] != '') $json = $GET['callback']."( $json )"; 
return $json;   // my PHP is rusty but you know what I mean

On the client side, modern JS frameworks include JSONP support (or you can DIY). For example, in jQuery <= 1.2 adding &callback=? to the query string in getJSON method's URL sends a JSONP request.(jQuery transparently replaces the '?' with a unique string). Here's how you get the unshortened URL for 'bit.ly/a' using therealurl:

$.getJSON("http://therealurl.appspot.com?format=json&amp;url=bit.ly/q&amp;callback=?", 
	function(data){ alert(data.url) }
);

That's about it. JSONP probably won't feature in the next Beautiful Code edition and obviously you need to watch the URLs you're accessing so you don't get malicious JS code executed, but, until cross site XHR is resolved, JSONP can get the job done.

About these ads

12 thoughts on “JSONP, Quickly

  1. What you call JSONP has been a standard practice at YAHOO! for some time.

    http://developer.yahoo.com/common/json.html

    One needs to be cautious with this sort of usage though, as you’re essentially trusting a third party to provide you with code. Even if you’re the author of the proxy you could easily suffer from man-in-the-middle attacks if someone can intercept and send you more malicious code.

    Of course, that’s true of all third-party linked javascript.

    Reply
    • That’s definitely the better way – JSONP is really temporary solution until client/server support for cross-origin requests is more widespread.

      Reply
  2. Pingback: Top Posts « WordPress.com

  3. Pingback: Beta version of the HathiTrust Volumes API available » Robot Librarian

  4. Pingback: Cross-origin data access from JavaScript « Seize the Moment of Excited Curiosity for the Acquisition of Knowledge

  5. Pingback: Making cross domain call using JSONP (JSON with padding) « Nishant Rana's Weblog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s