前端基礎：從假資料到真資料：Ajax 與 API 串接

說明

在此之前寫網頁都是直接把要的資料寫進 HTML 裡面，但對於一個實況網站來說，這樣子一點用都沒有。所以就必須要去抓資料來，然後放在 html 裡面。

實作流程：

1. 取得實際的資料
2. 把資料轉換成 HTML
3. 放到畫面上

資料怎麼拿呢？

1. 跟誰拿
2. 怎麼拿資料 → API
3. 要拿什麼資料？

twitch 是透過 client--id 去取得資料的，所以只要按照格式使用網址，或是放在 header 就可以通過驗證進而取得資料。

怎麼從瀏覽器呼叫 API？

1. Ajax
2. Asynchronous JavaScript and XML
3. callback function

透過兩種方式

1. XMLhttpRequest
2. $.ajax （底層還是 XMLhttpRequest）

-

XMLhttpRequest：

const xhr = new XMLHttpRequest();
xhr.open('GET', apiUrl, true);
xhr.setRequestHeader('client_id', ClientId);
xhr.send();
xhr.onreadystatechange = function() {
  if (this.readyState === 4 && this.status === 200) {
    let data = JSON.parse(this.responseText);
    console.log(data)
  }
}

readyState 是 XMLhttpRequest 的狀態代碼。

-

JQuery：

$.ajax({
  url: apiUrl,
  success: (response) => {
    console.log(response)
  }
})

可以透過 JSONP 的方式去存取。不過比麻煩，且有安全性疑慮，因為要引用別人的 JS。

另外一種則是 CORS 的方式，就必須要有 header 來判斷可否存取。

總結：

1. API
2. Ajax(xhr, $.ajax)
3. CORS
4. Preflight Request
5. JSONP