When building Web based Flex applications, one of the common pitfalls is that the API you consume does not provide you with a crossdomain policy file and as a result, your Flex application cannot call directly to the application due to the Security Sandbox. (AIR applications does not have this Security issue)
One of the solution to this problem is using a proxy on your server, proxying the call to the API via your server. What the server does is to simply create a GET / POST request to the original endpoint and proxy back to the flex application all the results.
However, this solution will pose a problem in terms of scaling as all the request, originally meant to only goes to third-party API website, now actually goes through your server.
Enter JSONP
The preceding solution is one of the most common approach I used to use in most of my previous Mashup. However, after research AJAX, GWT and having a chat with my colleague from Seesmic, Matthew Eernisse, who is a Javascript and Ruby guru, I realize the power of JSONP and the simplicity of it working together with Flex to create mashup.
JSONP basically means JSON with Padding. From Wikipedia, it is defined as “JSONP or “JSON with padding” is a JSON extension wherein the name of a callback function is specified as an input argument of the call itself.
In the nutshell, it means you will have something like this:
<script src="http://books.google.com/books?jscmd=viewapi&bibkeys=ISBN9780596529857&callback=onresults">with a function “onresults”
Together with Flex, you will have to use document.createElement(”script”) and then setAttribute to set the src. When the results are returned from the third-party endpoint, the specified function will be invoked. You can then parse the data, and simply put the data back to Flex.
JSONP, JQuery and External Interface
One of the usage of JSONP in a recent Flex application I have done is the TAC Preorder Form. The Preorder Form is a books ordering form for our sponsor Oreilly for The Actionscript Conference. Oreilly has provided us with a list of books’ ISBN number. Hoping that the users can actually browse the books cover and content first, I decide to pull in date from Google Books API, which provide information of the books’ thumbnail, as well as a preview page where the users can browse the books first few chapters first
The issue with the API is that there is no crossdomain policy file. Thus, the only way to call it is either using a server-side proxy or JSONP. I decide to go with JSONP for simplicity purpose, as well as to take load off the server.
Using JQuery, JSONP is extremely simple. The following codes shows an example of calling Google Books API.
$.getJSON("http://books.google.com/books?jscmd=viewapi&bibkeys=ISBN"+isbn+"&callback=?", function(data){ var bookInfo = data["ISBN" + isbn]; bookInfo.isbn = isbn; //bookapp is a SWF with External Interface "getBookCallback" function document.getElementById('bookapp').getBookCallback(bookInfo); });
Essentially with JQuery, we can easily do away with the hassle of manually creating the javascript tag . We also need not to add codes to manually removing it upon completion. The build in “getJSON” method does it all. Upon completing the request, the callback function will be called, and we will pass the json object right back to Actionscript. Code as follows:
//constructor public function PreorderClass() { super(); //initialize Cairngorm model model = AppModelLocator.getInstance(); //create a getBookCallback function for Javascript to call this SWF ExternalInterface.addCallback("getBookCallback", getBookCallback); } private function getBookCallback(e:*):void { /* The Javascript object automatically becomes Actionscript Object with the following properties bib_key embeddable info_url preview preview_url thumbnail_url isbn */ //using Cairngoem model and a custom vo "BookVO" var book:BookVO = model.getBook(e.isbn); book.thumbnail_url = e.thumbnail_url; book.preview_url = e.preview_url; }
Summary
Matthew pointed out to me a few shortcoming of JSONP. Firstly, there is no error handling. If the API endpoint is un-responsive, then you will not get any errors. The callback function will simply not be called at all. Thus, it is essential for developers to implement timeouts for their calls.
Secondly, if you are not using JQuery, the developer has to ensure that any codes that add a new javascript tag for JSONP, has to remove the javascript tag after the call has been completed.
In short, if you are creating a Web base Flex, JSONP provides you with a quick and easy way to call endpoint without crossdomain policy files, removing the hassle of setting up a server solution to proxy the request. Using JQuery, empower you to create JSONP calls within a few lines and then using External Interface to get the results back to the main Flex application.
Happy Mashing!
Keynote? 280 Slides?
