在現代網頁開發中，我們經常聽到關於AJAX的詞語，它代表著一項重要的技術，使我們能夠實現在不重新載入整個網頁的情況下，動態地獲取和顯示數據。
今天來認識一下什麼是AJAX以及與之相關的通訊協定和HTTP方法。
AJAX的基礎認識
Ajax 是 Asynchronous JavaScript and XML 的縮寫。
它是一種前端開發技術，用於實現在不刷新整個網頁的情況下，動態地獲取和顯示資料。
所謂的AJAX技術在JavaScript中，即是以XMLHttpRequest物件(簡稱為XHR)為主要核心的實作。
正如它的名稱，它是用於客戶端對伺服器端送出httpRequest(要求)的物件，使用的資料格式是XML格式(但現今AJAX通常使用JSON等格式來處理資料)。
流程即是建立一個XMLHttpRequest(XHR)物件，打開網址然後送出要求，成功時最後由回調函式處理伺服器傳回的Response(回應)。
要記住AJAX並不是單一的技術，而是一組綜合性的網頁開發技術。最早由Google在Gmail中使用，AJAX現在已成為Web開發的重要工具。
client-side 與 server-side
網絡應用程序的運行是基於客戶端-伺服器端（client-server）架構的。在這個架構中：
- 提出請求的一方是客戶端（client-side）。
- 接受請求並提供回應的一方是伺服器端（server-side）。
客戶端和伺服器通常運行在不同的計算機上，例如你的電腦和Google的伺服器。伺服器方擁有資源，客戶端會向伺服器發出請求，以獲取這些資源的內容。伺服器接收請求後，根據需要提供回應。
客戶端和伺服器之間的互動過程被稱為「請求-回應生命週期」（request-response life cycle）。
溝通協定：HTTP
在全球資訊網（World Wide Web）上，我們使用HTTP（超文本傳輸協定）進行通訊。HTTP規定了請求和回應的結構：
裡面協定的細節真的太多了，我自己看得一個頭兩個大。因此我決定直接跳到method。
HTTP Method
什麼是HTTP Method？
HTTP Method是用來指示對資源的操作。每個API都對應一個特定的HTTP請求方法，只有當方法與API完全一致時，伺服器才能根據請求提供資源；反之，方法與 API 無法對應時就會出現錯誤（404 找不到路徑）。
其實你在日常生活中已經不自覺的有使用過這個了。
在我們平常上網時，當我們輸入網址、按下 Enter 鍵瀏覽網頁的時候，此時瀏覽器會向指定網頁發送 GET 請求。
下面是一些常見的HTTP請求方法：
- GET：請求特定資源，不提交任何資料，伺服器僅回應資源。
- POST：提交特定資料以創建資源或更改狀態（例如，登入或註冊）。伺服器會回應新增或更改的結果。
- PUT：取代特定資源，通常用於完全更新資源。伺服器會回應更新的結果。
- PATCH：更新特定資源的一部分，通常用於部分資源的更新。伺服器會回應更新的結果。
- DELETE：刪除特定資源。伺服器會回應刪除的結果。
簡化並用成表格方式呈現：
| 方法 | 描述 |
|---|---|
| GET | 請求特定資源 |
| POST | 提交資料以創建或更改資源 |
| PUT | 取代或更新資源 |
| PATCH | 更新資源的一部分 |
| DELETE | 刪除特定資源 |
這些方法對應不同的操作，伺服器根據方法執行相應的操作。
HTTP response
剛剛介紹了客戶端（client-side）對伺服器端（server-side）的請求，那伺服器端（server-side）會以HTTP response 作為回應。
Status Code
HTTP response的關鍵元素之一是Status Code。它提供有關請求狀態的信息。Status Code是一個三位數字，並且分為不同的類別：
- 1xx 資訊性回應：這些狀態碼表示服務器已經收到請求並繼續處理。
- 2xx 成功回應：這些狀態碼表示請求成功接收、理解並接受。
- 3xx 重定向回應：這些狀態碼表示需要進一步採取操作才能完成請求。
- 4xx 用戶端錯誤回應：這些狀態碼表示請求包含不正確的語法或無法完成。
- 5xx 服務器錯誤回應：這些狀態碼表示服務器未能滿足有效請求。
Response Headers
HTTP response還包括 Headers，提供有關回應的附加信息。一些常見的標頭包括：
- Content-Type：指定回應中的內容類型，例如text/html、application/json等。
- Content-Length：指示回應主體的大小（以字節為單位）。
- Server：識別服務器使用的軟件。
- Date：指定生成回應的日期和時間。
以上是簡略的介紹，如果有錯也請大家跟我說～
參考資料：
https://ithelp.ithome.com.tw/articles/10252553
https://ithelp.ithome.com.tw/articles/10247342
https://blog.techbridge.cc/2017/05/20/api-ajax-cors-and-jsonp/
https://eyesofkids.gitbooks.io/javascript-start-from-es6/content/part4/ajax_fetch.html