ここでは物件の詳細情報を表示します。物件の詳細情報はitemタグ内にあるdescriptionタグの最初のノードの値を読み出す事で取得できます。あとは、スタイルシートを使って見栄えを設定すればできあがりです。（実際の
サンプルを実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Smatch! Ajaxサンプル</title>
<style type="text/css"><!--
.bTitle {
background-color:#afe1ee;
color:white;
font-size:11pt;
border:1px solid gray;
width:628px;
margin:0px 0px 20px 0px;
padding:0px 4px 4px 4px;
}
.bInfo {
background-color:#eee;
color:#333;
font-size:9pt;
}
--></style>
<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><br>";
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;
var descTag = itemTag[i].getElementsByTagName("description");
var descText = descTag[0].firstChild.nodeValue;
txt += "<div class='bTitle'><a href='"+bLink+"' target='house'>"+title+"</a>";
txt += "<div class='bInfo'>"+descText+"</div></div>";
}
$("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.18)