---
title: Ajax簡介
tags: 暑假
---
AJAX簡介
===

AJAX 全名是「Asynchronous JavaScript and XML」， 即“==非同步==JavaScript和XML”的意思。

在網頁上的功能主要是用於**網頁前端**與**後端伺服器**==溝通與互動==

前後端的實體以外，在進行 AJAX 之前再來認識幾個專有名詞，分別是 ==API==、==請求==、==回應==。

>簡單說就是網頁不用重新整理，就能即時地透過瀏覽器去跟伺服器溝通，撈出資料。

### AJAX 優點
在Ajax的幫助下我們的網頁只需區域性重新整理即可更新資料的顯示，減少了不必要的資料量，大大提高了使用者體驗，縮短了使用者等待的時間，使得web應用程式更小、更快，更友好。

### API 接口：
所有的 AJAX 都會有對應的 API 接口，API 的接口就是一段網址，不同的網址也對應不同的「HTTP 請求方法」（請求方法會在後面的段落進行介紹），請求方法必須與網址完全對應才可運作。

API 接口就如同點餐的櫃檯，依據用戶想要點的品項、餐點選擇不同的櫃檯。

### 網頁端請求
AJAX 會統一由網頁端發出請求（無論是為了新增資源或取得資源都一律由網頁端發起），依據不同的接口、請求方法進行請求，而伺服器會依據請求的方法、內容來進行回應。

>請求就如同點餐的顧客，會先說明想要什麼樣的餐點、客製化需求、詢問品項細節等抖。

### 伺服器回應
當收到請求後，伺服器會依據請求的方法、內容與資料庫取得資源並統整過濾後進行回應。

>回應是櫃台服務員對於顧客端的回應
如：點餐內容可被接受則加入購物車，如果點餐錯誤則給予顧客適當的回報。

### 關於 HTTP 請求方法
所有的 API 都有對應的 HTTP 請求方法（request methods），方法與 API 完全一致時，後端才能依據請求回應資源；反之，方法與 API 無法對應時就會出現錯誤（404 找不到路徑）。

### 常見的請求方法如下：

- #### GET：請求特定的資源，不會提交任何資源，伺服器僅會依據條件進行回應。
- #### POST：提交特定的資源，通常會用來新增資源或是用以改變狀態使用（登入、註冊等等）。 -> 伺服器會回應新增或改變狀態的結果。
- #### PUT：取代指定的資源，通常用於完整更新。 -> 伺服器會回應更新的結果。
- #### PATCH：更新指定資源，通常用於部分資源更新。 -> 伺服器會回應更新的結果。
- #### DELETE：刪除特定的資源。 -> 伺服器會回應刪除的結果。

- #### HTTP 請求方法：get
- API 路徑：https://jsonplaceholder.typicode.com/posts/1
- 伺服器回應：.then((res) => { /* ... */ })

----

參考網站
[AJAX 完整解說系列：基礎觀念](https://www.casper.tw/development/2020/09/30/about-ajax/)
[Getting a resource](https://jsonplaceholder.typicode.com/guide/)
[淺析Ajax語法](https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/251753/)

-----------
圖片合成素材
[點餐]:https://cgt.hk/wp-content/uploads/2020/09/CGT_POS_Section_02.png
[點餐系統]:https://www.cashier.tw/img/Group10242.png