筆記 | 使用javascript串接api 撰寫http請求 取得json資料

  • Post category:前端相關
  • Post last modified:2022-08-10
  • Reading time:2 mins read

使用 javascript串接API 是撰寫各種需要跨網站取資料的網頁或app的必要技能,在個人練習上也是很好的取資料方式,有了這些資料就可以做出類似口罩庫存地圖、縣市景點查詢、各縣市空污狀態…等,這次筆記來自於練習使用高雄觀光局提供的API串接取得景點的JSON資料,然後將資料處理後呈現在網頁上。
那麼就開始吧!

先建立一個http請求 和 一個存資料用的陣列

let xhr = new XMLHttpRequest(),
    data = [];

使用.open向提供JSON資料的網站api發送get請求

xhr.open('get','https://api.kcg.gov.tw/api/service/get/9c8e1450-e833-499c-8320-29b36b7ace5c');

這個open的概念比較像是先跟對方網站詢問說,能不能跟你拿資料呢? 這樣

使用.send向對方網站發送需求

xhr.send(null);

如果是要索取對方的全部資料(不是特定資料),就發送null。

使用.onload,或是建立一個函式做load監聽

xhr.onload = function(){ //loading完成後就會繼續執行此function
    let str = JSON.parse(xhr.responseText) //利用.parse轉換成陣列
    ...你要執行的後續程式
}
或
var xhr = new XMLHttpRequest();
xhr.addEventListener("load", mainJs); //loading完成後就會執行mainJs
xhr.open("GET", "http://www.example.org/example.txt");
xhr.send();

function mainJs () {
  let str = JSON.parse(xhr.responseText);
  ...你要執行的後續程式
}

發送後等待對方回傳資料給你,會存在responseText裡,因為瀏覽器也需要時間接收,所以要等接受到資料後才開始處理拿到的資料,因此要使用.onload,或是建立一個函式再做load監聽。

參考資料

https://developer.mozilla.org/zh-TW/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

線上課程所學