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

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

如果想获取源码，进一步学习和交流，可以回复，留下你的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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color='#e1671c'><b>"+doc.root.getValue("City")+"</b></font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+doc.root.getValue("TodayWeather")+"</li>";
29                weather += "<li><img src='Images/Weather/WenDu.gif' alt='温度' />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+doc.root.getValue("WenDu")+"</li>";
30                weather += "<li><img src='Images/Weather/FengLi.gif' alt='风力' />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+doc.root.getValue("FengLi")+"</li>";
31                weather += "<li><img src='Images/Weather/ZiWaiXian.gif' alt='紫外线' />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+doc.root.getValue("ZiWaiXian")+"</li>";
32                weather += "<li><img src='Images/Weather/KongQi.gif' alt='空气' />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+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代码

复制代码
 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) 
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文件

复制代码
 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类文件：

复制代码
 1public 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    }
复制代码

 

复制代码
1public 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=

复制代码
  1<style type="text/css">
  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=
复制代码
 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
复制代码

 

参考源码：

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

posted @   杰克帝.NET  阅读(3490)  评论(6)  编辑  收藏  举报
编辑推荐：
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
点击右上角即可分享
微信分享提示
AI IDE Trae