ここでは物件が検索された際に物件名と物件へのリンクを指定します。各物件の情報はitemタグ内に格納されています。物件名はitemタグ内にあるtitleタグの最初のノードの値を読み出す事で取得できます。（実際の
サンプルを実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Smatch! Ajaxサンプル</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript"><!--
function getList()
{
var q = "%93%8C%8B%9E"; // 東京の文字のSHIFT JISコード
var sType = "SE=010"; // 表示種別
var maxPrice = "KAMIX=4000"; // 物件価格上限
var reqURL = "http://search.smatch.jp/smatch/getBukkenInfo.do?QUERY="+q+"&"+sType+"&"+maxPrice;
new Ajax.Request("getXML.rb?"+reqURL, { method: "get", onComplete: displayData });
}
function displayData(httpObj)
{
var xmlObj = httpObj.responseXML;
var resTag = xmlObj.getElementsByTagName("resultset")[0];
var n = resTag.getAttribute("totalhits");
var txt = "合計"+n+"件の物件があります<br><ol>";
var itemTag = xmlObj.getElementsByTagName("item");
for (var i=0; i<itemTag.length; i++)
{
var titleTag = itemTag[i].getElementsByTagName("title");
var title = titleTag[0].firstChild.nodeValue;
txt += "<li>"+title;
}
$("result").innerHTML = txt;
}
// --></script>
</head>
<body>
<h1>Smatch! Ajaxサンプル (物件情報表示)</h1>
<form>
<input type="button" value="物件情報取得" onClick="getList()">
</form>
<div id="result"></div>
</body>
</html>
次に表示された物件名をクリックしたら該当する物件情報の詳細ページが表示されるようにします。Ajaxでは戻るボタンが使用された場合、検索結果が消えてしまうので新しくウィンドウを開いて表示することにします。物件ページへのリンクURLはitemタグ内にあるlinkタグの最初のノードの値になります。この値を読み出してaタグに適用すればできあがりです。（実際の
サンプルを実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Smatch! Ajaxサンプル</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript"><!--
function getList()
{
var q = "%93%8C%8B%9E"; // 東京の文字のSHIFT JISコード
var sType = "SE=010"; // 表示種別
var maxPrice = "KAMIX=4000"; // 物件価格上限
var reqURL = "http://search.smatch.jp/smatch/getBukkenInfo.do?QUERY="+q+"&"+sType+"&"+maxPrice;
new Ajax.Request("getXML.rb?"+reqURL, { method: "get", onComplete: displayData });
}
function displayData(httpObj)
{
var xmlObj = httpObj.responseXML;
var resTag = xmlObj.getElementsByTagName("resultset")[0];
var n = resTag.getAttribute("totalhits");
var txt = "合計"+n+"件の物件があります<br><ol>";
var itemTag = xmlObj.getElementsByTagName("item");
for (var i=0; i<itemTag.length; i++)
{
var titleTag = itemTag[i].getElementsByTagName("title");
var title = titleTag[0].firstChild.nodeValue;
var linkTag = itemTag[i].getElementsByTagName("link");
var bLink = linkTag[0].firstChild.nodeValue;
txt += "<li><a href='"+bLink+"' target='house'>"+title+"</a>";
}
$("result").innerHTML = txt;
}
// --></script>
</head>
<body>
<h1>Smatch! Ajaxサンプル (物件情報表示+リンク)</h1>
<form>
<input type="button" value="物件情報取得" onClick="getList()">
</form>
<div id="result"></div>
</body>
</html>
[
目次へ]
(2006.6.17)