Using jQuery and JSONP - J Query

Problem
You want to consume a list of photos from Flickr’s public photo stream and display the first three images.

Solution

Discussion

Security is a critical issue when building a website or application and especially so with the advent of Ajax. Web browsers have enforced a same origin policy on requests, which means that you’re restricted to making requests to the same domain as the page’s URL or a sub domain of the current domain. So, for example, a page served from http://www.example.com is allowed to make Ajax requests to http://www.example.com and http://x.www.example.com but not http://example.com or http://y.example.com. As the semantic Web emerged and websites such as Flickr started exposing an API for other users and services to consume, the security policy enforced by web browsers became a hindrance. One area that has never had same origin policies was the use of the script element with a src attribute. It’s possible for http://www.example.com to include a script from http://static.example2.com, but the issue of dynamically including that script and managing program flow became an issue. Thus, JSONP emerged as a standard to overcome the same origin limitation.
JSONP makes use of requesting data through a <script>tag with a src attribute as well as manages the program flow for the developer by wrapping the data in a callback function that the developer can implement. Let’s first look at a sample JSON message.

Here is the same message wrapped in a callback:

What this allows for is when the resource is requested upon being loaded in the browser the my Call back function will be called and have the JSON object passed in as the first argument. The developer can then implement the my Callback function as follows to process the data:

Now let’s review our Flickr solution. First we define the URL of the Flickr web service followed by declaring a params object for the get variables. The json callbackparam is a special param defined by the Flickr service that allows for us to pass in a function name. Since we’ve set this parameter to a ?, jQuery will automatically generate a function name and bind it with our callback method.

Next, we call jQuery’s$.getJSON() method, passing in our url, params, and our callback function, which will accept a JSON object. In our callback method, we check and make sure that an item’s array exists and then use jQuery’s$.each() to iterate over the first three items, create a link, append an image to it, and then append the link to an element with an ID of photos. Finally, our callback function will return false on the third iteration (when i = 2), breaking the loop.

With the combination of the JSON data format and the cross-domain capabilities of JSONP, web developers are able to create new applications aggregating and transforming data in new and innovative ways and growing the semantic Web.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

J Query Topics