借助cryptoJS , jsonp跨域，请求心知天气API ，获取天气信息

àì夳堔傛蜴生んèń 2022-07-14 04:00 193阅读 0赞

1.  介绍jsonp的原理
2.  介绍ajax异步使用jsonp
3.  通过加密方式获取心知天气数据
4.  介绍node使用cryptoJS 方式加密数据
5.  介绍在web前端使用cryptoJS 去加密数据
6.  具体介绍了借助ajax的jsonp方式获取心知天气数据的过程
7.  参考文章

之前模仿百度首页，在获取天气信息这一块，比较好奇，就准备尝试着做一下。这一做牵扯出了很多的知识点，于是我在这里记录下来，方便自己，方便别人，也帮心知天气宣传一下，他们的服务做得真的很好[http://www.thinkpage.cn/][http_www.thinkpage.cn]。

打开上面心知数据的官网，有一个V3版本的开发文档。[http://www.thinkpage.cn/doc  
][http_www.thinkpage.cn_doc]首先会有我的信息，这部分包含我的API密钥，我的用户ID。这部分内容要等用户注册登录之后，才能看到具体的信息。

![20161126162416253][]

接着，往下一翻发现有一句如何使用JSONP方式调用。  
工作中Json一直在用，这里看到JSONP，好家伙听过没玩过，一下子好奇心来了，反正没啥事，就研究呗。

![20161126162422597][]

于是开启第一部分：

## 1、jsonp的原理 ##

先说概念：jsonp是动态跨域获取数据的一种方式。  
接着我们来说说jsonp的实现。  
网上对jsonp的解释有很多，我单纯的将其原理列出，如果诸位看官看的不明白，可以点击文章结尾处的参考文档，或者点击本小节结束时的文档，博采众长，进一步学习这部分知识。  
进入正题。  
1.1、我们都知道在HTML页面中，由于跨域规则的限制，我们通过ajax无法请求存在其他域中的普通文件。  
1.2、但是我们又发现，web页面上引入js文件是不受跨域安全机制的影响的。不仅仅如此，所有有src属性的标签，<script>、<img>、<iframe>都可以突破域的限制。  
1.3、恰好此时json数据作为一种格式简单，便于理解的数据交换结构，被大家广泛的使用。关键是json被原生的js支持。

下面补充json对象与json字符串互相转换的方法。

字符串转json对象：
    var obj = str.parseJSON(); //由JSON字符串转换为JSON对象
     或者
    var obj = JSON.parse(str); //由JSON字符串转换为JSON对象
    json对象转字符串：
    var last=obj.toJSONString(); //将JSON对象转化为JSON字符
    或者
    var last=JSON.stringify(obj); //将JSON对象转化为JSON字符

1.4、因此，如果我们可以联想到，在前端直接获取不同域的服务器上的数据，可以通过向目标服务器直接请求一个动态js文件回来（该文件一般以json方式为后缀），之所以是动态的，是因为服务器可以将数据填充到动态文件中。

1.5、发送请求时，使用<script>标签引入的文件是通过get方式获取的，而get请求的后面就可以带参数，这里的参数就是回调函数的名字。

1.6、服务器接受到请求之后，分离出回调函数，再将前端所需要的数据封装成一个对象，以参数的形式给到回调函数中，接着请求返回到前端。  
1.7、返回的动态文件因为在<script>标签中，所以会被立即执行，我们在本地写好的回调函数中就可以对返回的数据做处理了。  
  
注意：以下是重点。  
我们在html文件中，已经写好了函数的声明，将函数名跟在跨域获取数据的脚本后面作为参数，然后准被发送到服务器。  
发送到服务器是通过构造一个script标签来完成的。例子如下：

// 得到航班信息查询结果后的回调函数
        var flightHandler = function(data){
            alert('你查询的航班结果是：票价 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 张。');
        };
    // 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码）
        var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
        // 创建script标签，设置其属性
        var script = document.createElement('script');
        script.setAttribute('src', url);
        // 把script标签加入head，此时调用开始
        document.getElementsByTagName('head')[0].appendChild(script);

当请求到达服务器后，会根据参数，制作一个数据出来。再将这个数据以参数的形式，填充到回调函数的参数中。然后服务器将动态生成的js文件返回。

返回后，回调函数会立即执行。此时我们就达到了跨域从后台获取数据的效果。

## 2、ajax异步使用jsonp ##

此外，我们还应该知道的是，jQuery也是支持jsonp的，它是通过$.ajax的方式支持jsonp的。

$.ajax({
                 type: "get",
                 async: false,
                 url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
                 dataType: "jsonp",
             cache: true,
                 jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
                 jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
                 success: function(json){
                     alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。');
                 },
                 error: function(){
                     alert('fail');
                 }
             });

这里要注意以下几点：  
1、jsonp只能以get方式提交。  
因为它本身就相当于一个动态添加的script标签，而这种方式发出的请求就是以get方式发出去。所以请求类型为get。  
2、cache : true  
jQuery会在请求后默认添加一个时间戳，当有了这个时间戳之后，就不会使用缓存。不过在获取心知天气API时，cache这个值可以不设置。  
3、请求频率  
请求频率要和免费用户的每分钟的次数相匹配，不然会被服务器拒绝服务。  
更多内容：请参考[http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html  
][http_www.cnblogs.com_dowinning_archive_2012_04_19_json-jsonp-jquery.html]这篇文章有例子，讲的也很详细。  
知道了跨域的原理，那么我们接着回到心知数据V3版 API这边，来考虑获取数据。

## 2、通过加密的方式获取数据 ##

**![20161126162855536][]**

## 3.1、介绍node使用cryptoJS 方式加密数据 ##

API中提到采用node.js的crypto模块加密。  
我按照文中的例子做了一个demo，得出的结果与文中结果一致，下面是代码。

var crypto = require("crypto");
    var str = "ts=1443079775&ttl=30&uid=U123456789";
    var key = "secret";
    var result = crypto.createHmac('sha1',key);
    var final = result.update(str).digest('base64');
    console.log(final);

当然也有不用node的测试方法。各位看官可以到[https://1024tools.com/hmac][https_1024tools.com_hmac] 网站中验证上面的数据。  
这里补充些关于node.js加密的知识点：  
首先，如果要使用上述的方法，本地至少有node.js的环境。我测试时用的是6.9.1的版本。

使用require('crypto')调用加密模块  
加密模块需要底层系统提供OpenSSL的支持。它提供了一种安全凭证的封装方式，可以用于HTTPS安全网络以及普通HTTP连接。

crypto.createHash(algorithm)  
创建并返回一个hash对象，它是一个指定算法的加密hash，用于生成hash摘要。参数algorithm可选择系统上安装的OpenSSL版本所支持的算法。例如：'sha1', 'md5', 'sha256', 'sha512'等。在近期发行的版本中，openssl list-message-digest-algorithms会显示这些可用的摘要算法。

crypto.createHmac(algorithm, key)  
创建并返回一个hmac对象，它是一个指定算法和密钥的加密hmac。参数algorithm可选择OpenSSL支持的算法 - 参见上文的createHash。参数key为hmac所使用的密钥。

hash.digest(encoding='binary')  hmac.digest(encoding='binary')

计算所有传入数据的hash摘要。参数encoding（编码方式）可以为'hex', 'binary' 或者'base64'。

hmac.update(data)

更新hmac的内容为指定的data。当使用流数据时可能会多次调用该方法。 更多内容请参考：http://www.jb51.net/article/50668.htm

知道了这一步，我们知道加密的流程是什么样了。不知大家是否注意到例子中有一个ts。  
这个ts其实就是Unix 的时间戳，是当前时间的非格式化表达。  
显然例子中的ts要被替换为当前的时间，这里获取本地时间的方法为：

var myDate = new Date();
    var ts = myDate.getTime();        //获取当前时间(从1970.1.1开始的毫秒数)

参考文章： [http://www.cnblogs.com/carekee/articles/1678041.html][http_www.cnblogs.com_carekee_articles_1678041.html]

## 3.2、介绍在web前端使用CryptoJS加密数据 ##

## 接下来，问题又来了，那么我怎么将加密方式移植到web页面中去呢？ ##

其实呢网上有一个crypto的加密库，它不仅可以在node中使用，也可以在浏览器中以script标签引用的方式使用。下载地址：[https://github.com/brix/crypto-js][https_github.com_brix_crypto-js]  
在这一关，我还是研究了一段时间的。网上有一些方法介绍web端createHmac加密，但是其中<script>引入的用于加密的js文件早已经失效了。所以下面的方法都是我自己摸索出来的。

下面直接写成果，免得大家走弯路。

1、去git上下载crypto-js这个库  
下载好后，在crypto-js-develop\\src文件夹，我们可以看到所有的与加密相关的文件。  
2、在页面中引入cryptoJS的库。  
虽然js文件很多，但是我们需要的js文件却并不多。这里你只需要选择与自己加密方式相关的js文件就即可。

可以看到除了两个核心模块，其他的就是我们在加密过程中需要模块。那么接下来，我们就可以在web页面中执行hmac的加密了。str是被加密的字符串，key是密钥。

var result = CryptoJS.HmacSHA1(str,key);
           var signature = result.toString(CryptoJS.enc.Base64);
    signature = encodeURI(signature);

## 4、借助ajax的jsonp方式获取心知天气数据的过程 ##

首先，组装加密后的请求：

var ts = new Date().getTime();
     var str = "ts="+ts+"&ttl=30&uid=U75028BE2C"; //uid需要换成自己账户中的uid
    
    var result = CryptoJS.HmacSHA1(str,key);  //key需要换成自己账户中的key
    var signature = result.toString(CryptoJS.enc.Base64);
    signature = encodeURI(signature);

接着，组装url：

var url = "https://api.thinkpage.cn/v3/weather/now.json?location="+ city +"&"+str+"&sig="+signature;

然后，ajax发出请求：

$.ajax({
                type: "get",
                async: false,
                cache: false,
                url: url,
                dataType: "jsonp",
                jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
                jsonpCallback:"showWeather",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
                success: function(json){
         		console.log(json)；
                },
                error: function(){
                    alert('fail');
                }
            });

至此，在ajax的回调函数中添加业务逻辑代码，整个jsonp跨域获取数据就ok了，接下来本地测试。心知天气官方需要有域名，并且域名绑定账号才能获取数据，否则连接将一定会被禁掉。

我估计是为了盈利的考虑，一个账号绑定一个域名吧。当然这个地方是我整个文章中唯一不能确认的地方，为什么要这么做。如果各位知道的话，请告诉我。不过需要域名，我就给你一个好了。我们不需要自己搭建一个服务器，或者买一个域名，只需要在本地打一个wamp环境，在host文件中将127.0.0.1映射到例如c.test123.com。然后再将这个域名绑定到你注册心知天气的账号上。

绑定过程类似下面的方式：

![20161126162900083][]

最后将工程放在wamp的www目录下运行就可以了。

整个文章，有自己思考的部分，也有借鉴别人的部分。总体上记录了个人思考发现的整个过程。这一次好奇，解决了一个又一个的问题，完全搞懂了jsonp。谢谢各位大牛的分享，也感谢心知天气的客服耐心细致的回答，希望他们的公司越做越好。  
参考文章汇总：

[http://www.thinkpage.cn/doc  
][http_www.thinkpage.cn_doc][http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html  
][http_www.cnblogs.com_dowinning_archive_2012_04_19_json-jsonp-jquery.html][https://my.oschina.net/jack230230/blog/69826  
][https_my.oschina.net_jack230230_blog_69826][http://blog.csdn.net/uikoo9/article/details/47926903  
][http_blog.csdn.net_uikoo9_article_details_47926903][http://www.cnblogs.com/carekee/articles/1678041.html  
][http_www.cnblogs.com_carekee_articles_1678041.html][http://www.cnblogs.com/worfdream/articles/1956449.html  
][http_www.cnblogs.com_worfdream_articles_1956449.html]

这编辑器好难用，看来我以后要用MarkDown写博客了。

[http_www.thinkpage.cn]: http://www.thinkpage.cn/
[http_www.thinkpage.cn_doc]: http://www.thinkpage.cn/doc
[20161126162416253]: /images/20220714/6d2eabf3f0d8445297f34df87bb06b38.png
[20161126162422597]: /images/20220714/d98dc44a08534409a1242d8eb4ee4156.png
[http_www.cnblogs.com_dowinning_archive_2012_04_19_json-jsonp-jquery.html]: http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html
[20161126162855536]: /images/20220714/6325f8d5ccf34819a6a39ec438e557b1.png
[https_1024tools.com_hmac]: https://1024tools.com/hmac
[http_www.cnblogs.com_carekee_articles_1678041.html]: http://www.cnblogs.com/carekee/articles/1678041.html
[https_github.com_brix_crypto-js]: https://github.com/brix/crypto-js
[20161126162900083]: /images/20220714/9ac7280c1e6d48cc92ef9207c542a098.png
[https_my.oschina.net_jack230230_blog_69826]: https://my.oschina.net/jack230230/blog/69826
[http_blog.csdn.net_uikoo9_article_details_47926903]: http://blog.csdn.net/uikoo9/article/details/47926903
[http_www.cnblogs.com_worfdream_articles_1956449.html]: http://www.cnblogs.com/worfdream/articles/1956449.html