AJAX 從遠端讀取即時資料

10 min readApr 24, 2022

GET 方法串接API 文件讀取資料 ( JSON )

該怎麼接資料？四種 GET 寫法

XMLHttpRequest
Fetch
Axios
jQuery

什麼是 AJAX ？

AJAX 是 Asynchronous JavaScript and XML（非同步的 JavaScript 與 XML 技術）的縮寫，網頁不用重新整理即時地透過瀏覽器去跟伺服器溝通，並且讀取資料。伺服器對 AJAX 資料請求回應，最常與 Javascript 做搭配的就是 JSON。

使用政府資料開放平台的 API 做串接

這次是使用政府資料開放平台取得 JSON 格式的 API 來作示範

YouBike2.0臺北市公共自行車即時資訊

XMLHttpRequest

程式碼 XMLHttpRequest

xhr.open ("GET", dataUrl, true );

true 非同步：預設值，程式碼不會等資料回傳就往下執行程式碼
false 同步：資料回傳完畢才會往下執行程式碼
使用預設值 true 非同步的原因：避免尚未撈取資料就直接卡住，導致後面都動不了

JSON.parse

撈回來的資料型別是陣列 [ ] 內包物件 { }
JSON 傳輸時會被轉換成 string ( 字串 )
使用 JSON.parse 將資料轉換回原本的格式陣列 [ ] 內包物件 { }

// 1.把 API 的 URL 用變數先存起來，等待取用
let dataUrl =
  "<https://tcgbusfs.blob.core.windows.net/dotapp/youbike/v2/youbike_immediate.json>";// 2.new 出一個 XMLHttpRequest 物件 (進行資料請求)
let xhr = new XMLHttpRequest();// 3.GET 方法，送出一個請求
// open('Method',API 的 URL,預設值為 true 非同步進行)
xhr.open("GET", dataUrl, true);// 4.送出請求 (若為 GET 參數則不填，其他則是 null) 
xhr.send();// 5 直接用 onload => 資料接收/送出成功後執行的 function
// XMLHttpRequest 有各種狀態碼 readyState，能夠知道當前進行到什麼狀態
// 0 = 執行前：已經產生 XMLHttpRequest    1 = open() 讀取中：還沒傳送資料過去   2 = send() 已讀取  3 = 資訊 loading 交換中  4 = 撈回資料，完成
// status(HTTP狀態碼):200 正常完成
xhr.onload = function () {
  // 如果 readyState = 4 且 HTTP 狀態碼 status = 200)
  if (this.readyState === 4 && this.status === 200) {
    // 將撈回來的資料存到變數 data
    // xhr.responseText 獲得字串形式的資料 
    // JSON.parse 是 string 轉 object, 方便撈取資料
    let data = JSON.parse(this.responseText);
    // console.log('查看data: ',data);
    let str = "";
    data.forEach(function (item) {
      str += `<div class="card border-dark mb-3">
      <div class="card-header">${item.sarea}</div>
      <div class="card-body text-dark">
        <p class="card-text">${item.sna}</p>
      </div>
    </div>`;
    });
    // 選取 DOM
    const list = document.querySelector(".list");
    // 渲染至網頁
		list.innerHTML = str;
  } else {
    console.log("沒有取得資料");
  }
};

Fetch

程式碼 Fetch

fetch後方會接 then()，這是 Promise base，資料取得後在 then 進行接收。
return response.json(); 的資料則會傳到下一個 then()
catch 作為錯誤回應 (404, 500…)
回傳的為 ReadableStream 物件，需要使用對應方法取得資料物件
arrayBuffer()
blob()
formData()
json()
text()

// 1.把API的URL用變數先存起來，等待取用
let dataUrl =
  "<https://tcgbusfs.blob.core.windows.net/dotapp/youbike/v2/youbike_immediate.json>";
// 2.使用 Fetch  
fetch(dataUrl, {})
  .then((response) => {
    // 取到一個 ReadableStream 的物件
    console.log(response);
    // 透過 blob(), json(), text() 轉成可用的資訊
    return response.json();
  })
  .then((jsonData) => {
    let data = jsonData;
    console.log("查看data: ", data);
    let str = "";
    data.forEach(function (item) {
      str += `<div class="card border-dark mb-3">
      <div class="card-header">${item.sarea}</div>
      <div class="card-body text-dark">
        <p class="card-text">${item.sna}</p>
      </div>
    </div>`;
    });
    //選取 DOM，並渲染至網頁
    const list = document.querySelector(".list");
    list.innerHTML = str;
  })
  .catch((err) => {
    console.log("錯誤:", err);
  });

Axios

程式碼 Axios

promise base
.then 接收成功資訊
.catch 接收失敗資訊

// html 引入 cdn
<script src="<https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js>"></script>// 取得遠端資料
axios.get('<https://randomuser.me/api/>')
  .then(res => {
  // res 可以取出多筆資料
    console.log(res.data.results);  
  })
  .catch(err => {
    console.log(err.response); // 可以用 console.dir 查看  
  })<!-- 引入axios -->
<script src="<https://unpkg.com/axios/dist/axios.min.js>"></script>// 把 API 的 URL 用變數先存起來，等待取用
const dataUrl =
  "<https://tcgbusfs.blob.core.windows.net/dotapp/youbike/v2/youbike_immediate.json>";let data = [];
axios
  .get(dataUrl)
  .then((res) => {
    // console.log(res.data);
    data = res.data;
    console.log('查看data: ',data);
    let str = "";
    data.forEach(function (item) {
      str += `<div class="card border-dark mb-3">
      <div class="card-header">${item.sarea}</div>
      <div class="card-body text-dark">
        <p class="card-text">${item.sna}</p>
      </div>
    </div>`;
    });
    //選取 DOM，並渲染至網頁
    const list = document.querySelector(".list");
    list.innerHTML = str;
  })
  .catch((err) => {
    console.log(err);
  });

jQuery

程式碼 jQuery AJAX

<!-- 需先安裝jQuery ,引入CDN 引入 jQ -->
<script src='<https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js>'></script>// 把API的URL用變數先存起來，等待取用
const dataUrl =
  "<https://tcgbusfs.blob.core.windows.net/dotapp/youbike/v2/youbike_immediate.json>";$.ajax({
  method: 'GET', // 請求方法
  url: dataUrl, // API 的 URL 
  dataType: 'json', // API 的 格式
    success: res =>{ // 成功的話執行
      console.log(res)
      let data = res;
      console.log('查看data: ',data);
      let str = "";
      data.forEach(function (item) {
        str += `<div class="card border-dark mb-3">
        <div class="card-header">${item.sarea}</div>
        <div class="card-body text-dark">
          <p class="card-text">${item.sna}</p>
        </div>
      </div>`;
      });
      //選取 DOM，並渲染至網頁
      const list = document.querySelector(".list");
      list.innerHTML = str;
        },
    error: err =>{ // 失敗的話執行
      console.log(err)
      },
});

什麼是 CORS？

今天再接資料的時候，發現好多都不能接而來是這個 CORS 的關係，CORS 是 Cross-Origin Resource Sharing 的縮寫，開發者開了 CORS 權限，其他開發者才能跨網域撈取資料。想知道某 API 或 JSON 有沒有開 CROS，可以在 test-cros.org 查詢。

以上如有寫錯請指教，謝謝 ~

參考資料