iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 1
1
Modern Web

我每天都接一個API系列 第 1

[30apis] Day 0 : 前言 + 基礎XHR

前言

大概去年的時候我才知道有鐵人賽這個東西,今年又看到鐵人賽要開始的消息時,我就開始想,如果我要參加的話,那我要寫什麼呢?
最近碰巧在學 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 連結


下一篇
[30apis] Day 1 : OpenWeatherMap
系列文
我每天都接一個API30

1 則留言

1
anniesnoopymd
iT邦新手 5 級 ‧ 2017-12-19 14:49:21

有一個人也寫這個題目
不過她已經棄賽了/images/emoticon/emoticon02.gif
所以我期待你的文章
/images/emoticon/emoticon08.gif

(然後我就是那個寫 React 的人 xD)

對啊我知道那個系列。不過他好像以 Google 的 API 為主,我則是想嘗試不同的 API 。

我要留言

立即登入留言