---
# System prepended metadata

title: Ajax
tags: [Javascript]

---

###### tags: `Javascript`

# Ajax 


## 概念篇

- Ajax是非同步傳輸
Ajax程式碼讀取的時候，若檔案太大，會先讀取下面的程式碼之後再跑回頂部讀取。

chrome:101
server端接收到user端請求

chrome:200
請求成功，傳回user端

chrome:404
伺服器找不到請求的支援

chrome:304
資料已經在瀏覽器快取中，不會向伺服器發出請求，會直接透過瀏覽器取得資源

chrome:500
伺服器發生未知的錯誤

## 實際操作篇
- 讀取json.操作資料實做
```javascript=
axios.get('https://hexschool.github.io/ajaxHomework/data.json')
  .then(function (response) {
    let ary = response.data;
    console.log(ary[0].name);
    const title = document.querySelector('.title')
    title.textContent = ary[0].name;
  });
```

- Post 實作
```javascript=
let obj = {
  email:'gonsalon3@gmail.com',
  password:'123'
}


axios.post('https://hexschool-tutorial.herokuapp.com/api/signup',obj)
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error){
    console.log(error);
  });
```

- 


