---
# System prepended metadata

title: "\U0001F4DA AJAX"
tags: [javascript]

---

📚 AJAX
===

* AJAX是指不換頁面只換資料的技術(不需要一直浪費時間換頁面、結果重要的資料使用者卻一直遲遲撈不到)
* 網頁請求不是同時發生的，是先跑HTML再跑資料(ex: img、http)，跑到什麼就請求什麼

![](https://i.imgur.com/3hitmlN.png)
狀態碼:
- 200: 成功ok
- 304: 之前載過、沒有新增編輯，因此不會跟伺服器重要
- 500: 伺服器有問題、程式壞掉
- 404: not found
- 101: 對方伺服器運作中(已讀)
- 301: 請求資源的 URI 已被改變，會在回應內給予新的 URI

發出網路請求的種類:
+ JaveScript原生寫法
     - XMLHttpRequest
     - Fetch
+ 套件、需額外載入js
    - axios(先載套件，再寫入檔案)
    
HTML:
```html=
<!--載入套件-->
<body>
    <h1>hello world</h1>
		<!--axios CDN 要放在js的上方-->
		<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
		<script src="all.js"></script>
</body>
```
JS:
```javascript=
//get請求，括號放網址
axios.get('https://hexschool.github.io/ajaxHomework/data.json')
.then(function (response) {
  console.log(response.data);//回傳的資料
  console.log(response.status);//狀態碼
  console.log(response.statusText);
  console.log(response.headers);
  console.log(response.config);
});

//把請求來的資料放在網頁上
axios.get('https://hexschool.github.io/ajaxHomework/data.json')
.then(function (response) {
  const title = document.querySelector("h1");
  title.textContent = response.data[0].name
});
```
:::success
非同步特性: 在丟出請求的時候，會有1秒左右的時間在等待response，這時程式會繼續往下執行、不會等get跑完，等收到response後才會自動跑完get
:::

* get:請求資料
* Post:傳送資料→對方會檢查你的網址格式與資料格式(content-type)是否正確
* delete:刪除資料


常見content-type: (要問清楚資料格式)
- application/x-www-form-urlencoded (用表單格式發出網路請求) ☑️常用
- application/json (json格式、axios預設，但其實也支援其他格式)
- multipart/form-data (檔案格式ex:圖檔、pdf檔)☑️常用
- text/plain (記事本格式)

JS:
```javascript=
//post請求語法

let data = {
  email: '1314520@hexschool.com',
  password: '000000'
}

axios.post("https://hexschool-tutorial.herokuapp.com/api/signup",data)
    .then( (response) => console.log(response))
    .catch( (error) => console.log(error))
```
> 8-> "https://hexschool-tutorial.herokuapp.com/api/signup": 第一個參數擺API網址
> 8-> data: 第二個參數為content-type

## post過程
![](https://i.imgur.com/TyBJujM.png)
> signup是此post請求的名稱
> preflight為試探性的戳伺服器看是否有支援 
> xhr為確認支援後正式送出post請求

![](https://i.imgur.com/nh7gCCv.png)
> request headers為post header
> request payload為post data
> response headers為post response header
> post response data 在 response 裡

## 實作
HTML:
```html=
<body>
    <div class="input">
        <div>
            <label for="mail">帳號</label>
    <input type="text" placeholder="xxx@aaa.com" name="mail" class="mail">
        </div>
        <div><label for="code">密碼</label>
    <input type="text" placeholder="****" name="code" class="code">
        </div>
        <div>
            <input type="button" value="送出" class="send">
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="all.js"></script>
</body>
```
JS:
```javascript=
const send = document.querySelector(".send");
const mail = document.querySelector(".mail");
const code = document.querySelector(".code");

let data = {
  email:"",
  password:""
}

send.addEventListener("click",function(e){
  if( mail.value==="" || code.value===""){
    alert("格式不正確");
    return;
  }
  data.email = mail.value;
  data.password = code.value;
  postAxios();
})

//post請求function
const postAxios = ()=>{axios.post("https://hexschool-tutorial.herokuapp.com/api/signup",data)
    .then(response => {
      alert(response.data.message);
      mail.value ="";
      code.value ="";  })
    .catch(error => error);}
```
[codepen](https://codepen.io/super-shrimp/pen/bGRdywr)
