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

 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>&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 // 刷新天气
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

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

 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  }

ajax.aspx文件

 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}

Weather类文件：

 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}

HTML=

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

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

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