ここでは宿が検索された際に宿名と宿の情報ページへのリンクを指定します。それぞれの宿の情報はHotelタグ内に格納されています。宿名はHotelタグ内にあるHotelNameタグの最初のノードの値を読み出す事で取得できます。（実際の
サンプルを実行する）
<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 getList()
{
var pref = "160000"; // 160000は長野県
var reqURL = "http://jws.jalan.net/APILite/HotelSearch/V1/?key=guest&pref="+pref;
new Ajax.Request("getXML.rb?"+reqURL, { method: "get", onComplete: displayData });
}
function displayData(httpObj)
{
var xmlObj = httpObj.responseXML;
var n = xmlObj.getElementsByTagName("NumberOfResults")[0].firstChild.nodeValue;
var txt = "合計"+n+"件見つかりました<br><ol>";
var hotel = xmlObj.getElementsByTagName("Hotel");
for (var i=0; i<hotel.length; i++)
{
var hName = hotel[i].getElementsByTagName("HotelName")[0].firstChild.nodeValue;
txt += "<li>"+hName;
}
$("result").innerHTML = txt;
}
// --></script>
</head>
<body>
<h1>じゃらん Ajaxサンプル（宿名表示）</h1>
<a href="http://jws.jalan.net/">じゃらん Web サービス</a>
<form>
<input type="button" value="宿検索" onClick="getList()">
</form>
<div id="result"></div>
</body>
</html>
次に表示された宿名をクリックしたら該当する宿情報の詳細ページが表示されるようにします。Ajaxでは戻るボタンが使用された場合、検索結果が消えてしまうので新しくウィンドウを開いて表示することにします。宿情報ページへのリンクURLはHotelタグ内にあるHotelDetailURLタグの最初のノードの値になります。この値を読み出してaタグに適用すればできあがりです。（実際の
サンプルを実行する）
<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 getList()
{
var pref = "160000"; // 160000は長野県
var reqURL = "http://jws.jalan.net/APILite/HotelSearch/V1/?key=guest&pref="+pref;
new Ajax.Request("getXML.rb?"+reqURL, { method: "get", onComplete: displayData });
}
function displayData(httpObj)
{
var xmlObj = httpObj.responseXML;
var n = xmlObj.getElementsByTagName("NumberOfResults")[0].firstChild.nodeValue;
var txt = "合計"+n+"件見つかりました<br><ol>";
var hotel = xmlObj.getElementsByTagName("Hotel");
for (var i=0; i<hotel.length; i++)
{
var hName = hotel[i].getElementsByTagName("HotelName")[0].firstChild.nodeValue;
var url = hotel[i].getElementsByTagName("HotelDetailURL")[0].firstChild.nodeValue;
txt += "<li><a href='"+url+"' target='hotel'>"+hName+"</a>";
}
$("result").innerHTML = txt;
}
// --></script>
</head>
<body>
<h1>じゃらん Ajaxサンプル（宿名表示＆リンク）</h1>
<a href="http://jws.jalan.net/">じゃらん Web サービス</a>
<form>
<input type="button" value="宿検索" onClick="getList()">
</form>
<div id="result"></div>
</body>
</html>
[
目次へ]
(2006.6.18)