Demo：充分利用 Ajax 技术 来体现页面局部刷新 效果（获取天气预报情况）

3 <link href="Style/default.css" rel="stylesheet" type="text/css" />

4 <link href="Style/Div.css" rel="stylesheet" type="text/css" />

5

6

8<center>

9 <div id="all">

10 <div id="left">

11 <div id="weather_outer">

12 <div id="weather">

13 <div id="weather_title" class="handle">

14 <div id="weather_title_1">天气预报</div>

15 <div id="weather_title_2">

16 <img class="hand" src="Images/refresh.gif" onclick="RefreshWeather();" alt="刷新天气"/>

17 <img class="hand" src="Images/settings.gif" onclick="EditCityWeather();" alt="定制天气" />

18 <img class="hand" src="Images/colapse.gif" onclick="showHide(this.parentNode.parentNode.parentNode.children[1],this);" alt="" />

19 <img class="hand" src="Images/close.gif" alt="" />

20 </div>

21 </div>

22 <div id="weather_content">

23 <div id="selectCityWeather">

24 <select id="Weather_ProvinceList" onchange="ShowCityFromProvince('Weather_ProvinceList','Weather_CityList');"></select>

25 省

26 <select id="Weather_CityList" onchange="GetWeather(this.value);"></select>

27 市

28 </div>

29 <div></div>

30 </div>

31 </div>

32 </div>

33 </div>

34</center>

<script type="text/javascript" language="javascript">

init();

</script>

js文件中涉及的代码：

首先要把<script type="text/javascript" src="Js/prototype.js" ></script>加进来，prototype.js可以到晚上下载。

1function init()

2

6//获得天气预报

7function GetWeather(theCityCode)

8

51//刷新天气

52function RefreshWeather()

53

58//修改天气预报城市

59function EditCityWeather()

60
该天气信息要使用到的Js文件或Js代码

1var ArrayCatalog1 = new Array (

2 new aCatalog('125','北京','000'),

3 new aCatalog('125','北京','北京'),

4

5 new aCatalog('201','重庆','000'),

6 new aCatalog('201','重庆','奉节'),

7 new aCatalog('212','重庆','重庆'),

8 new aCatalog('213','重庆','涪陵'),

9

10

11 new aCatalog('252','上海','上海'),

12 new aCatalog('252','上海','000'),

13

14 new aCatalog('173','云南','000'),

15 new aCatalog('173','云南','昭通'),

16 new aCatalog('174','云南','丽江'),

17 new aCatalog ('0', '0','0')

18 //篇幅太长，仅提供一部分

19);

20

21function AddOption (sText,sValue,obSelect2)

22function DelOption (obSelect2)

30function InitProvince(ProvinceSelect)

36function ShowCityFromProvince(ProvinceSelect,CitySelect)

48

64 function GetWeather(CityCode)

65

78 function Result_GetWeatherByCity(result)

79using System.Text;

2

3public partial class ajax : System.Web.UI.Page

4public static Weather GetCurrentWeather(string CityCode)

2public class Weather

2<style type="text/css">

2</style>

8<table width="189" border="0" cellspacing="0" cellpadding="0" align="center">

9<tr><td colspan="3"><img src="/images/r_t1.gif" width="189" height="35"></td></tr>

10<tr align="center"><td height="60" colspan="3"><table width="189" border="0" cellspacing="0" cellpadding="0" background="/images/r_tembg2.gif">

11<tr><td colspan="2"><img src="/images/r_tembg1.gif" width="189" height="6"></td></tr>

12<tr>

13<td height="23" width="72" align="center" background="/images/r_tembg4.gif" class="rb12">北京</td>

14<td height="23" width="117" background="/images/r_tembg5.gif" align="center">雷阵雨</td>

15</tr>

16<tr>

17<td height="23" align="center"><img src="/images/tem1.gif" width="57" height="13"></td>

18<td height="23" align="center">20℃～29℃

19 </td>

20</tr>

21<tr><td height="1" align="center" colspan="2" background="/images/line2.gif"></td></tr>

22<tr>

23<td height="23" align="center"><img src="/images/tem2.gif" width="57" height="13"></td>

24<td height="23" align="center">无风向微风</td>

25</tr>

26<tr><td height="1" align="center" colspan="2" background="/images/line2.gif"></td></tr>

27

28 <tr>

29<td height="23" align="center"><img src="/images/tem3.gif" width="57" height="13"></td>

30<td height="23" align="center">弱</td>

31</tr>

32<tr><td height="1" align="center" colspan="2" background="/images/line2.gif"></td></tr>

33<tr>

34<td height="23" align="center"><img src="/images/tem5.gif" width="57" height="13"></td>

35<td height="23" align="center">良</td>

36</tr>

37

38<tr><td colspan="2"><img src="/images/r_tembg3.gif" width="189" height="3"></td></tr>

39</table></td></tr>

40<tr>

41<td height="30" width="96"><img src="/images/r_b.gif" width="96" height="21"></td>

42<td width="88" align="center"><script>

43

55

65</script>

73

74<select id="obSelect" onchange="getredirect(this.value)">

75

76<option selected="selected" value="125">北京</option>

77<option value="292">广州</option>

78<option value="252">上海</option>

79<option value="127">天津</option>

80<option value="212">重庆</option>

81<option value="115">沈阳</option>

82<option value="244">南京</option>

83<option value="211">武汉</option>

84<option value="166">成都</option>

85<option value="186">西安</option>

86<option value="82">石家庄</option>

87<option value="84">太原</option>

88<option value="189">郑州</option>

89<option value="103">长春</option>

90<option value="17">哈尔滨</option>

91<option value="69">呼和浩特</option>

92<option value="140">济南</option>

93<option value="248">合肥</option>

94<option value="255">杭州</option>

95<option value="276">福州</option>

96<option value="287">厦门</option>

97<option value="218">长沙</option>

98<option value="296">深圳</option>

99<option value="295">南宁</option>

100<option value="232">桂林</option>

101<option value="264">南昌</option>

102<option value="227">贵阳</option>

103<option value="1">香港</option>

104<option value="2">澳门</option>

105<option value="179">昆明</option>

106<option value="280">台北</option>

107<option value="150">拉萨</option>

108<option value="303">海口</option>

109<option value="57">兰州</option>

110<option value="78">银川</option>

111<option value="56">西宁</option>

112<option value="28">乌鲁木齐</option>

113

114</select>

115<script>

116

117var v=getcookie('default_city1');

118var o=document.getElementById('obSelect');

119if (v!= '') o.value=v;

120

121</script>

122</td>

123<td width="16">市</td>

124</tr>

125

temp=

1<table width="189" border="0" cellspacing="0" cellpadding="0" align="center">

2<tr><td colspan="3"><img src="/images/r_t1.gif" width="189" height="35"></td></tr>

3<tr align="center"><td height="60" colspan="3"><table width="189" border="0" cellspacing="0" cellpadding="0" background="/images/r_tembg2.gif">

4<tr><td colspan="2"><img src="/images/r_tembg1.gif" width="189" height="6"></td></tr>

5<tr>

6<td height="23" width="72" align="center" background="/images/r_tembg4.gif" class="rb12">北京</td>

7<td height="23" width="117" background="/images/r_tembg5.gif" align="center">雷阵雨</td>

8</tr>

9<tr>

10<td height="23" align="center"><img src="/images/tem1.gif" width="57" height="13"></td>

11<td height="23" align="center">20℃～29℃

12 </td>

13</tr>

14<tr><td height="1" align="center" colspan="2" background="/images/line2.gif"></td></tr>

15<tr>

16<td height="23" align="center"><img src="/images/tem2.gif" width="57" height="13"></td>

17<td height="23" align="center">无风向微风</td>

18</tr>

19<tr><td height="1" align="center" colspan="2" background="/images/line2.gif"></td></tr>

20

21 <tr>

22<td height="23" align="center"><img src="/images/tem3.gif" width="57" height="13"></td>

23<td height="23" align="center">弱</td>

24</tr>

25<tr><td height="1" align="center" colspan="2" background="/images/line2.gif"></td></tr>

26<tr>

27<td height="23" align="center"><img src="/images/tem5.gif" width="57" height="13"></td>

28<td height="23" align="center">良</td>

29</tr>

30

31<tr><td colspan="2"><img src="/images/r_tembg3.gif" width="189" height="3"></td></tr>

32</table></td></tr>

33<tr>

34<td height="30" width="96"><img src="/images/r_b.gif" width="96" height="21"></td>

35

参考源码：

http://files.cnblogs.com/Dlonghow/Source%20Code/AjaxSolution1.rar