利用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閱讀 228,505評論 6 533
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,556評論 3 418
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,463評論 0 376
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,009評論 1 312
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,778評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,218評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,281評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,436評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,969評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,795評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,993評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,537評論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,229評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,659評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,917評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,687評論 3 392
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,990評論 2 374

推薦閱讀更多精彩內容

  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,785評論 18 139
  • iOS網絡架構討論梳理整理中。。。 其實如果沒有APIManager這一層是沒法使用delegate的,畢竟多個單...
    yhtang閱讀 5,228評論 1 23
  • 國家電網公司企業標準(Q/GDW)- 面向對象的用電信息數據交換協議 - 報批稿:20170802 前言: 排版 ...
    庭說閱讀 11,055評論 6 13
  • 要么讀書要么旅行,身體和心靈總要有個在路上。巧的是我以前既不喜歡讀書,也不喜歡旅行。不喜歡讀書,是因為大部分空閑時...
    _嗟乎閱讀 291評論 0 0
  • 說明1:標準應用程序包括3類標準段空間:.text運行代段;.data全局變量等具有初始值的數據空間;.bss暫態...
    three_eyelid閱讀 202評論 0 2