You want to consume a list of photos from Flickr’s public photo stream and display the first three images.
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.
J Query Related Interview Questions
|HTML 4 Interview Questions||HTML Interview Questions|
|HTML 5 Interview Questions||Zend Interview Questions|
|JqueryUI Interview Questions||Dynamic HTML Interview Questions|
|XQuery Interview Questions||jQuery Mobile Interview Questions|
J Query Related Practice Tests
|HTML 4 Practice Tests||HTML Practice Tests|
|HTML 5 Practice Tests||Zend Practice Tests|
|PHP and Jquery Practice Tests||J Query Practice Tests|
|CodeIgniter Practice Tests||Dynamic HTML Practice Tests|
J Query Tutorial
Selecting Elements With Jquery
Beyond The Basics
Faster, Simpler, More Fun
Html Form Enhancements From Scratch
Html Form Enhancements With Plugins
Interface Components From Scratch
User Interfaces With Jquery Ui
Jquery Ui Theming
Jquery, Ajax, Data Formats: Html, Xml, Json, Jsonp
Using Jquery In Large Projects
All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.