天気概況を表示する

 天気概況はリクエストパラメーターにdayを指定した場合に返されるXMLデータ内に含まれています。dayパラメーターを指定しない場合には天気概況は含まれません。
 天気概況はdescriptionタグの最初のノードになります。ただし、全文が含まれているわけではなく途中で切れているような感じになります。descriptionタグの最初のノードを読み出して表示すれば、指定した都市の天気概況が表示されます。(サンプルを実行する

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>お天気Webサービスを利用する</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript"><!--
function checkWeather()
{
city = $("cityNo").value;
sURL = "curl.rb?city="+city+"&cache="+(new Date()).getTime();
new Ajax.Request(sURL, { method: "get", onComplete: displayData });
}
function displayData(httpObj)
{
XML = httpObj.responseXML;
$("result").innerHTML = XML.getElementsByTagName("telop")[0].firstChild.nodeValue;
$("description").innerHTML = XML.getElementsByTagName("description")[0].firstChild.nodeValue;
}
// --></script>
</head>
<body>
<h1>お天気サービス</h1>
<form>
<select id="cityNo">
<option value="72">長野</option>
<option value="73">松本</option>
<option value="74">飯田</option>
<option value="63">東京</option>
<option value="38">名古屋</option>
<option value="81">大阪</option>
</select>
<input type="button" value="お天気を表示" onClick="checkWeather()"><br>
</form>
<p>
今日の天気:<span id="result"></span><br>
 天気概況:<span id="description"></span><br>
</p>
</body>
</html>

 次項では文字だけでなく天気のアイコンを表示させてみます。

[天気のアイコンを表示する]
[目次へ]

(2006.3.4)