488 Part III: Advanced Topics
{
var resultsDiv = $id("results");
resultsDiv.innerHTML = "";var images = response.responseXML.getElementsByTagName("photo");
for (var i=0;i<images.length;i++)
{
var image = images[i];
resultsDiv.innerHTML += "<b>" + image.getAttribute("title") + "</b><br />";
resultsDiv.innerHTML += "<img src='http://farm" + image.getAttribute("farm") +
".static.flickr.com/" + image.getAttribute("server") + "/" + image
.getAttribute("id") + "_" + image.getAttribute("secret") + "_m.jpg' /><br /><br />";
}
}window.onload = function () {
$id("requestbutton").onclick = function(){search($id("query").value);};
$id("requestForm").onsubmit = function() {return false;}
};
</script>
</head>
<body>
<div class="content">
<h1>Flickr Search: Server Proxy Version</h1><br />
<form id="requestForm" method="GET" action=
"http://ajaxref.com/ch10/proxyflickr.php" name="requestForm" >
<label>Search Term:
<input type="text" name="query" id="query" id="query" value="Schnauzer"
autocomplete="off" size="30" />
</label>
<input type="submit" id="requestbutton" value="Search" />
</form>
</div>
<br /><br />
<div id="results" class="results"></div>
</body>
</html>The result of the previous example is shown in Figure 10-1. You can run this for yourself
using the demo at http://ajaxref.com/ch10/proxyflickr.html.Data Differences
The proxy solution shouldn’t really care what the end service point returns; it just pipes it
all back for your script to consume—but it doesn’t have to. For example, if a Web Service
returned XML and we needed to consume it as JSON, we could rewrite the content in the
server proxy to deal with that. Here’s the outline of the kind of code that would do that for
our example:<?php
require_once('XML2JSON.php');
header("Cache-Control: no-cache");
header("Pragma: no-cache");
header("Content-Type: application/json");