AJAXjsonp实战--天气预报

Posted 天天向上吧

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AJAXjsonp实战--天气预报相关的知识,希望对你有一定的参考价值。

  一、案例

  本次要做的案例的是使用jsonp制作一个查询天气情况的网页,我会从如何抓取数据接口,到一步一步完成这个案例来详细讲解。

  这个页面样式非常简单,截图如下。用户需要先选择一个城市,然后点击查看天气,那么最近5天的天气数据,就会展示到下面。

   

  二、数据从何而来

  当然我们不可能自己建气象站,我们只有通过互联网拿到别人“分享”给我们的数据接口,然后通过这个数据接口获取全国的气象数据。这样我们就必须使用jsonp了,因为提供气象数据服务的api,其所在的域名肯定跟我们自己的应用程序不是一个域名。

  那么问题来了,我们如何知道哪里有api提供气象数据服务的?这个就要多观察多积累了。比如现在很多人的电脑上都会安装360,一般360杀毒在安装时候会篡改你的浏览器主页为“hao360”这个网站,那么你打开网页,每次都会看到这样的画面。

                  

 

  这个网站在非常显眼的地方提供了一个查看天气的模块。难道360还开着气象站?如果不是,那我们只要看看它是如何搞到数据的,我们就能如法炮制了。

  一般你可以这样做:

  1.在气象模块上点鼠标右键->审查元素。去看看他的结构

  2.打开开发者选项工具窗口,点击Network(网络)选项卡,然后去查看请求报文,这样就能找到气象数据从哪儿来了。

  不过,如果你没有经验,你会被请求报文列表中的数据给吓住,因为实在是太多了,至少不下300条请求项。那我们怎么去找真正需要的那个请求呢?

  试想,这个hao360也不可能自己弄个气象站,所以它必然也是抓取的第三方api,所以也必然是通过jsonp的形式来实现的。那么我们只需要在所有的请求报文中按type这一列排下序,然后就只管看请求类型是script的那些项。这样一下就把范围缩小了很多很多。

  最后我们找到,这里的请求url是:https://cdn.weather.hao.360.cn/sed_api_weather_info.php?code=101180201&app=hao360&_jsonp=__jsonp3__

  简单说明下这个url的参数

  1.code:要查询的城市编码,这个可以百度

  2._jsonp:你自己定义的回调函数的名字。

  3.其他的参数都无关紧要,至少对本案例来说是这样。

  在浏览器里打开这个链接,你看到的结果是这样的:

  当然,我只截取了一小部分。不过已经可以看出了,这是一个典型的jsonp跨域访问。

  然后,我把数据copy出来,贴到sublime中,格式化之后,数据是这个样子的。

 1 {
 2     "pubdate": "2018-06-25",
 3     "pubtime": "16:44:10",
 4     "time": 1529916250,
 5     "area": [
 6         ["\\u6cb3\\u5357", "18"],
 7         ["\\u5b89\\u9633", "1802"],
 8         ["\\u5b89\\u9633", "101180201"]
 9     ],
10     "weather": [{
11         "date": "2018-06-25",
12         "info": {
13             "dawn": ["2", "\\u9634", "24", "\\u5357\\u98ce", "\\u5fae\\u98ce", "19:44"],
14             "day": ["8", "\\u4e2d\\u96e8", "27", "\\u5317\\u98ce", "\\u5fae\\u98ce", "05:07"],
15             "night": ["8", "\\u4e2d\\u96e8", "22", "\\u897f\\u98ce", "\\u5fae\\u98ce", "19:44"]
16         }
17     }, {
18         "date": "2018-06-26",
19         "info": {
20             "dawn": ["8", "\\u4e2d\\u96e8", "22", "\\u897f\\u98ce", "\\u5fae\\u98ce", "19:44"],
21             "day": ["7", "\\u5c0f\\u96e8", "28", "\\u5357\\u98ce", "\\u5fae\\u98ce", "05:07"],
22             "night": ["1", "\\u591a\\u4e91", "22", "\\u5357\\u98ce", "\\u5fae\\u98ce", "19:44"]
23         }
24     }, {
25         "date": "2018-06-27",
26         "info": {
27             "dawn": ["1", "\\u591a\\u4e91", "22", "\\u5357\\u98ce", "\\u5fae\\u98ce", "19:44"],
28             "day": ["0", "\\u6674", "37", "\\u5357\\u98ce", "\\u5fae\\u98ce", "05:08"],
29             "night": ["0", "\\u6674", "24", "\\u5317\\u98ce", "3-5\\u7ea7", "19:44"]
30         }
31     }, {
32         "date": "2018-06-28",
33         "info": {
34             "dawn": ["0", "\\u6674", "24", "\\u5317\\u98ce", "3-5\\u7ea7", "19:44"],
35             "day": ["0", "\\u6674", "36", "\\u4e1c\\u5317\\u98ce", "\\u5fae\\u98ce", "05:08"],
36             "night": ["1", "\\u591a\\u4e91", "21", "\\u897f\\u98ce", "\\u5fae\\u98ce", "19:45"]
37         }
38     }, {
39         "date": "2018-06-29",
40         "info": {
41             "dawn": ["1", "\\u591a\\u4e91", "21", "\\u897f\\u98ce", "\\u5fae\\u98ce", "19:45"],
42             "day": ["1", "\\u591a\\u4e91", "35", "\\u4e1c\\u5357\\u98ce", "\\u5fae\\u98ce", "05:08"],
43             "night": ["1", "\\u591a\\u4e91", "22", "\\u5357\\u98ce", "\\u5fae\\u98ce", "19:45"]
44         }
45     }],
46     。。。。。。
47 }

  简单解释下数据:

  1.这里只截取了数据的一部分,只保留了我们案例中需要用到的那一小部分,感兴趣的自己去研究吧。

  2.显然,这个数据是js中的,json格式数据。

  3.本案例中用到的气象数据,是在这个json对象的“weather”属性中。这个属性的值是一个js数组,数组一共有5个元素,每个元素又是一个json对象,每个json对象都代表了一天的天气情况。

  三、案例的html结构

  先看下页面的HTML结构  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>天气预报-hao360接口</title>
    <link rel="stylesheet" href="css/weather.css">
</head>
<body>
    <div class="wt_container">
        <div class="city">
            <select id="selCity">
                <option value="101180201">大安阳</option>
                <option value="101010100">北京</option>
                <option value="101180101">郑州</option>
                <option value="101250101">长沙</option>
                <option value="101050101">哈尔滨</option>
                <option value="101130101">乌鲁木齐</option>
                <option value="101280101">广州</option>
            </select>
            <button id="btn">查看天气</button>
        </div>
        <div class="weather">
            <ul id="wtInfo">
                <!-- <li>
                    <h2>25日</h2>
                    <div class="day">
                        <h3>白天天气</h3>
                        <p>天气:</p>
                        <p>温度</p>
                        <p>风向</p>
                        <p>风速</p>
                    </div>
                    <div class="night">
                        <h3>夜间天气</h3>
                        <p>天气:</p>
                        <p>温度</p>
                        <p>风向</p>
                        <p>风速</p>
                    </div>
                </li>                 -->
            </ul>
        </div>
    </div>
</body>
</html>

  大家都看得懂,简单说明下:

  1.select标签中的每个选项都有一个value值,这个值对应的城市编码,这个编码是国家标准编码,不是自己随便乱写的,我是从百度出来然后写死到页面上的。当然,网上也有关于提供省市编码查询的api,你完全可以根据本案例所讲的方法,结合之前AJAX中讲的省市联动的案例,把这里城市的选择做成活的。我这里为了简单起见,随便从网上扒了几个城市,把城市的code拷贝了一下就写死到HTML了。目的只是为了让例子别太复杂。

  2.由于我们拿到的数据是5天的数据,所以我们用一个<ul id = "wtInof">标签来展示所有的查询到的5天的天气,每天的天气用一个li包住。HTML中注释掉的部分就是模拟数据。

  我们在js部分,只需要通过jsonp请求道数据,然后按照模拟数据的格式,填充到ul里就行了。

  四、案例的js部分

  直接看代码

 1 <script src="js/jquery-3.3.1.js"></script>
 2 <script>
 3     function callback(data){
 4         //1.清空ul#wtInfo
 5         $("#wtInfo").html("");
 6         //2.呈现数据
 7         var wt = data.weather;
 8         $.each(wt, function(index, ele){
 9             var date = ele.date;
10             var day = ele.info.day;
11             var night = ele.info.night;
12             var tag = "<li>";
13             tag += "<h2>" + date + "</h2>";
14             tag += "<div class=\'day\'>";
15             tag += "<h3>白天天气</h3>";
16             tag += "<p>天气:" + day[1] + "</p>";
17             tag += "<p>温度:" + day[2] + "</p>";
18             tag += "<p>风向:" + day[3] + "</p>";
19             tag += "<p>风速:" + day[4] + "</p>";
20             tag += "</div>";
21             tag += "<div class=\'night\'>";
22             tag += "<h3>夜间天气</h3>";
23             tag += "<p>天气:" + night[1] + "</p>";
24             tag += "<p>温度:" + night[2] + "</p>";
25             tag += "<p>风向:" + night[3] + "</p>";
26             tag += "<p>风速:" + night[4] + "</p>";
27             tag += "</div>";
28             tag += "</li>";
29             $("#wtInfo").append(tag);
30         });
31     }
32     $(function () {
33         $("#btn").on("click", function () {
34             var cityCode = $("#selCity option:selected").val();
35             var url =
36                 \'https://cdn.weather.hao.360.cn/sed_api_weather_info.php?app=hao360&_jsonp=callback&code=\' +
37                 cityCode;
38             $("body").append($("<script src=\'" + url + "\'><script>"));
39         })
40     })
41 </script>

  代码解释:

  1.这用到了jQuery,所以第1行代码先引入了jQuery包

  2.jsonp的原理是通过<script>标签发出请求,而本例中不希望一打开网页就显示某一个城市的天气数据,而是要先选择一个,然后点击查询按钮,才发出请求,得到气象数据, 展示数据。

  3.所以我们的思路是:肯定不能在页面上写死那个做jsonp请求的<script src = "......">标签。我们的做法是,当点击按钮时,我们动态的获取到所选select标签中城市的code,然后拼写出待请求的url,最后在文档(document)的body标签底部,动态添加这个做jsonp请求的<script src = "......">标签。

  4.代码中定义的function callback(data)函数,就是用来做回调函数的,在这个回调函数中,主要功能就是解析json数据,然后填充到ul中。本身代码逻辑不复杂,就是拼写每个li,以及li里边的各项元素有点费事而已。

  五、后记

  这个案例,到这里就结束了。我再补充2点:

  1.这个案例中需要大量拼写HTML标签代码,这么做是相当费时费力的,而且容易出错;一旦开发一个复杂点的页面,这么做是非常痛苦的。如何改进?我们可以使用模板技术。前端模板插件很多,最流行的前端模板就是art-template.js,大家可以从网上下载。我在这里给出使用该模板改造本例后的js代码,具体这个art-template怎么用,大家看看他官服的demo就一目了然,非常简单。  

<script src="js/template.js"></script>
<script id="weatherTemp" type="text/html">
    <li>
        <h2><%= date %></h2>
        <div class="day">
            <h3>白天天气</h3>
            <% for(var i=1; i < info.day.length; i++){%>
                <p><%= info.day[i]%></p>
            <% }%>
        </div>
        <div class="night">
            <h3>夜间天气</h3>
            <% for(var i=1; i < info.night.length; i++){%>
                <p><%= info.night[i]%></p>
            <% }%>
        </div>
    </li>
</script>
<script>
    function callback(data) {
        //1.清空ul#wtInfo
        $("#wtInfo").html("");
        //2.呈现数据
        var wt = data.weather;
        $.each(wt, function (index, ele) {
            var html = template("weatherTemp", ele)
            $("#wtInfo").append(html);
        });
    }
    $(function () {
        $("#btn").on("click", function () {
            var cityCode = $("#selCity option:selected").val();
            var url =
                \'https://cdn.weather.hao.360.cn/sed_api_weather_info.php?app=hao360&_jsonp=callback&code=\' +
                cityCode;
            $("body").append($("<script src=\'" + url + "\'><script>"));
        })
    })
</script>

   2.如果我们每次都去分析别人的报文,那将是一个非常痛苦的过程。好在现在有专业的,专门提供数据服务的web api提供商,比如“聚合数据”,百度api商店等等,还有很多,大家可以去网上搜索下。其中有免费的,有付费的。比如聚合数据,申请账号是免费的,提供的服务有的免费,有的付费,不过即使是付费的,也可以免费使用1000次,对于我们学习来说1000次够玩了。

以上是关于AJAXjsonp实战--天气预报的主要内容,如果未能解决你的问题,请参考以下文章

pytorch 迁移学习实战 天气识别

Python实战其实特简单,这样可以轻松爬取天气数据及可视化分析

微信小程序实战之天气预报

2017.08.04 Python网络爬虫之Scrapy爬虫实战二 天气预报

Android实战--天气预报(API+JSON解析)

Android实战--天气预报(API+JSON解析)