[網頁設計] 教學：給瀏覽器使用的 Ajax 函式庫

前言

Ajax 在網頁前端程式是相當重要的特性，可說是現代網頁程式的基礎。現代網頁程式能夠在不重刷頁面的前提下更新頁面內容，就是透過 Ajax 和遠端網頁伺服器主機交換資料，再以適當的 JavaScript 程式更新頁面。

先前瀏覽器的 JavaScript API 尚未統一時，大部分的程式人都會用 jQuery 寫網頁程式。現在 jQuery 不若從前重要，新的網頁程式不太會引入 jQuery。但我們仍會需要執行 Ajax 呼叫，所以我們會找尋替代的函式庫。本文列出數個常見的 Ajax 函式庫，比較其特性，讓讀者從中選擇自己所需的函式庫。

為什麼要用 Ajax 函式庫？

其實透過原生的 XMLHttpRequest 物件就可以進行 Ajax 呼叫，為什麼我們會想要用函式庫？

其中一個原因是為了處理 Internet Explorer 等舊有軟體 (legacy software) 所造成的相容性問題 (參考這裡)。原本 jQuery 出現的目的就是在處理瀏覽器相容性的議題，如果我們得支援舊瀏覽器，我們就得面對這個議題。有一些 Ajax 函式庫也有想到這個議題，所以不一定要用 jQuery。

另外一個原因是簡化 API 呼叫的過程。原生的 XMLHttpRequest 物件的呼叫過程寫起來沒那麼簡潔，使用 Ajax 函式庫可以簡化撰寫程式碼的過程。雖然這會帶來一些額外的開銷 (overhead)，實際上影響甚小，使用上不會造成太大問題。

執行 Ajax 呼叫不是引入 jQuery 的理由

雖然 jQuery 可以用來執行 Ajax 呼叫，但我們不應該只為了進行 Ajax 呼叫就引入 jQuery。jQuery 是包山包海的通用型函式庫，很多網頁前端程式的動作都可以用 jQuery 來完成，對於 Ajax 這項單一任務來說，引入整個 jQuery 太肥大了。所以筆者在這篇文章中會介紹一些相對輕量級的 Ajax 函式庫。

常見的 Ajax 函式庫

本節以文字敘述的方式，介紹數個常見的 Ajax 函式庫。如果讀者想要快速比較這幾個函式庫，可以直接跳到下一節，觀看筆者整理的表格。

fetch

fetch 是原生的網頁 API，但不支援舊瀏覽器 (參考這裡)。如果想在舊瀏覽器上使用 fetch API 的話，得加上相關的 polyfill。但這個 polyfill 僅支援一部分的 fetch API，寫程式碼時要注意一下。

由於 fetch 是瀏覽器的網頁 API 的一部分，在 Node.js 上無法使用。

fetch 支援 promise，寫起來相當簡潔。參考以下從 MDN 節錄的例子：

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(JSON.stringify(myJson));
  });

axios

axios 是知名的 Ajax 函式庫，在本文撰寫期間 (西元 2019 年八月)，axios 在 GitHub 上的星星數約在 63k 左右。axios 在瀏覽器及 Node.js 中皆使用相同的 API，所以不用重學另一套 Ajax 函式庫。

由於 axios 支援 promise，可以用簡潔的方式寫 Ajax 呼叫。參考以下假想的例子：

axios
  .post('https://example.com/post/', {
    'id': id
  })
  .then(function (res) {
    /* Manage `res` (response) object here. */
  })
  .catch(function (err) {
    /* Handle error here. */
  });

除了 API 簡潔易寫外，axios 內建 JSON 處理的功能，不用自己手動呼叫 JSON 相關 API。

superagent

superagent 和 axios 相似，同時支援瀏覽器及 Node.js、同樣使用 promise、內建 JSON 處理等。但 superagent 的名氣沒 axios 大，前者在 GitHub 的星星數才 14k 左右。

不過，superagent 對 IE 的支援比 axios 好。axios 僅支援最新版本的 IE (11+)，但 superagent 向下支援到 IE 9+。如果需要 IE 支援度的話可以考慮一下。

Zepto.js

Zepto.js 是一個在 API 上部分相容於 jQuery 的通用型函式庫。由於 Zepto.js 在 API 上刻意和 jQuery 相容，使用 Zepto.js 的程式人不用大幅調整其寫程式的習慣。相較於 jQuery，Zepto.js 主打輕量化，有利於在行動裝置等資源受限的環境中使用。

對於 Ajax 這項特定任務來說，Zepto.js 還是太肥大，支援過多不相關的功能。如果很斤斤計較頁面的大小，可以考慮自行編譯 Zepto.js，在編譯時移除不必要的子模組，幫 Zepto.js 進一步瘦身。

如果還是想用 jQuery

筆者先前提過，對 Ajax 呼叫來說，直接引入整個 jQuery 太肥了。如果真的想要用 jQuery，建議自己編譯 jQuery，並在編譯時去除不必要的特性。在 jQuery 的原始碼站點上，有說明如何篩掉不需要的 jQuery 模組。藉由客製化 jQuery，我們可以取得一個相對輕量的 jQuery 命令稿，幫網站瘦身。

Ajax 函式庫比較表

以下表格列出各個 Ajax 函式庫的特性：

函式庫的大小

fetch、axios、SuperAgent 是針對單一任務的函式庫，其大小固定，沒有客製化的空間。相對來說，Zepto.js 和 jQuery 是通用型函式庫，可藉由客製化幫函式庫進一步瘦身。

在 Node.js 中使用 Ajax 函式庫

由於 Node.js 和瀏覽器的 JavaScript API 有差異，在瀏覽器中使用的 Ajax 函式庫不一定能在 Node.js 中使用。有些 Ajax 函式庫將兩個環境的差異封裝起來，程式人就可以使用在不同環境中使用同一個 Ajax 函式庫存取資料。

CORS (跨來源資源共用)

CORS 是相對新穎的網頁技術。要在網頁程式中使用 CORS，得客戶端 (瀏覽器) 和伺服端 (後端) 皆同時支援才可。如果使用 CORS 存取資源失敗，得根據其錯誤訊息，分別檢查客戶端和伺服端程式，看是那一部分出問題。

對 Internet Explorer (IE) 的支援

Internet Explorer (IE) 算是舊有軟體 (legacy software)，連 IE 的親爸爸微軟都叫大家不要再用 IE 了 (參考這裡)。如果為了某些理由，專案仍得繼續支援 IE，可能要在 Ajax 函式庫上稍微挑一下。

結語

Ajax 算是打造現代網頁程式的基礎特性之一。使用適合專案的 Ajax 函式庫，可以讓 Ajax 任務撰寫起來更輕鬆。本文列出 5 個常見的 Ajax 函式庫，讀者可以從中挑選出適合自己的 Ajax 函式庫。