## <font class="h2">什麼是 AJAX</font>

###### tags: `javascript`
<style>
.h2 {
background: linear-gradient(135deg,#fff,#537479) ;
color: #537479;
display:block;
padding: 6px 5px;
border-radius: 4px;
}
.h3 {
background: linear-gradient(180deg,#fff 50%,#c9d5d4) ;
color: #537479;
display:block;
padding: 6px 5px;
border-bottom: 3px solid #537479;
}
.h4 {
color: #537479;
font-weight:bold;
font-size:1.1em;
}
</style>

<br><br><br><br>

:::info
非同步請求 (Asynchronous request)：客戶端 (client) 對伺服器端 (server) 送出 request 之後，==不需要等待結果==，仍可以持續處理其他事情，甚至繼續送出其他 request。Responese 傳回之後，就被融合進當下頁面或應用中。
:::
AJAX即「Asynchronous JavaScript and XML」（非同步的JavaScript與XML技術）==也可稱非同步傳輸、非同步呼叫==，指的是一套綜合了多項技術的瀏覽器端網頁開發技術,能傳輸JSON、XML、HTML與文字檔案等資料。

在非同步請求 (Asynchronous request) 還沒被開發之前，如果我們要瀏覽一則留言，就必須向 Server 重新 request 一個完整的頁面。等待頁面切換的這段時間畫面往往會卡住不動，直到接收 response，才會重新渲染 (render) 畫面。

傳統的Web應用允許使用者端填寫表單（form），當送出表單時就向網頁伺服器傳送一個請求。伺服器接收並處理傳來的表單，然後送回一個新的網頁，但這個做法浪費了許多頻寬，因為在前後兩個頁面中的大部分HTML碼往往是相同的。由於每次應用的溝通都需要向伺服器傳送請求，應用的回應時間依賴於伺服器的回應時間。這導致了使用者介面的回應比本機應用慢得多。

與此不同，==AJAX應用可以僅向伺服器傳送出必須的資料請求,讓網站不需要重新整理、讀取整個頁面的技術==，並在客戶端採用JavaScript處理來自伺服器的回應。因為在伺服器和瀏覽器之間交換的資料大量減少，伺服器回應更快了。同時，很多的處理工作可以在發出請求的客戶端機器上完成，因此Web伺服器的負荷也減少了。
<br>

### <font class="h3">網頁請求</font>
問號後面是網路參數
<br>

<br>

<br>

### <font class="h4">網頁請求表頭-Content-type傳送內容的格式</font>

常見的格式:
application/x-www-form-urlencoded: 表單默認的提交數據的格式
application/json：JSON數據格式
text/html ： HTML格式
text/plain ：純文本格式
text/xml ： XML格式
multipart/form-data:檔案格式
image/jpeg ：jpg圖片格式
image/png：png圖片格式
<br>

:bulb:CDN:外連資源
:arrow_right:[Request/Response](https://hackmd.io/@grayshine/HyjX_1ZdF)
### <font class="h3">發出網頁請求</font>
### <font class="h4">➤JavaScript原生寫法</font>
### ➤`XMLHttpRequest`(較成熟)

function reqListener () {
  console.log(this.responseText);
}

let req = new XMLHttpRequest();
req.addEventListener("load", reqListener);
req.open("GET", "http://www.example.org/example.txt");
req.send();

<br><br><br><br>

### ➤`Fetch`(較新，要看瀏覽器是否支援)

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json()
  })
  .then(function(myJson) {
    console.log(myJson);
  }).catch(function(error){
    console.log(error)
})

### Response有多種方法讓我們取得資料(內容主體)
`response.json()`：把資料轉成JSON格式
`response.text()`：把資料轉成text格式(變成純字串)
`response.blob()`：把資料轉成Blob物件
`response.formData()`：把資料轉成FormData物件
`response.arrayBuffer()`：把資料轉成二進制數組

https://wcc723.github.io/javascript/2017/12/28/javascript-fetch/
<br><br><br><br>

### <font class="h4">➤套件，需額外載入JS</font>

### `axios`(底層是`XMLHttpRequest`，語法較精簡，支援Node.js前後端通吃):arrow_right:[git連結](https://github.com/axios/axios)

==axios是基於promise基礎開法的套件==

axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

axios.get('/user/12345')
  .then(function (response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });

<br>

### <font class="h3">常見的請求方法</font>
:::danger
- GET:取得資料
- POST:更新一筆資料，如果存在這筆資就會覆蓋過去
- PUT:修改資料 (全部)
- PATCH：修改資料 (局部)，增加或部分更新一筆新的資料。
- DELETE

:::


<br>

### 範例: