JS调用腾讯接口获取天气

想做个直接通过JS获取某个城市的天气。本来想通过直接调用中国气象网的接口：

http://www.weather.com.cn/weather/101070201.shtml，但是跨域问题一直无法解决，有谁知道请告诉我。因而改调用腾讯接口，部分源码如下：

  1 function Weather() {};
  2 
  3 Weather.prototype = {
  4     
  5     getWeather: function (city, callback) {
  6         var that = this,
  7             cities = Weather.cityParse(),
  8             code = cities[city] ? cities[city] : 125,                           // 默认使用北京城市
  9             url = 'http://mat1.qq.com/weather/inc/minisite2_' + code + '.js';   // 腾讯天气API jsonp接口
 10 
 11         this.createJsonp(url, function (para) {
 12             var desc = that.weatherParse(para);                                 // 通过jsonp获取天气相关信息
 13             callback(desc);
 14         });
 15     },
 16     // jsonp    
 17     createJsonp: function (url, callback) {
 18         var script = document.createElement('script');
 19         script.type = 'text/javascript';
 20         script.src = url;
 21 
 22         script.onreadystatechange = function () {
 23             if (script.readyState === 'loaded' || script.readyState === 'complete') {
 24                 callback(__minisite2__weather__);
 25 
 26                 script.onreadystatechange = null;
 27                 script.onload = null;
 28          }
 29     };
 30 
 31     script.onload = function () {
 32         callback(__minisite2__weather__);
 33         script.onreadystatechange = null;
 34         script.onload = null;
 35     };
 36 
 37     document.body.appendChild(script);
 38     },
 39 
 40     weatherParse: function (para) {
 41                   
 42         try {
 43         var params = para.split(' ');
 44         var weather = {
 45             city: params[0],
 46             temperature: params[1],
 47             range: params[2],
 48             describe: params[3]
 49         };
 50 
 51         return weather;
 52     } catch (e) {
 53         
 54     }
 55     }
 56 };
 57 // 将城市及其对应代码解析成hash形式
 58 Weather.cityParse = function () {
 59     var cities = {},
 60     prop,
 61     code,
 62     item;
 63         
 64     for (prop in this.city) {
 65         item = Weather.city[prop];
 66         for (var city in item) {
 67         if (city !== '_') {
 68             code = item[city];
 69             city = city.slice(0, -1);
 70             cities[city] = code;
 71         }
 72         }
 73     }
 74 
 75     return cities;
 76 };
 77 
 78 Weather.city =  {
 79         "北京市": {
 80             "_": 125,
 81             "北京市": 125
 82         },
 83         "上海市": {
 84             "_": 252,
 85             "上海市": 252
 86         },
 87         "天津市": {
 88             "_": 127,
 89             "天津市": 127,
 90             "塘沽区": 132
 91         },
 92         "重庆市" : {
 93             "_": 212,
 94             "奉节区": 201,
 95             "重庆市": 212,
 96             "涪陵区": 213
 97         },
 98         "香港": {
 99             "_": 1,
100             "香港": 1
101         },
102         "澳门": {
103             "_": 2,
104             "澳门": 2
105         },
106         "台湾省": {
107             "_": 280,
108             "台北市": 280
109         },
110         "云南省": {
111             "_": 179,
112             "昭通市": 173,
113             "丽江市": 174,
114             "曲靖市": 175,
115             "保山市": 176,
116             "大理州": 177,
117             "楚雄州": 178,
118             "昆明市": 179,
119             "瑞丽市": 180,
120             "玉溪市": 181,
121             "临沧市": 182,
122             "思茅市": 184,
123             "红河州": 185,
124             "文山州": 369,
125             "西双版纳州": 370,
126             "德宏州": 371,
127             "怒江州": 372,
128             "迪庆州": 373
129         },
130         "内蒙古": {
131             "_": 69,
132             "呼伦贝尔市": 4,
133             "兴安盟": 7,
134             "锡林郭勒盟": 16,
135             "巴彦淖尔市": 63,
136             "包头市": 64,
137             "呼和浩特市": 69,
138             "锡林浩特市": 99,
139             "通辽市": 101,
140             "赤峰市": 106,
141             "乌海市": 382,
142             "鄂尔多斯市": 383,
143             "乌兰察布市": 384
144         }
145 };
146 // 主要是些事件处理相关的方法包装
147var Util = {
148     addEvent: function (element, type, handler) {
149     if (element.addEventListener) {
150         element.addEventListener(type, handler, false);
151     } else if (element.attachEvent) {
152         element.attachEvent('on' + type, handler);
153     }
154     },
155 
156     getEvent: function (event) {
157     return event || window.event;
158     },
159 
160     getTarget: function (event) {
161     return event.target || event.srcElement;
162     },
163 
164     getComputedStyle: function (element) {
165     if (element.currentStyle) {
166         return element.currentStyle;
167     } else {
168         return document.defaultView.getComputedStyle(element, null);
169     }
170     },
171 
172     getBoundingClientRect: function (element) {
173     var scrollTop = document.documentElement.scrollTop;
174     var scrollLeft = document.documentElement.scrollLeft;
175         
176     if (element.getBoundingClientRect) {
177         if (typeof arguments.callee.offset != 'number') {
178             var temp = document.createElement('div');
179                              temp.style.cssText = 'position: absolute; left: 0; top: 0;';
180                 document.body.appendChild(temp);
181                 arguments.callee.offset = -temp.getBoundingClientRect().top - scrollTop;
182                 document.body.removeChild(temp);
183                 temp = null;
184             }
185             
186             var rect = element.getBoundingClientRect();
187             var offset = arguments.callee.offset;
188             
189             return {
190                 left: rect.left + offset,
191                 rigth: rect.right + offset,
192                 top: rect.top + offset,
193                 bottom: rect.bottom + offset
194             };
195         } else {
196             var offset = this.getElementOffset(element);
197             
198             return {
199                 left: offset.left - scrollLeft,
200                 right: offset.left + element.offsetWidth - scrollLeft,
201                 top: offset.top - scrollTop,
202                 bottom: offset.top + element.offsetWidth - scrollTop
203             };
204         }
205     },
206     
207     getElementOffset: function (element) {
208         var actualLeft = element.offsetLeft;
209         var actualTop = element.offsetTop;
210         var current = element.offsetParent;
211         
212         while (current !== null) {
213             actualLeft += current.offsetLeft;
214             actualTop += current.actualTop;
215             current = current.offsetParent;
216         }
217         
218         return {
219             left: actualLeft,
220             top: actualTop
221         };
222     }
223 };

HTML页面的代码如下：

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <title>weather</title>
  5         <meta http-equiv="Content-Type" content="text/html; charset=gbk;" />
  6         <style type="text/css" >
  7             #city {
  8                 width: 150px;
  9                 heigth: 30px;
 10             }
 11             #inputCity {
 12                 position: absolute;
 13                 width: 130px;
 14                 heigth: 25px;
 15             }
 16         </style>
 17     </head>
 18     <body>
 19         <h1>Weather</h1>
 20         <fieldset>
 21             <legend> 获取时间 </legend>
 22             <label for="city">请选择城市:</label>
 23             <select name="city" id="city">
 24                 <!--<option selected="selected"></option>-->
 25                 <option>北京</option>
 26                 <option>大连</option>
 27                 <option>福州</option>
 28             </select>
 29             <input type="text" id="inputCity" value = '请输入或选择城市' />
 30             <input type="button" id="getWeather" value="获取天气" />
 31         </fieldset>
 32         <div id="showWeather">
 33         
 34         </div>
 35         <script type="text/javascript" src="weather.js"></script>
 36         <script>
 37         (function(){
112             
113             var city = document.getElementById('city');
114             var getWeather = document.getElementById('getWeather');
115             var inputCity = document.getElementById('inputCity');
116             var tip = inputCity.value;
117             var cities = Weather.cityParse();
118             
119             
120             var pos = Util.getBoundingClientRect(city);
121             var volumn = Util.getComputedStyle(city);
122             console.log(pos);
123             
124             // 设置输入文本框的位置
125             inputCity.style.left = pos.left + 'px';
126             inputCity.style.top = pos.top + 'px';
127             
128             Util.addEvent(city, 'change', function (event) {
129                 var value = city.options[city.selectedIndex].value;
130                 inputCity.value = value;
131             });
132             
133             Util.addEvent(inputCity, 'focus', function (event) {
134                 Util.getTarget(event).select();
135             });
136             
137             Util.addEvent(inputCity, 'change', function () {
138                 
139                 var city = inputCity.value;
140                 if ( city.slice(-1) === '市') {
141                     city = city.slice(0, -1);
142                 }
143                 if ( city && !cities[city] ) {
144                     alert('目前无法获取' + city + '的天气，请输入其它城市');
145                 } else if ( !city ) {
146                     inputCity.value = tip;
147                 }
148                 
149             });
150             
151             Util.addEvent(getWeather, 'click', function (event) {
152                 var city = inputCity.value;
153                 if ( city && !cities[city] ) {
154                     alert('目前无法获取' + city + '的天气，请输入其它城市');
155                     return false;
156                 }
157                 // 天气获取
158                 (new Weather()).getWeather(city, function(param){
159                  
160                     var showWeather = document.getElementById('showWeather');
161                     showWeather.innerHTML = '城市:' + param.city + 
162                         '<br /> 温度:' + param.temperature +
163                         '<br />  温度范围:' + param.range +
164                         '<br />  描述:' + param.describe;                       
165                 });
166             }); 
168             
169         })();    
170         </script>
171     </body>
172 </html>