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 這個名字裡，最難理解的就是「非同步」的部分了，以下讓我來看看到底什麼是「非同步」，而「非同步請求」又是什麼。
非同步
當你在使用 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 物件，並使用 .open() 開啟一個 URL，最後使用 .send() 發出 request。
由於 XHR 使用起來很麻煩，所以實務上很少直接使用原生的 XMLHttpRequest。取而代之的方法有很多種，過去較流行的是 jQuery 的 $.ajax()，然而在 JavaScript 日趨成熟之後，許多新的替代方案應運而生，例如 HTML5 提供了 Fetch API，而我們使用的 axios 是一個非常受歡迎的 JavaScript 函式庫，他有許多重要功能如：
- 廣泛的瀏覽器支持
- 可支援 Node.js 從後端發送的 Http request，這意味著 axios 可以兼用於前端與後端專案。
- 直接將回應的 JSON 資料轉換成 JavaScript 的 Object，這十分方便！
[optin-monster-inline slug=”q9c8jelrbkhccctuc740″]
常見的 Ajax 框架和工具
- jQuery：這是最知名且最廣泛使用的JavaScript庫之一，提供了強大的Ajax功能，讓開發者可以用簡潔的語法進行非同步的HTTP請求。
- Axios：這是一個基於Promise的HTTP客戶端，用於瀏覽器和node.js。它有著寬廣的瀏覽器支援並提供了許多實用的功能，如攔截請求和回應、取消請求、轉換JSON數據等。
- Fetch API：這是瀏覽器原生提供的一個用於數據取得的介面，基於Promise設計。它是Ajax的一種現代化替代方案。
用 axios 發送 GET Requests
透過 axios 發送 GET request 的方式非常簡單，只要如以下的方式打出 axios.get(url) 就可以了：
在這個結構中，我們使用 then() 及 catch() 來處理不同的狀況：
- 第一個 then() 函式負責處理成功接收到的 response。其中 response 參數就是接收到的回應，而你所需的資訊則放置在 response.data 裡面。
- catch() 函式負責處理發生錯誤的狀況，也就是 error。
- 第二個 then() 則是一個選擇性的元件，無論 request 成功與否，它都將被執行。
例如在剛才的實作中，我們用到了以下程式碼：
現在你知道了什麼是 Web API，也知道了 request / response 溝通流程，更認識了溝通的格式 (JSON) 和工具 (axios)。
Ajax的重要性與發展前景
Ajax的技術早已成為現代網頁開發的一個重要標準。其非同步性質能提升網頁的性能並優化使用者體驗，透過動態載入並實現無刷新更新，讓網站更流暢，更迅速地回應使用者的行為。隨著Web 2.0和單頁應用（SPA）的興起，Ajax的重要性將持續增加。
然而，Ajax並不是無所不能。考慮到安全性和使用者隱私，還有在某些情況下，完全依賴Ajax可能並不理想。因此，瞭解何時以及如何使用Ajax是一項重要的技能。
JavaScript 全端開發課程，16 週進度班帶你半年轉職工程師
