利用JSONP跨域获取天气数据

免费接口很少有一直比较稳定的,经过简单调查,这里选用了心知天气API,免费版:400次/小时,也就是9600次/天。国内城市数据,天气实况,3天预报,6项生活指数。这个API的免费版已经提供了很多年了,应该算最长寿稳定的那批API了……

心知天气支持的全球城市

根据官方文档,心知天气API不仅支持API密钥Key的验证方式,也支持更安全的签名验证方式。

使用签名验证方式是通过HMAC-SHA1,对请求参数加密后得到的签名字串进行身份验证,避免了将API密钥key明文包含在请求中而造成泄露。签名的生成方式如下:

1. 构造验证参数字符串。

将请求参数按照参数名字典升序排列后,把所有参数param=value&连接起来,即类似URI中Query string的构造方式。目前支持的参数有:UNIX时间戳 ts(单位为秒),签名失效时间 ttl(可选)和用户ID uid。构造好的参数字符串例如:ts=1443079775&ttl=30&uid=U123456789

2. 使用HMAC-SHA1方式,以API密钥(key)对上一步生成的参数字符串进行加密。

常见程序语言通常会内置加密函数,或通过扩展库提供支持。例如在NodeJS中,您可以使用crypto模块中的中的createHmac函数,例如crypto.createHmac("sha1", key)

3. 将上一步生成的加密结果用base64编码,并做一个urlencode,得到签名sig。

例:假设key为"secret",步骤(1)中的参数例子加密后得到的结果应为:dTYeoN8WdOfW4PiwgEdLa0gWFzo=,做完urlencode最终得到的签名sig为:dTYeoN8WdOfW4PiwgEdLa0gWFzo%3d

4. 将上一步得到的签名sig附在参数字符串之后,作为请求的一个参数发送。

上述例子里,请求参数即为:
ts=1443079775&ttl=30&uid=U123456789&sig=dTYeoN8WdOfW4PiwgEdLa0gWFzo%3d

注意:签名失效时间参数 ttl 是可选参数。如果忽略这个参数,生成的签名有效期默认为1800秒(30分钟)。较短的有效期可以使签名更难被盗用。请求中的其它参数,例如location,language,不参与签名。

使用JSONP方式调用

在网页中直接调用API接口,而不通过服务器中转。在请求中使用callback参数指定回调函数的名字,使用签名验证方式,通过 script 的方式调用。

Ajax 的核心是通过 XmlHttpRequest 获取非本页内容,而 jsonp 的核心则是动态添加 <script> 标签来调用服务器提供的 js 脚本。

例子:

<script type="text/javascript" src="https://api.thinkpage.cn/v3/weather/now.json?
    location=beijing&ts=1443079775&ttl=30&uid=[your_uid]&sig=[your_signature]&callback=showWeather"><script>

返回结果:

showWeather({ 
    "results": [{ 
        "location": {
            "id": "WX4FBXXFKE4F",
            "name": "北京",
            ......
});

附完整代码:

// 关联DOM,显示天气数据
var showWeather = function (data) {
    document.getElementById('wtxt').innerHTML = data.text;
    document.getElementById('loca').innerHTML = data.location;
    document.getElementById('temp').innerHTML = data.temperature;
    document.getElementById('weather').style.background 
            = '#00A6FF url("../' + data.code + '.png") 10px 0 no-repeat';
}
// 将jsonp返回的复杂对象精简为只包含所需信息的对象,并存入cookie(假设页面无其他cookie内容)
var convertWeatherObj = function (data) {
    var weather = {
        'location': data.results[0].location.name,
        'code': data.results[0].now.code,
        'text': data.results[0].now.text,
        'temperature': data.results[0].now.temperature
    };
    showWeather(weather);
    document.cookie="weather="+ JSON.stringify(weather) +"; path=/;";
}
// 构造验证参数字符串,发送jsonp请求(需要引用CryptoJS插件进行编码)
var getWeather = function () {
    var time = Math.round(new Date().getTime()/1000);
    var str = "ts=" + time + "&ttl=30&uid=UB93202969";
    var hash = CryptoJS.HmacSHA1(str, "vvjmsobm15dhmwcw");
    var base = hash.toString(CryptoJS.enc.Base64);
    var sig = encodeURIComponent(base);
    var url = "https://api.thinkpage.cn/v3/weather/now.json?
           location=ip&callback=convertWeatherObj&" + str + "&sig=" + sig;
    var script = document.createElement('script');
    script.setAttribute('src', url);
    document.getElementsByTagName('body')[0].appendChild(script);
}
// 当前页面有cookie,则不再发送请求
if (document.cookie != '') {
    var objStr = document.cookie.substring(8);
    var weatherObj = JSON.parse(objStr);
    showWeather(weatherObj);
} else {
    getWeather();
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,911评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,014评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 142,129评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,283评论 1 264
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,159评论 4 357
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,161评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,565评论 3 382
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,251评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,531评论 1 292
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,619评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,383评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,255评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,624评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,916评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,199评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,553评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,756评论 2 335

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,497评论 18 139
  • iOS网络架构讨论梳理整理中。。。 其实如果没有APIManager这一层是没法使用delegate的,毕竟多个单...
    yhtang阅读 5,144评论 1 23
  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 10,802评论 6 13
  • 要么读书要么旅行,身体和心灵总要有个在路上。巧的是我以前既不喜欢读书,也不喜欢旅行。不喜欢读书,是因为大部分空闲时...
    _嗟乎阅读 281评论 0 0
  • 说明1:标准应用程序包括3类标准段空间:.text运行代段;.data全局变量等具有初始值的数据空间;.bss暂态...
    three_eyelid阅读 192评论 0 2