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

最新推荐文章于 2021-04-04 05:23:10 发布

weixin_30315723

最新推荐文章于 2021-04-04 05:23:10 发布

阅读量158

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ui ViewUI

原文链接：http://www.cnblogs.com/Dlonghow/archive/2008/06/30/1232675.html

本文介绍了一个利用Ajax技术实现页面无刷新的天气预报应用，详细展示了HTML、JavaScript和后台交互的实现方式，包括城市选择、天气数据请求及显示等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

天气预报读取，充分利用了Ajax技术来体现页面无刷新。

如果想获取源码，进一步学习和交流，可以回复，留下你的Email。

.
2

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

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

< 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可以到晚上下载。

function init()
2

{
3

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

}
5

// 获得天气预报
7

function GetWeather(theCityCode)
8

{
9

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

if(theCityCode)
11

{
12

CityCode = theCityCode;
13

}
14

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

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

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

// 刷新天气
52

function RefreshWeather()
53

{
54

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

GetWeather();
56

}
57

// 修改天气预报城市
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

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

var ArrayCatalog1 = new Array (
2

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

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

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

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

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

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

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

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

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

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

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

new aCatalog ( ' 0 ' , ' 0 ' , ' 0 ' )
18

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

);
20

function AddOption (sText,sValue,obSelect2)
22

{
23

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

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

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

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

}

ajax.aspx文件

using System.Text;
2

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

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

Response.Write(request);
28

}
29

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

request = sb.ToString();
52

}
53

}

Weather类文件：

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

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

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

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

}

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

}

HTML=

< style type = " text/css " >
2

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

< 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

< 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

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

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

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

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

}
54

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

function getredirect(v)

{
66

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

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

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

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

}
72

</ script >
73

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

< 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

temp=

< 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

< 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

< 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

转载于:https://www.cnblogs.com/Dlonghow/archive/2008/06/30/1232675.html

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

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