カーセンサーラボから取得できるXMLデータ内には画像（サムネール）情報も含まれています。ここでは、指定したキーワードで検索した結果をサムネール（小）で表示させてみます。
中古車を検索するには以下のURLにアクセスします。これはこれまでと同様のアドレスです。
http://www.carsensorlab.net/webapi/V1/usedCarSearch/
この時にキーワードを指定すると、該当する中古車の情報を返します。複合条件の場合には半角空白で区切って入力します。
中古車情報のXMLデータの中に含まれる画像情報はused_carタグ内にあります。このタグの中にあるsize_sタグがサムネール（小）、size_lタグがサムネール（大）になっています。size_s、size_lタグ内の最初のノードの値がサムネール画像のあるURLになります。size_s、size_lタグの個数だけ繰り返し処理を行えば指定した台数分のサムネールを表示させることができます。台数を指定する場合にはcount=50のようにします。（実際の
サンプルを実行する）
＊非常に反応が悪いことがあります。30秒以上何も表示されないことがありますが、表示されない場合120秒くらいは待ってみてください。
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>カーセンサーラボ Ajaxサンプル</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript"><!--
function getUsedCar()
{
$("result").innerHTML = "検索中です...";
var query = encodeURIComponent($F("searchWord"));
var reqURL = "http://www.carsensorlab.net/webapi/V1/usedCarSearch/?count=50&word=";
new Ajax.Request("getXML.rb?"+reqURL+query, { method: "get", onComplete: displayData });
}
function displayData(httpObj)
{
var xmlObj = httpObj.responseXML;
total = xmlObj.getElementsByTagName("response_total_count");
n = total[0].firstChild.nodeValue;
txt = n+"件の中古車が見つかりました<br><br>";
sumCar = xmlObj.getElementsByTagName("used_car");
for (var i=0; i<sumCar.length; i++)
{
url = sumCar[i].getElementsByTagName("size_s")[0].firstChild.nodeValue
txt += "<img src='"+url+"'>";
}
$("result").innerHTML = txt;
}
// --></script>
</head>
<body>
<h1>カーセンサーラボ Ajaxサンプル (中古車検索：サムネール表示)</h1>
<form onsubmit="returen false">
<input type="text" value="青" id="searchWord"><br>
<input type="button" value="中古車検索" onClick="getUsedCar()">
</form>
<div id="result"></div>
</body>
</html>
画像を表示するだけでは、いまいちなので画像をクリックしたら中古車情報があるページにジャンプさせましょう。該当車のページへのリンクURLはused_carタグ内にあるlinkタグの最初のノードの値になります。この値を読み出してaタグのhref属性に指定します。（実際の
サンプルを実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>カーセンサーラボ Ajaxサンプル</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript"><!--
function getUsedCar()
{
$("result").innerHTML = "検索中です...";
var query = encodeURIComponent($F("searchWord"));
var reqURL = "http://www.carsensorlab.net/webapi/V1/usedCarSearch/?count=50&word=";
new Ajax.Request("getXML.rb?"+reqURL+query, { method: "get", onComplete: displayData });
}
function displayData(httpObj)
{
var xmlObj = httpObj.responseXML;
total = xmlObj.getElementsByTagName("response_total_count");
n = total[0].firstChild.nodeValue;
txt = n+"件の中古車が見つかりました<br><br>";
sumCar = xmlObj.getElementsByTagName("used_car");
for (var i=0; i<sumCar.length; i++)
{
url = sumCar[i].getElementsByTagName("size_s")[0].firstChild.nodeValue
link = sumCar[i].getElementsByTagName("link")[0].firstChild.nodeValue
txt += "<a href='"+link+"' target='userdcar'><img src='"+url+"' border='0'></a>";
}
$("result").innerHTML = txt;
}
// --></script>
</head>
<body>
<h1>カーセンサーラボ Ajaxサンプル (中古車検索：サムネール表示＆リンク)</h1>
<form onsubmit="returen false">
<input type="text" value="青" id="searchWord"><br>
<input type="button" value="中古車検索" onClick="getUsedCar()">
</form>
<div id="result"></div>
</body>
</html>
[
目次へ]
(2006.6.10)