検索で見つかった宿数を表示する

 じゃらんが用意しているAPIを使ってみます。じゃらんが提供しているサービス内容についてはじゃらんnet宿表示AIについてのページを参照してください。
 まずは簡単なところで、じゃらんが提供する宿情報を取得してみます。宿情報を取得するには以下のURLにアクセスします。

http://jws.jalan.net/APILite/HotelSearch/V1/

 次にURLパラメータに、求める宿情報に必要なデータを付加します。じゃらんで利用できるパラメータに関してはじゃらんWebサービス- じゃらん宿表示APIを参照してください。また、キーはguestを指定します。キーは利用期間が限定されているとあり2006年9月30日23時59分までとなっているようです。
 ここでは「長野県」内という条件で宿検索を行います。FirefoxやIEで以下のURLにアクセスするとXMLドキュメントツリーで見ることができます。Safariなどでは見ることができないのでSafariの場合には以下のサンプルを実行するとXMLデータを見ることができます。(実際のサンプルを実行する

http://jws.jalan.net/APILite/HotelSearch/V1/?key=guest&pref=160000

<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)
{
$("result").innerText = httpObj.responseText;
$("result").textContent = httpObj.responseText;
}
// --></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>

 それではXMLデータから該当した宿総数を取得してみましょう。検索結果で得られた宿情報の総数はNumberOfResultsタグ内にある最初のノードの値になります。これを読み出せば検索で見つかった宿の総数を表示させることができます。(実際のサンプルを実行する


<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;
$("result").innerHTML = "合計"+n+"件見つかりました";
}
// --></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)