WHOAHBOT!

JSONP, and the manchurian candidate

Got any coffee? No? Click [Coffee?] for the brew of the day.

Good. Now lean back, and let me tell you how you just put the manchurian candidate of cupcakes into your window object. (Don’t look now, he’s gone).

JSON is a fantastical data structure, coalesced into being by one of the few people on the planet that think that JavaScript is a wonderful and mellifluous language to write in. Well, maybe he only likes the Good Parts.

But until Crockford’s JSONRequest is widely implemented, what we have to work with for cross site mashups is the blackest of black arts. There are secret handshakes for you to grasp and grip. A mysterious contract hitter called JSONP, or JSON with ‘Padding’. I will tell all fingerings of the handshakes in time, but first, I want you to meet your browser window:

A cheerful fellow. Happy-go-lucky. Ties his shoes the same way every morning. But something lurks beneath his frosted grin. Yes, our friend here is highly suggestible, he buys the new car AND the undercoating. Poor fellow, we’ll imprint him with a secret phrase when we initiate a JSONP request.

I think our brothers in arms at jQuery said it best when they said:

// Handle JSONP-style loading
window[ jsonp ] = function(tmp){
	data = tmp;
	success();
	complete();
	// Garbage collect
	window[ jsonp ] = undefined;
	try{ delete window[ jsonp ]; } catch(e){}
	if ( head )
		head.removeChild( script );
};

Whoah! What was that that just whizzed by? Did our tasty friend get a new function planted in his cake? Yes! And when the secret word is mouthed at the dinner party he’s attending, he screams forth his JSON object literal! Layered cakes are not to be trusted.

When the ajax request went out, it looked like this: http://stumptowner.whoahbot.com/?callback=jsonp1236556779135. When it came back, it called the secret function ‘jsonp1236556779135’ thusly:

jsonp1236556779135({"coffee":"Pallat of Panama Manifested",
  "country":"Panama","elevation":"2935 - 3317 Meters",
  "varietal": "Chai and Chai",
  "flavors":"Fragrance of bacon, pie and mango delivering a silken mouth feel."
  })
};

In the snippet above, window[jsonp] is a function that takes one argument. That argument is the JSON data returned from the AJAX call.

What’s going on here? Why would someone do this? Why a cupcake for the love of confectioner’s sugar! The problem lies buried in cross-border passport restrictions for XMLHTTPRequests. Cross-domain ajax requests are forbidden by your browser’s same-origin policy and the internet gestapo.

This is most distressing for us that want to make hilarious JSON mashup datasources! And so, Bob Ippolito proposed an ad-hoc standard that neatly dances through checkpoint charlie.

For those that are about to JSONP, here is how we salute you:

$.getJSON("http://stumptowner.whoahbot.com/?callback=?", function(data) {
  $('.something').append("<div class='coffee'>" + data["coffee"] + "</div>").
  append("<div class='elevation'>" + data["elevation"] + "</div>").
  append("<div class='varietal'>" + data["varietal"] + "</div>").
  append("<div class='flavors'>" + data["flavors"] + "</div>")
});

Your friendly neighborhood jQuery.getJSON function, or it’s big brother $.ajax, will replace the callback=? in the url parameter with an automatically generated callback function name. Tra-la!

Next up, constructing iron-curtain subversive JSONP (P for propaganda) web-services using Rack!

[ Twoddle ]