前言

大概去年的時候我才知道有鐵人賽這個東西，今年又看到鐵人賽要開始的消息時，我就開始想，如果我要參加的話，那我要寫什麼呢？
最近碰巧在學 ReactJS ，但 React 是個特別熱門的題目，歷屆都很多人寫。雖然並沒有得獎的心思，但實在不想要給自己太多競爭者，想來想去還是來練基本功，寫多一點網站吧。
然後又想到我一直都搞不懂 AJAX 是什麼，也一直不會接 API 呢，那就來接 API 好了，而且要接很多個。

接 API 主要是指 第三方提供的 Web API ，比如說 Facebook API 、Youtube API 等。
那要接哪些呢，當然是都接阿。
以下是想接的主題：

• 地圖
• 天氣
• 定位
• 社群媒體
• 新聞
• 字典/百科/翻譯軟體
• 健康/健身
• 簡訊
• 支付
• 語音/影像辨識
• 遊戲

然後在決定要把這系列叫做 <我每天都接一個API>的時候，被妹妹吐槽說 It’s a lie 了哈哈哈。

基礎 XHR

現在我要認真學接 API 了。
通常這種時候，就是看看網路上有沒有什麼教學吧，但剛開始真是非常困惑。
有那麼多關鍵字： AJAX 、Fetch API 、 Promise 、$.ajax()、HTTP Request
呃要先學哪一個阿，有順序嗎？好像一團打結的毛線一樣。
後來被帥氣的前輩說了一句「你先去搞懂 XHR 吧」，才找到一個開始解結的線頭阿。

在閱讀完這篇<輕鬆理解 Ajax 與跨來源請求>之後，大概理解了 AJAX 是什麼，然後我又看了這個 Youtube 影片：AJAX Crash Course (Vanilla JS)

邊看影片邊搭配 MDN 的教學：
MDN - XMLHttpRequest (XHR)
MDN - Using XMLHttpRequest

還看了 XMLHttpRequest 的歷史：
High Performance Browser Networking - XMLHttpRequest

這樣應該夠用了吧？剩下的就實作再說了阿。

以下是給懶得經歷我所經歷過的教學的人：

// ㄧ個基礎的XMLHttpRequest物件如下

function makeARequest(){
  // 建立一個新 XHR Object
  var xhr = new XMLHttpRequest();
  
  // 用.open() method 開始一個 request
  // 必須傳入兩個參數，第一個是 HTTP method，第二個是 request 要傳向的目的地 url 
  // 也就是放你得到的 api url 的地方
  xhr.open("GET", "http://www.example.org/example.txt");
  
  // 當 request 成功完成之後，會執行的 callback
  xhr.onload() = function(){
   // Do something with the retrieved data
  };
  
  // 送出 request
  xhr.send();
  
}

最後，所有文章的 source code 都會放在 CodePen Collection 裡面。
CodePen 連結