iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 24
0

今天試著用中央氣象局提供的API練習AJAX
可以先到氣象資料開放平台註冊。
會在使用說明的地方獲得一組授權碼,
這個授權碼是會用到的apikey,
另外我想找的是台北市的兩天內天氣,
data的id 是F-D0047-061

有了以上的資料就可以來嘗試取得台北市未來兩天的天氣了,

//創建一個 XMLHttpRequest Object
var xhttp = new XMLHttpRequest();    

// 處裡回傳回來的資料
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    console.log(xhttp.responseText);
  } else {
    console.log(this.status);
    console.log(this.readyState);
  }
}
// send a request to a server
xhttp.open('GET', 'https://opendata.cwb.gov.tw/fileapi/v1/opendataapi/{dataid}?Authorization={apikey}&format={format}', true);
xhttp.send();   

執行的結果會發現並沒有成功,
打開Devtools 會發現 No 'Access-Control-Allow-Origin' header is present on the requested resource.

原來是因為兩個網站在不同domain,可以發送request,但response會被擋下來。

該怎麼解,明天來研究看看!


參考資料

輕鬆理解 Ajax 與跨來源請求

氣象資料開放平台
氣象資料開放平台使用說明


上一篇
[23] IDKJS - AJAX - 處理伺服器傳回的資料
下一篇
[25] IDKJS - AJAX - 嘗試解決AJAX跨domain
系列文
我在繡房繡小主常服的日子-- 初入前端工程師的第一個小挑戰30

尚未有邦友留言

立即登入留言