JSONP example with BackboneJS


Jan 2015

The idea of JSONP API’s is nice: Many Ajax applications can’t fetch JavaScript objects from a remote domain due to cross-domain policy concerns. But, JavaScript web apps can easily fetch remote JavaScript libraries. So, by using JSONP, we pretend fetching a library, while we actually are interested in the data.

Unfortunately, JSONP has some security flaw in the context of CSRF (cross-site request forgery). A 3rd user could make HTTP requests on your behalf, because a server would trust your cookie. I am not a security expert, but many JSONP API providers disable writing.

For simple projects, JSONP can make sense however - for example, if you would like to provide a nicer UI to someone else’s data in Wordpress. This was a question of some reader of The Pipefishbook. So, let’s look at a Backbone.Collection that reads data with JSONP.

Ajax requests

Fetching data with an Ajax request is easy:


jQuery Ajax requests help you very much to wrap a JSONP request for data too. For the details, you can search npmjs.org for JSONP. You’ll find a JSONP module and the according tricks. Append a <script> tag, and point the source towards your remote data.

A Backbone.Collection can deal with those requests too. Let’s look an example based on the Flickr API.

Browsing images with JSONP

Let’s look at a small example to browse photos from Flickr. You can see the full source code at Github.

This demo is based on a parameterized Backbone.Collection. Wrapping Ajax requests is an important responsibility of the Backbone data layer. So, let’s look at a collection to fetch photos with JSONP.

It is important to add a “dataType” parameter to the Ajax request. This parameter is then passed to te jQuery Ajax call:

 sync: function(method, collection, options) {
   options.dataType = "jsonp";
   options.jsonpCallback = "jsonpCallback";
   return Backbone.sync(method, collection, options);

And this is already all. The rest of the the example uses much of the same view construction and controls as in Ch. 4 example of the Pipefishbook. A subviews for control and a list view share the same collection. Collection are fetched just upon request (= button click).

A nice extra for this post: Sometimes, you have a JSON API that you can’t directly access due to cross-policy browser concerns. Fortunately, there is a proxy from Nodejitsu to emulat e JSONP request. This allows you to easily fetch data from JSON API without setting up a proxy yourself.

Leave me feedback

comments powered by Disqus