画像形式を指定して検索する

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript"><!--
function YahooSearch()
{
srchStr = $("queryString").value;
if (srchStr == "") return;
var imageFormat = $("fmt").value;
var url = "yahoo.rb?query="+encodeURI(srchStr)+"&format="+imageFormat+"&cache="+(new Date()).getTime();
new Ajax.Request(url, { method: 'get', onComplete: displayData });
$("result").innerHTML = "検索中です...";
}
function displayData(httpObj)
{
var txt = "";
var xmlData = httpObj.responseXML;
var tagResult = xmlData.getElementsByTagName("Result");
var tagThumbnail = xmlData.getElementsByTagName("Thumbnail");
for (var i=0; i<tagThumbnail.length; i++)
{
urlList = tagThumbnail[i].getElementsByTagName("Url");
urlClick = tagResult[i].getElementsByTagName("ClickUrl");
imgLink = urlList[0].firstChild.nodeValue;
imageLink = urlClick[0].firstChild.nodeValue;
txt += '<a href="'+imageLink+'"><img src="'+imgLink+'"></a>';
}
$("result").innerHTML = txt;
}
// --></script>
</head>
<body>
<h1>Yahoo画像検索 (画像形式を指定)</h1>
<p><a href="http://developer.yahoo.co.jp/">Web Services by Yahoo! JAPAN</a></p>
<form onsubmit="YahooSearch();return false;">
<input type="text" value="宇宙" id="queryString">
<select id="fmt">
<option value="any">全ての形式</option>
<option value="bmp">BMP形式</option>
<option value="gif">GIF形式</option>
<option value="jpeg">JPEG形式</option>
<option value="png">PNG形式</option>
</select>
<input type="submit" value="Yahoo画像検索">
</form>
<div id="result"></div>
</body>
</html>
・サンプルを実行する
Ajax逆引きクイックリファレンス　説明などは本書を参考にしてください。