網頁上的資料從哪來？

你看到的商品、貼文、影片，其實都是「要」來的。

你在蝦皮上看到 20 個商品。
這 20 個商品不是「寫死」在網頁 HTML 裡的。

想像一下：

👤你（瀏覽器）坐在餐廳裡。
📋你看了菜單，點了「藍牙耳機」。
💪服務生（JavaScript）跑到廚房（伺服器）。
🍳廚房查了一下冰箱（資料庫），找到了 20 個相關商品。
📄廚房把商品清單寫在一張紙上（JSON 資料）。
🍽️服務生拿著紙回來，把每個商品擺到你的桌上（顯示在頁面上）。

這就是「API 請求」的過程。

請求流程

一步一步看，資料是怎麼從伺服器來到你的畫面上的。

步驟 1 / 6

使用者搜尋

你在搜尋框打了「藍牙耳機」，按下 Enter。

Browser
🔍 藍牙耳機
// main.js
const res = await fetch(
"/api/search?q=藍牙耳機"
)
Request
GET /api/search
Response
200 OK + JSON
Server
// route handler
app.get("/api/search")
// 查資料庫
SELECT * FROM products
WHERE name LIKE '%耳機%'

JSON 是什麼？

JSON = 一種寫資料的格式，像是一張有格式的清單。

{
"商品名稱": "藍牙降噪耳機",
"價格": 399,
"有貨": true
}
{ }用大括號包起來 → 表示「一個物件」（一筆資料）
"名稱": "值"冒號左邊是標籤，右邊是內容
"文字"文字要用引號
399數字不用引號
true / false代表「有」或「沒有」

如果有很多筆資料呢？用 [ ] 包起來，變成一組清單：

[
{ "名稱": "藍牙耳機", "價格": 399 },
{ "名稱": "機械鍵盤", "價格": 1280 },
{ "名稱": "手機殼", "價格": 99 }
]
[ ]用方括號包起來 → 表示「一組清單」（很多筆資料）

為什麼有時候要等？

你有沒有在網頁上看過轉圈圈的「載入中」？

那是因為：JavaScript 發了請求之後，不會傻等。 它會先繼續做其他事情（比如讓你繼續滾動頁面），等伺服器回信了再處理。

這段等待的時間，就是你看到「載入中...」的原因。

如果伺服器很遠（在美國）或很忙（雙 11 大促），等待時間就會更長。

shopai.com — 搜尋結果
🔍 藍牙耳機

按「搜尋」開始，看看背後發生了什麼事

Network — 背後發生的事

按上方的「搜尋」按鈕，這裡會顯示瀏覽器和伺服器之間的通訊過程。

1.

網頁上的資料大多不是寫死的，是 JavaScript 去「要」來的

2.

JavaScript 發送請求 → 伺服器回傳 JSON → JavaScript 把資料顯示出來

3.

「載入中」= JavaScript 正在等伺服器的回覆

下一課