對於新手來說，AJAX課題裏比較難懂的部分應該是背後的運作概念，而非程式碼本身。這個課題會分開幾篇，這篇會先整理有關基本概念與一些術語的意思，下篇開始就會集中講實際操作部分(Fetch、axios等等)以及串接API時的常見問題及處理。

今天會整理以下的知識：

• AJAX基本概念
• API的意思
• HTTP請求方法
• HTTP狀態碼

AJAX基本概念

• AJAX，英文是Asynchronous JavaScript and XML，Asynchronous是非同步，意思是整個技術都是以非同步方式執行
• AJAX是一個技術，不是一種格式或語言
• AJAX技術可以使我們不用刷新頁面，就能更新頁面的資料，令使用者在瀏覽網站時不會被中斷
• AJAX技術可以更新頁面某部分的資料，例如當使用者按下按鈕後，伺服器只會傳回某部分的資料，我們只需要更新該部分的資料。這樣可降低資料量的傳送。
• 用AJAX技術所傳送的資料格式可以不同，例如XML、JSON(最常見)

整體流程：

瀏覽器 ----(HTTP request)----> 伺服器 <--> 資料庫
瀏覽器 <----(HTTP response)---- 伺服器 <--> 資料庫

在網頁使用AJAX技術與伺服器互動，最舊的方法是透過XMLhttprequest語法所產生的物件來完成。但因為現時在處理較複雜的需求時，XMLhttprequest語法結構會變得不好閱讀，所以現時比較建議用fetch、axios套件等來取代XMLhttprequest。

API的意思

在AJAX這個課題裏，我們經常會聽到「API」這個術語，也常常聽到「API接口」這個詞，它們到底是代表什麼呢？這裏推薦Huli詳細但不難懂的文章，這篇文章真的拯救了對API一知半解的我QQ

文中以USB介面比喻API，USB介面使我們可以連接USB隨身碟和電腦(縱使市面上有各種不同廠商生產的USB隨身碟)。API也一樣，它是用來「串接一個程式和另一個程式」，例子如下：

• 我的網頁可以用Facebook登入，於是我去串接Facebook提供的API
• 我的網頁要加入客製化的Google Map，於是我去串接Google Map提供的API

以上例子中，Facebook登入和Google Map地圖，這些都是它們公司自己的功能，如果我要在我寫的程式裏都有這些功能，我就要去串接這些公司提供的API。

這時候我們需要查看這些公司所提供的API文件(API documentation)，看看如何串接它們的API。我們稱這種API做Web API，因為我們是透過網絡來傳送資料。這些文件會提供一個網址，這個網址就是我們常常說的「API接口」。同時，文件也會提及我們需要填上的參數，使我們可以向這個網址發出請求，最後令伺服器傳回資料給我們。

例如我想在我的網頁顯示GitHub上某個專案的commit紀錄。在GitHub的API文件中，我會找到它提供的API接口，{}裏的東西是由自己填寫。

此外，圖中可見GitHub也會提供參數，讓我們能更針對去找出特定資料。例如我可以寫成以下的URL，當中用&去區隔開不同的參數：

https://api.github.com/repos/vuejs/vue/commits?per_page=3&sha=dev

以上寫法就是每頁顯示3筆在dev分支的commit紀錄。

HTTP傳輸協定

在談及HTTP方法前，我們需要了解什麼是HTTP。HTTP是一個協定，全寫是超文本傳輸協定 (Hypertext Transfer Protocol)。它統一了客戶端(client side)與伺服器(server side)之間傳輸資料的方法，例如我要瀏覽Facebook頁面，就會做以下的事：

• 我在瀏覽器輸入Facebook網址，向Facebook伺服器端送出request
• Facebook伺服器端收到request，查看網址是否存在
• Facebook伺服器送回response

我這邊的瀏覽器要按特定規範來發出request，之後伺服器也要按特定規範來送回response，這就是HTTP協定。

整個流程就是本文一開始提及的AJAX流程：

瀏覽器 ----(HTTP request)----> 伺服器 <--> 資料庫
瀏覽器 <----(HTTP response)---- 伺服器 <--> 資料庫

HTTP要求(HTTP request)

當我們在瀏覽器發出HTTP要求，就會用到在HTTP協定的規範中定義的不同HTTP請求方法，最常見的有：

• GET(最常用)：請求特定資料
• POST：提交資料(例子：註冊帳戶、驗證資料等)
• PUT：取代特定資料，通常是更新整個資料
• PATCH：修改特定資料，通常是更新部分資料
• DELETE：刪除特定資料

PUT和PATCH都是用來更新資料。差異之處是，PUT是取代整個資料，而PATCH只是更新部分資料。另外注意，HTML的的表單只能用GET或POST方法，不能以此兩個以外的方法。

HTTP訊息(HTTP response)裏的 HTTP狀應碼

伺服器會根據瀏覽器提出的HTTP要求回傳相應的資料。此外，當中也會一併回傳HTTP狀態碼，用作顯示資料傳送的狀態。

以下簡單劃分不同HTTP狀態碼：

• 2xx：成功 (OK)
• 3xx：重新導向 (Redirection)
• 4xx：用戶端錯誤 (Client Error)
• 5xx：伺服器錯誤 (Server Error)

詳細的HTTP狀態碼可看這篇。

我們可以利用這些狀態碼來做錯誤處理。例如在學習XMLhttpresquest時，我們常常會透過if...else判斷status === 200，從而處理錯誤情況：

const xhr = new XMLHttpRequest();
xhr.open('get','https://randomuser.me/api/',true);
xhr.send(null);

//狀態碼:200代表成功。我們利用此狀態碼去做判斷，做到錯誤處理
xhr.onload = () => {
    if(xhr.status === 200){
        console.log(JSON.parse(xhr.responseText)); 
    }else{
        console.log('請求失敗!')
    }
}

總結

AJAX基本概念：

• AJAX是一個非同步執行的技術
• 不用刷新頁面就能更新網頁資料，不能中斷使用者瀏覽網頁

API意思：

• 程式與程式之間的串接
• API接口是一個網址

HTTP協定：

• 客戶端與伺服器之間傳輸資料的規範
• 瀏覽器向伺服器提出HTTP要求(GET、POST、DELETE...)
• 伺服器除了回傳相應資料，也會回傳HTTP狀態碼

參考資料

AJAX 完整解說系列：基礎觀念
AJAX與Fetch API
輕鬆理解 Ajax 與跨來源請求