494 Part III: Advanced Topics
As you can see, this response performs its own callback, so to speak, by invoking
handleResponse(). This function then takes the passed object and creates the <img> tags
to fetch the images of interest from Flickr.function handleResponse(response)
{
var resultsDiv = $id("results");
resultsDiv.innerHTML = "";
if (response.stat == "ok")
{
var images = response.photos.photo;
for (var i=0;i<images.length;i++)
{
var image = images[i];
resultsDiv.innerHTML += "<b>" + image.title + "</b><br />";
resultsDiv.innerHTML += "<img src='http://farm" + image.farm +
".static.flickr.com/" + image.server + "/" + image.id + "_" + image.secret
+ "_m.jpg' /><br /><br />";
}
}
else
resultsDiv.innerHTML = "<h2>An error has occurred</h2>";
}The complete code is shown next and demonstrated in Figure 10-3. A live example can
be found at http://ajaxref.com/ch10/scriptflickr.html.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Chapter 10 : Flickr Web Service Search using Script-JSON</title>
<link rel="stylesheet" href="http://ajaxref.com/ch10/global.css" type="text/css"
media="screen" />
<script src="http://ajaxref.com/ch10/ajaxtcr.js" type="text/javascript"></script>
<script type="text/javascript">
var flickrConfig = {
method : "flickr.photos.search",
api_key : "dc-FAKE-KEY-HERE-GET-YOURS-250a",
safe_search : 1,
per_page : 10,
content_type : 1,
format : "json",
jsoncallback : "handleResponse"
};function search(searchterm)
{
if (searchterm == "")
{
alert("You must enter a search term");
return;
}