---
# System prepended metadata

title: 什麼是 API？
tags: [' 網頁組', 研究, ' 前端']

---

---
title: 什麼是 API？
tags: 研究, 網頁組, 前端
---


# 什麼是 API？

[TOC]

什麼是 API？讓我們先看一下影片：

<iframe width="640" height="360" src="https://www.youtube.com/embed/zvKadd9Cflc" title="什麼是 API？" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## 所以什麼是一個 API？

API 全名是 Application Programming Interface，字面解釋就是應用程式串接的介面。
所以其實只要是給程式串接用的，就可以算是 API，並不限於在網站上才叫做 API。
但我們今天先以網頁的部分來說。

## API 其實跟一般網頁差不多

沒錯，API 其實跟一般的網頁差不多。

舉例來說，你看到的網頁可能長這樣：

| 程式                                 | 顯示                                 |
| ------------------------------------ | ------------------------------------ |
| ![](https://i.imgur.com/eqCWccZ.png) | ![](https://i.imgur.com/jFwh5CQ.png) |

實際上，這些內容也是資料經過美化（或視覺化）過後呈現給你的，就叫做網頁。

而沒有美化過的，只有資料的，就叫做 API，像是這樣：

| 程式                                 | 顯示                                 |
| ------------------------------------ | ------------------------------------ |
| ![](https://i.imgur.com/CS5S6z9.png) | ![](https://i.imgur.com/sj0eFSu.png) |

所以，在網頁中，API 與一般網頁的差異在哪裡？
**最主要的**差異就只是回傳的東西不同，一個是美美的畫面，一個是純粹的資料。

| 網頁：畫面（HTML）                   | API：資料（JSON）                    |
| ------------------------------------ | ------------------------------------ |
| ![](https://i.imgur.com/opaROwV.png) | ![](https://i.imgur.com/mYGT8Tr.png) |

## 只有內容的不同嗎？

當然，除了內容不同之外，用法也有一些差異。

## HTTP 請求

在網頁的請求 (request) 中，[有很多不同的請求方法 (method)](https://www.w3schools.com/tags/ref_httpmethods.asp)。
我們先講兩種最重要的，有 GET 跟 POST 兩種請求方法。

### Get 請求

最基礎的就是 Get 請求，其實你現在也正在做這件事情。
只要你打開瀏覽器，瀏覽任何一個網頁的時候都是使用 Get 請求在跟網站互動。

像是你打開 Google，就是發送一個 Get 請求給 www.google.com。

#### 攜帶參數

如果我們需要攜帶一些參數給網頁，就可以透過在網址上面加入特定規則的內容提供給伺服器。

像是如果我們在 Google 進行搜尋「Http 請求 method」，就會是下面這個網址：

https://www.google.com/search?q=http+%E8%AB%8B%E6%B1%82+method

其中 `https://www.google.com/search` 是我們送請求的目標網址，而從 ? 開始的 `?q=http+%E8%AB%8B%E6%B1%82+method` 則是我們這次附帶的參數。

其中這個裡面攜帶了一個參數而已，名字叫做 `q`，則參數內容是 `http+%E8%AB%8B%E6%B1%82+method`。由此可以看的出來，一個變數是使用 = 分割，前面是變數名字，後面是內容。不過內容怎麼長得很特別呢？內容其實是「Http 請求 method」經過 URI [百分號編碼](https://zh.wikipedia.org/wiki/%E7%99%BE%E5%88%86%E5%8F%B7%E7%BC%96%E7%A0%81) 過後的結果。

若想要在網頁中手動達成，可以透過原生的 [encodeURI](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/encodeURI) 等等方法操作。

#### 攜帶多個參數

可是上面只有一個參數，如果想要多個呢？就用 & 來分隔即可。

舉例來說，如果你到 YouTube Music 任何一個影片點分享，可能會拿到下面這樣的連結：

https://music.youtube.com/watch?v=wLNTAMY1NZA&feature=share

就可以看到這個網址裡面包含兩個變數：

| 名稱    | 內容        |
| ------- | ----------- |
| v       | wLNTAMY1NZA |
| feature | share       |

### Post 請求

Post 請求就有點不一樣了，單純地透過瀏覽器打網址，是無法送出 Post 請求的。
要在網頁中送出 Post 請求，要透過 HTML 中的表單 (Form) 或是透過 JavaScript 進行請求。

而攜帶參數的方法，除了可以跟 Get 一樣透過網址攜帶之外，還可以透過 HTTP Body 帶入更多內容。

HTTP Body 比起單純使用網址，有可以傳送更長的資料、更多種的資料（像是圖片、影片）等等優勢，且因為不是在網址，在使用 Https 的狀況下，會經過 SSL 加密而更加安全。


### 登入的實作

可以分別透過 Get 與 Post 方法做看看登入。

#### 使用 Get

假設我們只是把帳號密碼顯示出來：

```php=
<?php

$account = $_GET["account"];
$password = $_GET["password"];

echo "Account: $account";
echo "<br>Password: $password";
```

當使用 Get 進行登入，就會將帳號密碼帶到網址內：

https://localhost/login?account=aaa&password=bbb

![](https://i.imgur.com/VZaWJkw.png)

因此，光是在瀏覽紀錄中，就可以看見帳號密碼了。

也可以使用 Postman 測試看看：

![](https://i.imgur.com/dvqYqUg.png)


#### 使用 Post

假設我們只是把帳號密碼顯示出來：

```php=
<?php

$account = $_POST["account"];
$password = $_POST["password"];

echo "Account: $account";
echo "<br>Password: $password";
```

而使用 Post 方法時，送出後會透過 http body 攜帶，就會較安全。



可以使用 JavaScript 進行請求：

![](https://i.imgur.com/rVSFEWp.png)

然後使用 F12 開發者工具看看結果：

![](https://i.imgur.com/gYkkzTM.png)

![](https://i.imgur.com/oBX7Q0m.jpg)

也可以使用 Postman 進行請求測試看看：

![](https://i.imgur.com/z3GXlaZ.png)

## 我現在知道內容不同、方法不同了。那如果是資料，我要怎麼呈現？

有一個非常多地方都在用的一個資料格式，你一定要會，它叫做 JSON。

### JSON 是什麼？

- 資料格式：類似 String、int，更像 PHP 中的 Object。
- 自由、輕量、易讀、易寫。


![](https://i.imgur.com/z1cCHWP.png)

在 PHP 中，大家可以透過 `json_encode(資料)` 的方式把變數轉換成 JSON。