カーセンサーラボから取得できるXMLデータ内には中古車に関する情報が多く含まれています。ここでは、指定したキーワードで検索した結果、ヒットした件数がどのくらいあったかを表示させてみます。
中古車を検索するには以下のURLにアクセスします。
http://www.carsensorlab.net/webapi/V1/usedCarSearch/
この時に「赤」や「トヨタ」などのキーワードを指定すると、該当する中古車の情報を返します。複合条件の場合には半角空白で区切って入力します。ヒットした結果、何件あったかはresponse_total_countタグの最初のノードに記述されています。このノードの値を表示すればよいことになります。（実際の
サンプルを実行する）
＊非常に反応が悪いことがあります。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/?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+"件の中古車が見つかりました";
$("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>
返される情報の中には年式によって、何件ヒットしたかも含まれています。年式別の件数はsummary_yearタグ内に含まれるyearタグの最初のノード値になります。yearタグは他のタグ内でも利用されているのでsummary_yearタグ内のyearタグのみをgetElementsByTagNames()で取得する必要があります。あとは、yearタグの数だけ繰り返し処理を行えば、年式別の件数が表示されます。（実際の
サンプルを実行する）
＊非常に反応が悪いことがあります。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/?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>";
sumYear = xmlObj.getElementsByTagName("summary_year");
year = sumYear[0].getElementsByTagName("year");
for (var i=0; i<year.length; i++)
{
y = year[i].getElementsByTagName("value")[0].firstChild.nodeValue
cnt = year[i].getElementsByTagName("count")[0].firstChild.nodeValue;
txt += y + "年式は"+cnt+"件あります<br>";
}
$("result").innerHTML = txt;
}
// --></script>
</head>
<body>
<h1>カーセンサーラボ Ajaxサンプル (中古車検索2)</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)