js和jQuery跨域示例-请求实时天气

[syygithub]

js和jQuery跨域示例-请求实时天气

最近，需要写一个请求实时气温的小demo，本来想在网上找一段代码，结果找了半天，也没个能用的，于是就自己写了一个。

1、API接口

在网上找代码的时候，我发现好多不能用的情况是因为提供数据的API接口不能访问了，于是就找了一个可以用的API接口：http://api.map.baidu.com/telematics/v3/weather?location=%E5%8C%97%E4%BA%AC&output=json&ak=yourkey，使用本接口有几个值得注意的地方：

• API虽然是免费的，但是需要注册后才能用，发送请求时需要你的开发者密钥的码
• 天气API无法提供超过5000次的天气服务免费支持！

  2、jquery实现请求数据

  有了提供数据的API，用jQuery中的jsonp方式请求就很容易实现了，以下是代码：

    $(function(){
        $.ajax({
            url: 'http://api.map.baidu.com/telematics/v3/weather?location=%E5%8C%97%E4%BA%AC&output=json&ak=你的ak码',
            dataType: 'jsonp',
            method: 'GET',
            success: function(data){
                //处理数据的逻辑，以下是得到最高气温和最低气温的逻辑
            var highTemp = '30';
            var lowTemp = '7';
            if(data.status === 'success'){
                var results = data.results[0].weather_data[0],
                    temp = results.temperature,
                    tempArr = temp.match(/(\d{1,2})\s*~\s*(\d{1,2})/);
                highTemp = tempArr[1];
                lowTemp = tempArr[2];
                $('._weather_high_temp').html(highTemp + '°C');
                $('._weather_low_temp').html(lowTemp + '°C');
            }
                }
            }
        })
    })

3、js实现jsonp方法

本来这个请求天气的小demo已经完成，但是自己又在想jQuery中的jsonp请求的方法太强大了，自己能不能用js来简单实现一下jsonp的方法呢，于是就试着简单写了一下：

        /**
         * jsonp跨域方法实现.
         * @param url 请求路径
         * @param callbackName 接口回调参数名
         * @param callbackFnName 回调函数名
         * @param callbackFn 回调函数
         * @example 调用方式：
         * jsonp('http://api.map.baidu.com/telematics/v3/weather?location=%E5%8C%97%E4%BA%AC&output=json&ak=BE3c97a171552a6493f383049606f17a', "callback", 'weatherCB', function(data){
         *   console.log(data);
         * });
         */
        function jsonp(url, callbackName, callbackFnName, callbackFn) {
            var s = document.createElement("script");
            s.src = !callbackName ? url : url + (url.indexOf("?") == -1 ? "?" : "&") + callbackName + "=" + callbackFnName;
            var timer = setInterval(function () {
                if (document.readyState === 'complete') {
                    document.body.appendChild(s);
                    clearInterval(timer);
                }
            }, 300);
            window[callbackFnName] = callbackFn;
        }
        jsonp('http://api.map.baidu.com/telematics/v3/weather?location=%E5%8C%97%E4%BA%AC&output=json&ak=BE3c97a171552a6493f383049606f17a', "callback", 'weatherCB', function(data){
            console.log(data);
        });

小结

经测试，自己写的jsonp方法是可以实现异步请求功能的，但是有许多的细节情况未考虑周到，只是一个简单实现，望补充指正。

[Grace-lekaro]

第一个程序报错了少了一个分号

[songhlc]

@Grace-lekaro 其实应该是多写了一个大括号，分号理论上不是必须的