<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>お天気情報</title>
<link rel="stylesheet" href="main.css" type="text/css">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript"><!--
window.onload = function ()
{
var sURL = "weather.rb?"+(new Date()).getTime();
new Ajax.Request(sURL, { method: "get", onComplete: displayData });
}
function displayData(httpObj)
{
var xmlObj = httpObj.responseXML;
var telop = xmlObj.getElementsByTagName("telop");
var weather = telop[0].firstChild.nodeValue;
$("weatherToday").innerHTML = weather;
var descText = xmlObj.getElementsByTagName("description");
var weatherInfo = descText[0].firstChild.nodeValue;
$("desc").innerHTML = weatherInfo;
var imgTag = xmlObj.getElementsByTagName("image");
var imgURL = imgTag[0].getElementsByTagName("url");
$("icon").src = imgURL[0].firstChild.nodeValue;
}
// --></script>
</head>
<body>
<h1>お天気情報</h1>
<div id="content">
今日の松本の天気：<img src="icon.gif" id="icon"><span id="weatherToday"></span><br>
天気概況：<span id="desc"></span>
</div>
</body>
</html>
説明などは本書を参考にしてください。