カーセンサーラボではカタログ検索を行わせることもできます。ここでは、指定したキーワードで検索した結果を表示させてみます。
カタログを検索するには以下のURLにアクセスします。
http://www.carsensorlab.net/webapi/V1/catalogSearch/
この時にmakerまたはwordのパラメータを指定します。どちらかのパラメータは必須です。wordのパラメータで複数のキーワードを指定する場合には半角空白で区切って入力します。
カタログ情報のXMLデータの中には多くの情報が含まれています。ここではメーカー名、モデル名、グレード、カタログへのリンクを指定します。いずれもcatalog_carタグ内に含まれています。メーカー名はmaker、モデル名はmodel、グレードはgrade、リンクはlinkタグにあり、いずれも最初のノードの値にデータが記述されています。車の詳細についてはdescriptionタグ内に書かれています。サンプルではリンク文字の上にマウスを乗せた場合に概要をチップヘルプとして表示しています。（実際の
サンプルを実行する）
＊非常に反応が悪いことがあります。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 getCarInfo()
{
$("result").innerHTML = "検索中です...";
var query = encodeURIComponent($F("searchWord"));
var reqURL = "http://www.carsensorlab.net/webapi/V1/catalogSearch/?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;
catCar = xmlObj.getElementsByTagName("catalog_car");
txt = n+"件見つかりました（そのうちの"+catCar.length+"件を表示)<br><br>";
for (var i=0; i<catCar.length; i++)
{
maker = catCar[i].getElementsByTagName("maker")[0].firstChild.nodeValue
model = catCar[i].getElementsByTagName("model")[0].firstChild.nodeValue
grade = catCar[i].getElementsByTagName("grade")[0].firstChild.nodeValue
linkUrl = catCar[i].getElementsByTagName("link")[0].firstChild.nodeValue
desc = catCar[i].getElementsByTagName("description")[0].firstChild.nodeValue
txt += "<a href='"+linkUrl+"' title='"+desc+"' target='catCar'>【"+maker+"】["+model+"] ["+grade+"]</a><br>";
}
$("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="getCarInfo()">
</form>
<div id="result"></div>
</body>
</html>
[
目次へ]
(2006.6.12)