Make Jsonp Requests with AngularJs
There are a couple ways to make cross domain requests from a client browser. One method is called Jsonp or Json with padding. The AngularJs library makes this really simple.
Web Server Support
First of all, your Jsonp request will be worth nothing if the server you’re requesting data from does not support it. Jsonp requests require explicit support on the server side. This is because the data that’s returned is formatted differently. The ‘p’ in Jsonp stands for padding.
You’re probably already used to using the
$http service. It provides the normal
post and other functions mapped to http methods. It also provides the function that we’ll need:
The client script also requires that we specify the callback to send data to. AngularJs has its own callback pattern, so it would follow that it has a pattern to handle Jsonp callbacks. It does. The callback is always called
JSON_CALLBACK. What parameter that it’s assigned to in the query string depends on the design of the web service you’re calling. Take a look at the documentation on what’s required there.
All that jibber jabber for this simple example of a script asking for Tumblr data:
$http.jsonp 'http://api.tumblr.com/v2/blog/colorwheelie.tumblr.com/posts/photo?api_key=<mykey>&callback=JSON_CALLBACK' .success (data) -> $scope.colorwheelies = data.response.posts; .error (data) -> console.log('ERROR');
The interesting line is line one. We call the
jsonp function. We assign our callback like this:
callback=JSON_CALLBACK. And in our success callback, we can consume our data variable like it was pure Json.