API 是什麼？如何串接 API？

API 是什麼？如何串接 API？ | ThisWeb 請網這邊走

javascript

// 建立 XMLHttpRequest 物件
const xhr = new XMLHttpRequest();

// 監聽是否有回傳資料
xhr.addEventListener('readystatechange', () => {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 請求完成且成功
    const response = xhr.responseText;
    // 處理伺服器的響應
    console.log(response);
  }
});

// 用 open() 設置發送請求的方法
xhr.open('GET', 'http://example.com/api/data', true);
// 用 send() 發送請求
xhr.send();

javascript

const title = document.querySelector('.title');
const content = document.querySelector('.content');

// 建立 XMLHttpRequest 物件
const xhr = new XMLHttpRequest();

// 監聽是否有回傳資料
xhr.addEventListener('readystatechange', () => {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 請求完成且成功
    const response = xhr.responseText;

    // 將回傳的資料轉換成可以使用的 JS 物件
    const json = JSON.parse(response);
    // 將獲得的 title 和 body 給頁面
    title.innerText = json.title;
    content.innerText = json.body;
  }
});

// 用 open() 設置發送請求的方法
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);
// 用 send() 發送請求
xhr.send();

javascript

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then((response) => response.json())
  .then((json) => console.log(json));

/*
    {
      "body" : "quia et suscipit...",
      "id" : 1,
      "title" : "sunt aut ...",
      "userId" : 1
    }
  */

javascript

const title = document.querySelector('.title');
const body = document.querySelector('.body');

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then((response) => response.json())
  .then((json) => {
    title.innerText = json.title;
    body.innerText = json.body;
  });

javascript

function getData(id) {
  fetch(
    `https://jsonplaceholder.typicode.com/posts?${new URLSearchParams({
      id: id,
    })}`
  )
    .then((response) => response.json())
    .then((json) => console.log(json));
}

getData(2);

javascript

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  body: JSON.stringify({
    title: 'fetch 教學',
    body: '這是有關 fetch 的一篇教學',
    author: 'this.web',
    userId: 1,
  }),
  headers: {
    'Content-type': 'application/json',
  },
})
  .then((response) => response.json())
  .then((json) => console.log(json)); // 檢查資料是否有回傳

/* 通常會回傳你傳的資料，以下
{
 title: 'fetch 教學'
 body: '這是有關 fetch 的一篇教學',
 author: 'this.web',
 userId: 1,
 ...
}
*/

javascript

const post = fetch('https://jsonplaceholder.typicode.com/post/100')
  .then((response) => {
    if (!response.ok) {
      throw new Error(response.status);
    }
    return response.json();
  })
  .then((json) => console.log(json))
  .catch((error) => console.log(error));
// Error: 404

API 是什麼？如何串接 API？

免費訂閱電子報！

甚麼是 API?

為甚麼要使用 API?

前端如何串 API

用傳統的 AJAX 串接 API

所以 AJAX 是什麼

使用 AJAX 串接 API

1xx 訊息回應

2xx 成功

3xx 重新導向

4xx 客戶端錯誤

5xx 伺服器錯誤

AJA 實戰

使用 Fetch 串接 API

Fetch 的基本使用

Fetch 實戰

在 Fetch 中帶入參數

Fetch 的常用選項

Fetch 傳接 API 的錯誤處理

小結

下一篇看什麼？

10 大設計網站提升你的審美！讓你的網站更有質感

2026 前端框架怎麼選？React、Vue、Angular 完整比較指南

React 是什麼？2026 完整新手學習指南