在現代網頁開發中，我們經常聽到關於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：刪除特定資源。伺服器會回應刪除的結果。

簡化並用成表格方式呈現：

這些方法對應不同的操作，伺服器根據方法執行相應的操作。

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