Categories: 前端相關

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

使用 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監聽。