アマゾンでキーワードを入力すると、キーワードに一致した書籍が表示されます。Webサービスでも、この仕組みは提供されておりクエリーで「Keywords=検索語」を送れば該当する書籍情報がXMLで返されます。この時にBrowseNodeを指定すると正しく動作しないのでBrowseNodeは削除しておきます。あとはテキストフィールドに入力されたキーワードをencodeURI()でエンコードしクエリーとして送ります。返されるXMLデータは、これまでのものと同じなので単純にクエリー部分の修正で済む事になります。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>アマゾン検索 (キーワード検索)</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="xmlhttp.js"></script>
<script type="text/javascript"><!--
function amazonSearch()
{
kw = $("kwd").value;
ft = $("findType").value;
httpObj = createXMLHttpRequest(displayData);
if (httpObj)
{
httpObj.open("GET","amazon.rb?findtype="+ft+"&Keyword="+encodeURI(kw)+"&cache="+(new Date()).getTime(),true);
httpObj.send(null);
}
}
function displayData()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
$("result").innerHTML = bookList(httpObj.responseXML);
}
}
function bookList(xml)
{
txt = "";
itemList = xml.getElementsByTagName("Item");
for (i=0; i<itemList.length; i++)
{
bookTitle = itemList[i].getElementsByTagName("Title")[0].childNodes[0].nodeValue;
bookPrice = itemList[i].getElementsByTagName("FormattedPrice")[0].childNodes[0].nodeValue;
bookLink = itemList[i].getElementsByTagName("DetailPageURL")[0].childNodes[0].nodeValue;
txt += '<a href="'+bookLink+'">'+ bookTitle + "</a> "+bookPrice+"<br>";
}
return txt;
}
// --></script>
</head>
<body>
<h1>アマゾン検索 (キーワード検索)</h1>
<form method="get" name="ajaxForm" onsubmit="amazonSearch();return false;">
キーワード：<input type="text" value="JavaScript" id="kwd"><br>
<select id="findType">
<option value="salesrank">売れている順に表示</option>
<option value="pricerank">価格の安い順に表示</option>
<option value="inverse-pricerank">価格の高い順に表示</option>
<option value="daterank">新しく発行された順に表示</option>
<option value="titlerank">アルファベット順に表示</option>
<option value="-titlerank">アルファベットの逆順に表示</option>
</select>
<br>
<input type="button" value="タイトル一覧表示" onClick="amazonSearch()">
</form>
<div id="result"></div>
</body>
</html>
もちろんテキストだけでなくサムネール画像もクエリー部分の変更だけで、前項で説明したスクリプトを使って表示させることができます。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>アマゾン検索 (特定キーワードのサムネール画像/タイトル表示)</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="xmlhttp.js"></script>
<script type="text/javascript"><!--
function amazonSearch()
{
kw = $("kwd").value;
ft = $("findType").value;
httpObj = createXMLHttpRequest(displayData);
if (httpObj)
{
httpObj.open("GET","amazon.rb?findtype="+ft+"&Keyword="+encodeURI(kw)+"&cache="+(new Date()).getTime(),true);
httpObj.send(null);
}
}
function displayData()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
$("result").innerHTML = bookList(httpObj.responseXML);
}
}
function bookList(xml)
{
txt = "";
itemList = xml.getElementsByTagName("Item");
for (i=0; i<itemList.length; i++)
{
bookPrice = itemList[i].getElementsByTagName("FormattedPrice")[0].childNodes[0].nodeValue;
bookLink = itemList[i].getElementsByTagName("DetailPageURL")[0].childNodes[0].nodeValue;
imageData = itemList[i].getElementsByTagName("SmallImage");
if (imageData.length > 0)
{
bookImage = imageData[0].getElementsByTagName("URL")[0].childNodes[0].nodeValue;
txt += '<a href="'+bookLink+'"><img src="'+ bookImage + '"></a> '+bookPrice+"<br>";
}else{
bookTitle = itemList[i].getElementsByTagName("Title")[0].childNodes[0].nodeValue;
txt += '<a href="'+bookLink+'">'+ bookTitle + "</a> "+bookPrice+"<br>";
}
}
return txt;
}
// --></script>
</head>
<body>
<h1>アマゾン検索 (特定キーワードのサムネール画像/タイトル表示)</h1>
<form method="get" name="ajaxForm" onsubmit="amazonSearch();return false;">
キーワード：<input type="text" value="Ajax" id="kwd"><br>
<select id="findType">
<option value="salesrank">売れている順に表示</option>
<option value="pricerank">価格の安い順に表示</option>
<option value="inverse-pricerank">価格の高い順に表示</option>
<option value="daterank">新しく発行された順に表示</option>
<option value="titlerank">アルファベット順に表示</option>
<option value="-titlerank">アルファベットの逆順に表示</option>
</select>
<br>
<input type="button" value="タイトル一覧表示" onClick="amazonSearch()">
</form>
<div id="result"></div>
</body>
</html>
ここまでは書籍情報を表示してきましたが、アマゾンでは書籍以外にも多くの商品を扱っています。そこで次項では同様の手法でDVDを取り扱ってみます。
[
第八章 5:DVD一覧を表示するへ]
[
目次へ]
(2006.1.24)