Demo:充分利用 Ajax 技术 来体现页面局部刷新 效果(获取天气预报情况)
天气预报读取,充分利用了Ajax技术来体现页面无刷新。
如果想获取源码,进一步学习和交流,可以回复,留下你的Email。
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可以到晚上下载。
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 = "数据获取失败,请检查网络或重试。";
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//刷新天气
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代码
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)
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 ="正在读取气象数据";
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文件
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 }
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=
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">海口</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=
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
转载于:https://www.cnblogs.com/Dlonghow/archive/2008/06/30/1232675.html
Demo:充分利用 Ajax 技术 来体现页面局部刷新 效果(获取天气预报情况)相关推荐
- asp ajax局部刷新,ASP.Net用jQuery ajax实现页面局部刷新
刚开始的时候使用asp的updatepanel控件实现局部刷新,而且在本地运行正确,但是部署到服务器上就变成整个页面全部刷新了.服务器用的是Windows server2000,本地机子上用的是win ...
- ajax 局部页面替换innerhtml,ajax jquery 页面局部刷新的不同实现代码
以下示例是学习使用XMLHttpRequest时,实现的页面局部刷新的代码,分享下. 复制代码 代码示例: 页面局部刷新功能_www.jbxue.com window.onload = functio ...
- ajax局部刷新html页面,Ajax实现页面局部刷新
最近开发网站,需要实现Ajax实现页面局部刷新,花了2天时间搞定,做个记录 开发环境 WAMP集成开发环境,也就是本地服务器 参考资料: 油管教学视频 简单的例子,可能利用的是bootstap提供的一 ...
- 页面局部刷新三种方法
页面局部刷新 1.使用ajax实现小部分的内容局部刷新 $.ajax({ url:"http://localhost:8080/intoHomepage.do", type:&qu ...
- java局部刷新_HTML页面局部刷新的实现代码
这篇文章主要介绍了HTML页面局部刷新的实现代码的相关资料,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. 事件响应刷新:有请求才会刷新 1.通过 ...
- Vue3中如何进行页面局部刷新,组件刷新
前言 今天在给vue3的项目中进行数据绑定的时候,发现我删除一条记录页面不会自动刷新,还是保留原来的状态 但是数据已经传送给后端,后端也完成了响应的处理 这个时候我想到了局部刷新,我想vue3是vue ...
- 用ajax技术实现无闪烁定时刷新页面
在Web开发中我们经常需要实现定时刷新某个页面:1.来保持session的值或者检查session的值是否为空(比如说防止同一用户重复登录):2.实现实时站内短信:3.定时更新页面数据等等.但是我们在 ...
- spring mvc + ajax上传文件,页面局部刷新
1.点击上传按钮进行如下操作,通过表单名称以及input名称获取相应的值,对于上传的文件,使用.files来获取, 因为包含文件的上传,所以采用FormData的形式来进行数据交互,通过append将 ...
- Ajax实现页面局部刷新
这里通过点击一个按钮,然后下面产生一段文字,而整个页面不用刷新 <!DOCTYPE html> <html lang="en"> <head>& ...
最新文章
- java 程序编译和运行的过程
- 【视频】v-bind的使用
- 笔记本电脑键盘切换_全球首款折叠屏笔记本电脑ThinkPad X1 Fold:5G高速互联拥抱PC场景融合时代...
- 解决查询时报的cannot be cast to com.credithc.enjoy.manager.OrderResp错误
- Bootstrap定制开发
- 如何从程序员转型为项目经理
- 数学基础 —— 线性代数
- java 不能同时修改一条记录_【免费毕设】JAVA+SQL离散数学题库管理系统(源代码+论文+外文翻译)...
- 深圳行:1207-Day 1 - 到达
- html5——3D转换
- VS2015卸载不完全与安装问题
- c语言图形时钟编程,c语言+图形编程——打造浅易的时钟
- Excel VBA-批量导出图片.vba
- 变限积分求导公式总结_变限积分的求导公式及其应用
- java升序排列数组_java数组的升序降序排列
- Android系统启动流程之-----activity启动流程
- 面试题数组L型输出思路
- validateform.js表单验证工具
- 手把手教大家搭建微信公众号查题功能
- 计算机pm,PM、PMP、PMO分别都是什么 以及三者的关系
热门文章
- Apache Web Server - httpd 的虚拟主机的配置
- crontab/ntpdate——时间同步
- VS2010设置全局Include和Lib目录
- Ring3下Inline Hook API
- C语言 迷宫问题求解(顺序栈应用示例)
- 2049 : 压死骆驼的最后一根稻草 (规律)
- HMM:Hidden Markov Model 代码讲解
- python分类预测降低准确率_python实现吴恩达机器学习练习3(多元分类器和神经网络)...
- STC89C52RC单片机例程实现_流水灯1_模块化(C语言实现)
- Linux线程——线程创建和基本使用(多线程并发)