什麼是 Ajax? 搞懂非同步請求 (Async request) 概念

Ajax 是什麼

Ajax 是 Asynchronous JavaScript and XML 的縮寫,這篇帶你了解Ajax是什麼,幫助你釐清非同步請求的概念,同時看完後能學會使用 axios 向第三方請求資料。

  • Asynchronous:非同步
  • JavaScript:使用的程式語言
  • XML:Client 與 Server 交換資料用的資料與方法,近年由於 JSON 等格式的流行,使用 Ajax 處理的資料並不限於 XML。

Ajax 並不是單一的技術,而是一套綜合性的瀏覽器端網頁開發技術,因 Google 在 2005 年推出 Gmail 服務時採用此技術大獲成功而知名。

Ajax 提升使用者體驗

網站性能優化:使用 Ajax 實現動態載入

傳統的網站在瀏覽不同頁面時,每次都需要向伺服器發送請求並等待回應,而且瀏覽器還需要重新渲染整個頁面,這在一些情況下可能導致延遲和不良的用戶體驗。但如果使用 Ajax,我們可以只更新頁面上的某些部分,而不是整個頁面。這就是所謂的「動態載入」。

使用者體驗改善:使用 Ajax 實現無刷新更新

傳統的表單提交會導致瀏覽器重新載入頁面,這可能會打斷用戶的操作流程,影響用戶體驗。但是,如果我們使用 Ajax 來處理表單提交,就可以在不重新載入頁面的情況下將數據發送到伺服器,並根據伺服器的回應更新頁面。這稱為「無刷新更新」。

例如,在社交網站上,你可以使用 Ajax 提交一個新的評論或狀態更新,然後立即在頁面上看到你的更新,而不需要等待瀏覽器重新載入整個頁面。這種方法改善了使用者體驗,讓網站感覺更加流暢和即時。

在 Ajax 這個名字裡,最難理解的就是「非同步」的部分了,以下讓我來看看到底什麼是「非同步」,而「非同步請求」又是什麼。

程式設計入門,4 週零基礎建立數位職涯基礎能力


非同步

當你在使用 DOM 事件時,其實你已經在運用非同步的概念,你不知道事件什麼時候會發生,但你可以先把要發生的函式準備好,等到事件發生時,就進行處理。

相對於在網頁一開始時就進行一連串動作,上述這種流程稱為「非同步」。由於 JavaScript 可以把函式當成值來傳遞,因此執行程序可以非同步的發生。

當我們在串接第三方 API 時,由於要等待遠端伺服器回應,等待的時候有可能會大幅影響到使用者的體驗,因此「非同步請求」變得更加重要。

延伸閱讀:API是什麼?認識 Web API、HTTP 和 JSON 資料交換格式


同步請求 v.s. 非同步請求

接著讓我們引入客戶端與伺服器端的概念,來看看「同步請求」和「非同步請求」的對比:

  • 同步請求 (Synchronous request): 客戶端 (client) 對伺服器端 (server) 送出 request ,並且在收到伺服器端的 response 之後才會繼續下一步的動作,等待的期間無法處理其他事情。這個作法並不理想,因為通常伺服器端的運算速度比本地電腦慢上好幾倍。
  • 非同步請求 (Asynchronous request):客戶端 (client) 對伺服器端 (server) 送出 request 之後,不需要等待結果,仍可以持續處理其他事情,甚至繼續送出其他 request。Responese 傳回之後,就被融合進當下頁面或應用中。
同步與非同步請求示意圖


Ajax 實現非同步請求 (Asynchronous Request)

在非同步請求 (Asynchronous request) 還沒被開發之前,如果我們要瀏覽一則留言,就必須向 Server 重新 request 一個完整的頁面。等待頁面切換的這段時間畫面往往會卡住不動,直到接收 response,才會重新渲染 (render) 畫面。

而 Ajax 技術的出現,讓瀏覽器可以向 Server 請求資料而不需費時等待。當瀏覽器接收到 response 之後,新的內容就會即時地添入原本網頁。這也是為什麼當我們瀏覽 Facebook、Twitter 內容時,不會看見整個網頁一直重新整理。

最早期的 Ajax 會利用一個 XMLHttpRequest 物件 (簡稱為 XHR ) 來實作,類似這樣:

xmlhttprequest

在上面的例子裡,我們首先建立了一個 XMLHttpRequest 物件,並使用 .open() 開啟一個 URL,最後使用 .send() 發出 request。

由於 XHR 使用起來很麻煩,所以實務上很少直接使用原生的 XMLHttpRequest。取而代之的方法有很多種,過去較流行的是 jQuery 的 $.ajax(),然而在 JavaScript 日趨成熟之後,許多新的替代方案應運而生,例如 HTML5 提供了 Fetch API,而我們使用的 axios 是一個非常受歡迎的 JavaScript 函式庫,他有許多重要功能如:

  1. 廣泛的瀏覽器支持
  2. 可支援 Node.js 從後端發送的 Http request,這意味著 axios 可以兼用於前端與後端專案。
  3. 直接將回應的 JSON 資料轉換成 JavaScript 的 Object,這十分方便!

[optin-monster-inline slug=”q9c8jelrbkhccctuc740″]


常見的 Ajax 框架和工具

  1. jQuery:這是最知名且最廣泛使用的JavaScript庫之一,提供了強大的Ajax功能,讓開發者可以用簡潔的語法進行非同步的HTTP請求。
  2. Axios:這是一個基於Promise的HTTP客戶端,用於瀏覽器和node.js。它有著寬廣的瀏覽器支援並提供了許多實用的功能,如攔截請求和回應、取消請求、轉換JSON數據等。
  3. Fetch API:這是瀏覽器原生提供的一個用於數據取得的介面,基於Promise設計。它是Ajax的一種現代化替代方案。

用 axios 發送 GET Requests

透過 axios 發送 GET request 的方式非常簡單,只要如以下的方式打出 axios.get(url) 就可以了:

axios.get(url)

在這個結構中,我們使用 then() 及 catch() 來處理不同的狀況:

  1. 第一個 then() 函式負責處理成功接收到的 response。其中 response 參數就是接收到的回應,而你所需的資訊則放置在 response.data 裡面。
  2. catch() 函式負責處理發生錯誤的狀況,也就是 error。
  3. 第二個 then() 則是一個選擇性的元件,無論 request 成功與否,它都將被執行。

例如在剛才的實作中,我們用到了以下程式碼:

 then() 及 catch()

現在你知道了什麼是 Web API,也知道了 request / response 溝通流程,更認識了溝通的格式 (JSON) 和工具 (axios)。


Ajax的重要性與發展前景

Ajax的技術早已成為現代網頁開發的一個重要標準。其非同步性質能提升網頁的性能並優化使用者體驗,透過動態載入並實現無刷新更新,讓網站更流暢,更迅速地回應使用者的行為。隨著Web 2.0和單頁應用(SPA)的興起,Ajax的重要性將持續增加。

然而,Ajax並不是無所不能。考慮到安全性和使用者隱私,還有在某些情況下,完全依賴Ajax可能並不理想。因此,瞭解何時以及如何使用Ajax是一項重要的技能。

JavaScript 全端開發課程,16 週進度班帶你半年轉職工程師