Demo：充分利用 Ajax 技术 来体现页面局部刷新 效果（获取天气预报情况）
生活随笔
收集整理的這篇文章主要介紹了
Demo：充分利用 Ajax 技术 来体现页面局部刷新 效果（获取天气预报情况）
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
天氣預報讀取，充分利用了Ajax技術(shù)來體現(xiàn)頁面無刷新。
如果想獲取源碼，進一步學習和交流，可以回復，留下你的Email。
?1.
?2
?3????<link?href="Style/default.css"?rel="stylesheet"?type="text/css"?/>
?4????<link?href="Style/Div.css"?rel="stylesheet"?type="text/css"?/>
?5
?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>
js文件中涉及的代碼：
首先要把<script type="text/javascript" src="Js/prototype.js" ></script>加進來，prototype.js可以到晚上下載。
?1function?init()
?2{
?3????GetWeather();???????????????//獲得天氣預報
?4}
?5
?6//獲得天氣預報
?7function?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?=?"數(shù)據(jù)獲取失敗，請檢查網(wǎng)絡或重試。";
39?????????????}
40?????????????$("weather_title_2").children[0].src="Images/refresh.gif";
41????????},
42????????onFailure:function(transport)
43????????{
44????????????$("weather_content").children[1].innerHTML="數(shù)據(jù)獲取失敗，請檢查網(wǎng)絡或重試。";
45????????????$("weather_title_2").children[0].src="Images/refresh.gif";
46????????}
47????}
48????var?request=new?Ajax.Request("ajax.aspx",option);
49}
50
51//刷新天氣
52function?RefreshWeather()
53{
54????$("weather_title_2").children[0].src="Images/indicator2.gif";
55????GetWeather();?
56}
57
58//修改天氣預報城市
59function?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代碼
?1var?ArrayCatalog1?=?new?Array?(?2????new?aCatalog('125','北京','000'),
?3????new?aCatalog('125','北京','北京'),
?4
?5????new?aCatalog('201','重慶','000'),
?6????new?aCatalog('201','重慶','奉節(jié)'),
?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)?
22{
23????var?newItem?=?document.createElement("OPTION")?;
24????????
25????newItem.text?=??sText?;
26????newItem.value?=??sValue?;
27????document.getElementById(obSelect2).options.add(newItem);????
28}
29function?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}
35function?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}
47function?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??="正在讀取氣象數(shù)據(jù)";
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??}
ajax.aspx文件
?1using?System.Text;?2
?3public?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}
Weather類文件：
?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????}
?
1public?class?Weather2{
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=
??2body,table{font-size:12px;line-height:150%;}
??3A.color4:link?{COLOR:?#DD7D02;TEXT-DECORATION:?none}
??4A.color4:visited?{?COLOR:?#DD7D02;TEXT-DECORATION:?none}?
??5A.color4:active?{?COLOR:?#DD7D02;TEXT-DECORATION:?underline}?
??6A.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>
?43function?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
?55function?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
?65function?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">?？?/span></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
轉(zhuǎn)載于:https://www.cnblogs.com/Dlonghow/archive/2008/06/30/1232675.html
與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖總結(jié)
以上是生活随笔為你收集整理的Demo：充分利用 Ajax 技术 来体现页面局部刷新 效果（获取天气预报情况）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： c#语法之lock 语句
- 下一篇： 另一道排列组合题