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 物件，並使用 .open() 開啟一個 URL，最後使用 .send() 發出 request。
由於 XHR 使用起來很麻煩，所以實務上很少直接使用原生的 XMLHttpRequest。取而代之的方法有很多種，過去較流行的是 jQuery 的 $.ajax()，然而在 JavaScript 日趨成熟之後，許多新的替代方案應運而生，例如 HTML5 提供了 Fetch API，而我們使用的 axios 是一個非常受歡迎的 JavaScript 函式庫，他有許多重要功能如：
- 廣泛的瀏覽器支持
- 可支援 Node.js 從後端發送的 Http request，這意味著 axios 可以兼用於前端與後端專案。
- 直接將回應的 JSON 資料轉換成 JavaScript 的 Object，這十分方便！
用 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 提高使用者體驗
在一般的情境下，瀏覽器每次發出請求，都會接收到一個完整的 HTML 網頁，而伺服器回傳新網頁、瀏覽器重新演算網頁的過程，有一小段空白的等待時間。若使用者在網路不穩定的地方連線，或者傳遞的資料量龐大時，這一小段的空白時間就會嚴重影響到使用者體驗。
另外，從效率考量，有些請求/回應其實只更新了局部的畫面，不需要每次都重新載入一個全新的網頁。因此，為了提升使用者體驗、並提高網頁的效率，而有了 AJAX 技術。透過 AJAX 技術，client 可以向 server 發出非同步請求，索取局部內容的資料進行抽換，大幅度降低每次請求與回應的資料量，從而提高了瀏覽速度。
使用 AJAX 不僅可以讓使用者在不刷新畫面的情況下繼續操作，不會有在操作途中「中斷」與「等候」的時間，創造了更佳的使用者體驗。
—-