CS 120, Fall 2012, Lab 14:
Flickrin' with JSONP
This lab is just one short exercise that you will finish during the lab period. You should show me your finished exercise before leaving. You will get 15 points for being in lab and doing the work.
To begin the lab, get a copy of the files in /classes/cs120/lab14-files. You will work on the file flickr.html. This file serves as an example of using a technique known as JSONP, and it already does something interesting. You just have to improve it by adding some user interactivity.
Background: Accessing a Flickr Feed
As you know, AJAX has a security policy known as the "same origin policy." This means that a web page can only send AJAX requests to the same web server from which the web page was loaded. However, there is a technique that avoids this restriction. It is called JSONP, and it uses JSON for communicating with the server in a different way than regular AJAX requests. Fortunately, you don't have to know how it works. JQuery does the work for you. What you need to know is that there are some publicly available data sources that use JSONP. One of them is Flickr's "recent public photos" data feed.
Flickr is a photo-sharing site, where people can post their pictures. Users "tag" the pictures with words that can be used to search for pictures. The recent-public-photo feed contains a list of up to 20 pictures that match a specified tag or tags.
The feed data can be retrieved using JSONP. JQuery actually does JSONP using the same $.getJSON function that is used for regular AJAX requests. JQuery recognizes JSONP requests automatically, because the URLs that are used for JSONP have a special form.
The dataToSend object for the JSONP Flickr feed requires two properties: tags and format. The format must be "json". The value of tags is the tag that will be searched for or a list of tags separated by commas. In the original page, the value for tags is "redsox", which means that Flickr will return a list of pictures related to the Red Sox. You could change "redsox" to a different string to search for a different tag. In the lab exercise, you will make it possible for the user of the web page to specify the search tag.
For the purposes of this lab, you don't need to understand the format of the data that Flickr sends back to the page. The data that is returned is processed in the function responseFunction, and you do not need to modify that function.
(Note: This lab is based on an example in the JQuery documentation at jquery.com.)
Exercise: Add Interactivity
Your exercise is very simple: Add an <input> box and a <button> to the page. The user will enter the tag or tags that they want to search for in the input box. When they click the button, you should call the function getPhotos().
You have to change the getPhotos function so that instead of using "redsox" as the value of dataToSend.tags, it should use the text entered into the input box by the user.
Since the user needs to have a chance to enter some text before you send the request to Flickr, you should remove the onload="getPhotos()" from the <body> tag. You should also change the text in <h3 id="title">, since you won't be loading images when the page first loads.
Finally, you should add code to function getPhotos to change the innerHTML of <h3 id="title"> back to "Loading images from Flikr...". This lets the user knows that something is going on. You might also disable the button while waiting for the response, but that is not required for this exercise.
(Note that the user can enter either a single term or a list of terms separated by commas.)