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

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

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

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

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

自學網頁開發,免費訂閱電子報,獲取更多技術新知、自學資源與市場趨勢文章

非同步

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

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

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

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

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

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

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

學會運用 AJAX 串接第三方 API,馬上來免費試讀、進一步系統化學習軟體開發實務

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,這十分方便!

用 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 提高使用者體驗

在一般的情境下,瀏覽器每次發出請求,都會接收到一個完整的 HTML 網頁,而伺服器回傳新網頁、瀏覽器重新演算網頁的過程,有一小段空白的等待時間。若使用者在網路不穩定的地方連線,或者傳遞的資料量龐大時,這一小段的空白時間就會嚴重影響到使用者體驗。

另外,從效率考量,有些請求/回應其實只更新了局部的畫面,不需要每次都重新載入一個全新的網頁。因此,為了提升使用者體驗、並提高網頁的效率,而有了 AJAX 技術。透過 AJAX 技術,client 可以向 server 發出非同步請求,索取局部內容的資料進行抽換,大幅度降低每次請求與回應的資料量,從而提高了瀏覽速度。

使用 AJAX 不僅可以讓使用者在不刷新畫面的情況下繼續操作,不會有在操作途中「中斷」與「等候」的時間,創造了更佳的使用者體驗。

—-