Ajax版的天气预报

最近在研究Ajax相关的东东，发现prototype是一个很好的 JavaScript Framework，我这个习作也是在这个框架里Ajax类的基础上写得！另外国内也有人给prototype做了中文注解也不错的！

演示效果


新开窗口地址：http://www.klstudio.com/demo/ajax/weather.htm

页面代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>weather</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="javascript" src="js/prototype.js"></script>
<script language="javascript" src="js/common.js"></script>
<style type="text/css">
<!--
body,td,th {
font-family: Courier New, Courier, mono;
font-size: 12px;
}
body {
margin: 0px;
}
-->
</style>
<script language="javascript">
function loadPage(){
loadCity();
loadWeather();
}
//======================================================;
function loadWeather(s){
if(s == undefined) s = "上海";
var o = $("weatherTd");
o.innerHTML = getLoadInfo();
loadAjaxData("/blog/weather_ajax_city.asp",{city:s},successWeather,errorWeather);
}
function successWeather(v){
var o = $("weatherTd");
o.innerHTML = getWeatherHTML(v.responseText);
}
function errorWeather(){
var o = $("weatherTd");
o.innerHTML = getErrorInfo();
}
function getWeatherHTML(s){
var a = s.split(",");
var ta = ["城市","日期","天气","气温","风力"];
var s = '';
for(var i=0;i<ta.length;i++){
s += ta[i] +":"+a[i]+"<br>";
}
return s;
}
//======================================================;
function loadCity(){
var o = $("cityTd");
o.innerHTML = getLoadInfo();
loadAjaxData("/blog/weather_ajax_list.asp",null,successCity,errorCity);
}
function successCity(v){
var o = $("cityTd");
o.innerHTML = getCityHTML(v.responseText);
}
function errorCity(){
var o = $("cityTd");
o.innerHTML = getErrorInfo();
}
function getCityHTML(s){
var a = s.split(",");
s = '城市：<select onChange="loadWeather(this.value);">';
for(var i=0;i<a.length;i++){
s += '<option value="'+a[i]+'">'+a[i]+'</option>';
}
s += '</select>';
return s;
}
//======================================================;
function getLoadInfo(){
return '<img src="images/loading.gif" width="16" height="16" border="0" align="absmiddle">正在加载数据...';
}
function getErrorInfo(){
return '<img src="images/warning.gif" width="14" height="14" border="0" align="absmiddle">数据加载失败!';
}
//======================================================;
</script>
</head>

<body onLoad="loadPage();">
<h2 align="center">Ajax版的天气预报</h2>
<br>
<table width="300" height="200" border="0" align="center" cellpadding="5" cellspacing="1" bgcolor="#999999">
<tr>
<td height="5%" bgcolor="#EEEEEE" id="cityTd">&nbsp;</td>
</tr>
<tr>
<td height="95%" bgcolor="#FFFFFF" id="weatherTd"><br></td>
</tr>
</table>
</body>
</html>