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

1

.
2

3

6

7

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>

1

function init()
2

{
3

GetWeather(); //获得天气预报
4

}
5

6

//获得天气预报
7

function GetWeather(theCityCode)
8

{
9

if(!CityCode && !theCityCode) CityCode="144";
10

if(theCityCode)
11

{
12

CityCode = theCityCode;
13

}
14

15

$("selectCityWeather").style.display = "none";
16

$("weather_content").children[1].innerHTML = "<center><img src='Images/inprogress.gif' /></center>";
17

18

var option={
19

parameters:"t=weather&CityCode="+CityCode,
20

method:"get",
21

onSuccess:function(transport){
22

var rp=transport.responseText;
23

var doc=new X2Doc(rp);
24

var result=doc.root.getValue("Result");
25

if(result=="OK")
26

{
27

var weather = "<ul class='weather'>";
28

weather += "<li>      <font color='#e1671c'><b>"+doc.root.getValue("City")+"</b></font>              "+doc.root.getValue("TodayWeather")+"</li>";
29

weather += "<li><img src='Images/Weather/WenDu.gif' alt='温度' />        "+doc.root.getValue("WenDu")+"</li>";
30

weather += "<li><img src='Images/Weather/FengLi.gif' alt='风力' />        "+doc.root.getValue("FengLi")+"</li>";
31

weather += "<li><img src='Images/Weather/ZiWaiXian.gif' alt='紫外线' />        "+doc.root.getValue("ZiWaiXian")+"</li>";
32

weather += "<li><img src='Images/Weather/KongQi.gif' alt='空气' />        "+doc.root.getValue("KongQi")+"</li>";
33

weather += "</ul>";
34

$("weather_content").children[1].innerHTML = weather;
35

}
36

else
37

{
38

$("weather_content").children[1].innerHTML = "数据获取失败，请检查网络或重试。";
39

}
40

$("weather_title_2").children[0].src="Images/refresh.gif";
41

},
42

onFailure:function(transport)
43

{
44

$("weather_content").children[1].innerHTML="数据获取失败，请检查网络或重试。";
45

$("weather_title_2").children[0].src="Images/refresh.gif";
46

}
47

}
48

var request=new Ajax.Request("ajax.aspx",option);
49

}
50

51

//刷新天气
52

function RefreshWeather()
53

{
54

$("weather_title_2").children[0].src="Images/indicator2.gif";
55

GetWeather();
56

}
57

58

//修改天气预报城市
59

function EditCityWeather()
60

{
61

InitProvince("Weather_ProvinceList");
62

if($("selectCityWeather").style.display == "none")
63

{
64

$("selectCityWeather").style.display = "block";
65

}
66

else
67

{
68

$("selectCityWeather").style.display = "none";
69

}
70

}
71

1

var 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

21

function AddOption (sText,sValue,obSelect2)
22

{
23

var newItem = document.createElement("OPTION") ;
24

25

newItem.text = sText ;
26

newItem.value = sValue ;
27

document.getElementById(obSelect2).options.add(newItem);
28

}
29

function DelOption (obSelect2)
30

{
31

var iLength = document.getElementById(obSelect2).options.length ;
32

for ( var i = iLength - 1 ; i >= 0 ; i -- )
33

document.getElementById(obSelect2).options[i]=null ;
34

}
35

function InitProvince(ProvinceSelect)
36

{
37

var i;
38

DelOption(ProvinceSelect);
39

for(i=0;i<ArrayCatalog1.length-1;i++)
40

{
41

if(ArrayCatalog1[i].sCity=='000')
42

{
43

AddOption(ArrayCatalog1[i].sProvince,ArrayCatalog1[i].sProvince,ProvinceSelect);
44

}
45

}
46

}
47

function ShowCityFromProvince(ProvinceSelect,CitySelect)
48

{
49

if($(ProvinceSelect).options.length<1)
50

InitProvince(ProvinceSelect);
51

var i;
52

var s=document.getElementById(ProvinceSelect).value;
53

DelOption(CitySelect);
54

AddOption("请选择","-1",CitySelect);
55

for(i=0;i<ArrayCatalog1.length-1;i++)
56

{
57

if(ArrayCatalog1[i].sProvince==s&&ArrayCatalog1[i].sCity!='000')
58

{
59

AddOption(ArrayCatalog1[i].sCity,ArrayCatalog1[i].sId,CitySelect);
60

}
61

}
62

}
63

64

function GetWeather(CityCode)
65

{
66

if(CityCode=="-1"||CityCode=='000')
67

return false;
68

setcookie("LYG_BoBoLog_Weather",CityCode,12);
69

ComAjax.GetCurrentWeather(CityCode,Result_GetWeatherByCity);
70

document.getElementById ("Weather.ascx_Weather").innerHTML ="正在读取气象数据

";
71

document.getElementById ("Weather.ascx_City").innerHTML ="

";
72

document.getElementById ("Weather.ascx_WenDu").innerHTML ="

";
73

document.getElementById ("Weather.ascx_FengLi").innerHTML ="

";
74

document.getElementById ("Weather.ascx_ZiWaiXian").innerHTML ="

";
75

document.getElementById ("Weather.ascx_KongQi").innerHTML ="

";
76

}
77

78

function Result_GetWeatherByCity(result)
79

{
80

if(!result.error)
81

{
82

document.getElementById ("Weather.ascx_City").innerHTML =(result.value)[0];
83

document.getElementById ("Weather.ascx_Weather").innerHTML =(result.value)[1];
84

document.getElementById ("Weather.ascx_WenDu").innerHTML =(result.value)[2];
85

document.getElementById ("Weather.ascx_FengLi").innerHTML =(result.value)[3];
86

document.getElementById ("Weather.ascx_ZiWaiXian").innerHTML =(result.value)[4];
87

document.getElementById ("Weather.ascx_KongQi").innerHTML =(result.value)[5];
88

CloseSetCity();
89

}
90

}

1

using System.Text;
2

3

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

{
5

protected string st
6

{
7

get {
8

if (null == Request.QueryString["t"])
9

return string.Empty;
10

return Request.QueryString["t"].Trim();
11

}
12

}
13

protected string request = string.Empty;
14

protected StringBuilder sb = new StringBuilder();
15

16

protected void Page_Load(object sender, EventArgs e)
17

{
18

switch (st)
19

{
20

case "weather":
21

GetWeather();
22

break;
23

default:
24

break;
25

}
26

27

Response.Write(request);
28

}
29

30

protected void GetWeather()
31

{
32

string strCityCode = (Request.QueryString["CityCode"] == null ? string.Empty : Request.QueryString["CityCode"]);
33

Weather wea = WeatherInfo.GetCurrentWeather(strCityCode);
34

if (wea.City != "-1")
35

{
36

sb.Append("<weather>");
37

sb.Append("<City>" + wea.City + "</City>");
38

sb.Append("<TodayWeather>" + wea.TodayWeather + "</TodayWeather>");
39

sb.Append("<WenDu>" + wea.WenDu + "</WenDu>");
40

sb.Append("<FengLi>" + wea.FengLi + "</FengLi>");
41

sb.Append("<ZiWaiXian>" + wea.ZiWaiXian + "</ZiWaiXian>");
42

sb.Append("<KongQi>" + wea.KongQi + "</KongQi>");
43

sb.Append("<Result>OK</Result>");
44

sb.Append("</weather>");
45

}
46

else
47

{
48

sb.Append("<weather><Result>False</Result></weather>");
49

}
50

51

request = sb.ToString();
52

}
53

}

1

public static Weather GetCurrentWeather(string CityCode)
2

{
3

try
4

{
5

Uri myUri = new Uri("http://weather.news.qq.com/inc/ss" + CityCode + ".htm");
6

HttpWebRequest myWebRequest = (HttpWebRequest)WebRequest.Create(myUri);
7

myWebRequest.Method = "GET";
8

HttpWebResponse myWebResponse = (HttpWebResponse)myWebRequest.GetResponse();
9

10

StreamReader reader = new StreamReader(myWebResponse.GetResponseStream(), System.Text.Encoding.GetEncoding("GB2312"));
11

byte[] buffer = System.Text.Encoding.GetEncoding("GB2312").GetBytes(reader.ReadToEnd());
12

string HTML = System.Text.Encoding.GetEncoding("GB2312").GetString(buffer).Trim();
13

string temp = "";
14

15

int start, stop;
16

start = HTML.IndexOf("</style>", 0, HTML.Length);
17

stop = HTML.IndexOf("<script>", 0, HTML.Length);
18

temp = HTML.Substring(start, stop - start);
19

Regex regex = new Regex("<[^>]*>");
20

string[] ss = regex.Split(temp);
21

string t = "";
22

foreach (string p in ss)
23

{
24

if (p.Trim().Length > 0)
25

t += p + "/";
26

}
27

string[] sss = t.Split('/');
28

Weather weather = new Weather();
29

if (sss.Length > 0) weather.City = sss[0];
30

if (sss.Length > 1) weather.TodayWeather = sss[1];
31

if (sss.Length > 2) weather.WenDu = sss[2];
32

if (sss.Length > 3) weather.FengLi = sss[3];
33

if (sss.Length > 4) weather.ZiWaiXian = sss[4];
34

if (sss.Length > 5) weather.KongQi = sss[5];
35

36

reader.Close();
37

myWebResponse.Close();
38

return weather;
39

}
40

catch
41

{
42

Weather w = new Weather();
43

w.City = "-1";
44

return w;
45

}
46

}

1

public class Weather
2

{
3

public string City; // 城市
4

public string TodayWeather; //天气
5

public string WenDu; // 温度
6

public string FengLi; // 风力
7

public string ZiWaiXian; // 紫外线
8

public string KongQi; // 空气
9

}

1

body,table{font-size:12px;line-height:150%;}
3

A.color4:link {COLOR: #DD7D02;TEXT-DECORATION: none}
4

A.color4:visited { COLOR: #DD7D02;TEXT-DECORATION: none}
5

A.color4:active { COLOR: #DD7D02;TEXT-DECORATION: underline}
6

A.color4:hover { COLOR: #DD7D02;TEXT-DECORATION: underline}
7

</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

function getcookie(name) {
44

var my_cookie = document.cookie;
45

var start = my_cookie.indexOf(name + "@weather.qq.com" + "=");
46

if (start == -1) return '';
47

48

start += name.length + 16; //1 stands of '='
49

50

var end = my_cookie.indexOf(";" ,start);
51

if (end == -1) end = my_cookie.length;
52

return my_cookie.substr(start, end - start);
53

}
54

55

function setcookie(name,value,open, path) {
56

var nextyear = new Date();
57

if (open) {
58

nextyear.setFullYear(nextyear.getFullYear() + 1);
59

} else {
60

nextyear.setFullYear(1970);
61

}
62

document.cookie = name + "@weather.qq.com" + "=" + value + "; expires=" + nextyear.toGMTString() + "; path=" + path;
63

}
64

65

function getredirect(v) {
66

setcookie('default_city', v, true, "/");
67

setcookie('default_city1', v, true, "/inc");
68

69

if (v=='') v=123;
70

window.location.href='http://weather.qq.com/inc/ss'+v+'.htm';
71

}
72

</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

117

var v=getcookie('default_city1');
118

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

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

121

</script>
122

</td>
123

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

</tr>
125

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

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

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