Ajax
什么是 ajax
- 一種由瀏覽器 發起 向 服務器 數據交互 的技術
- 全稱是 Asynchronous Javascript And XML 翻譯為 異步 js 和 xml
同步 & 異步
- 同步是 一種 阻塞 方式的代碼執行過程
代碼按照正常順序就是 阻塞
console.log(1)
console.log(2)
- 異步是 一種 非阻塞 方式的代碼執行過程 如 ajax、setInterval、setTimeout
console.log(0);
setInterval(() => {
console.log(2);
}, 1000);
console.log(1);
XML
一種類似html的數據格式，表示 數據是以 xml格式 在服務器和瀏覽器上進行傳輸的。 網絡傳輸數據的格式可以大概理解為
- XML
- JSON 目前的主流方式
XML
<?xml version="1.0" encoding="UTF-8"?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
JSON
JSON 目前的主流方式 - json 是一種類似對象的字符串
json 的全稱為：JavaScript Object Notation，是一種輕量級的數據交互格式
"{"name":"菜鳥教程","url":"www.runoob.com","slogan":"學的不僅是技術，更是夢想！"}"
瀏覽器和服務器交互的流程
- 瀏覽器負責發起請求
- 服務器負責響應請求
發起ajax的三大關鍵
- 請求地址 （URL）
告訴瀏覽器去哪個服務器地址和服務器交互數據
- 請求方式
讓瀏覽器選擇合適的方式和服務器交互
3.請求參數
1 可以告訴瀏覽器想要查詢 手機中的 比如蘋果 或者 華為
2 又或者做注冊時 可以把數據提交給服務器
請求地址
請求地址主要是由后端程序員提供給前端工程師的使用的。 一般會通過文檔的方式來告訴前端。
文檔地址
https://docs.apipost.cn/preview/f62dc0b91dc8d8ea/c31d9a50dccf65e3?target_id=de83b57c-d2bc-44ba-9401-f5fa7b060cce#3a601b5f-1d2f-4657-97d1-f807c1e9953f
請求方式
發起ajax的5種方式
序號 請求方式 描述
- POST 向服務器新增數據
- GET 從服務器獲取數據
- DELETE 刪除服務器上的數據
- PUT 更新服務器上的數據（側重于完整更新：例如更新用戶的完整信息）
- PATCH 更新服務器上的數據（側重于部分更新：例如只更新用戶的手機號）
請求參數
某些數據，必須要傳遞規定給到服務器，才能成功獲取到對應的數據
- 做注冊時，你不傳遞個人信息給服務器，服務器無法辦法登記你信息完成注冊
- 做查詢數據時，查詢華為手機，你不傳遞如型號、價格、配置，服務器也無法給你返回合適的數據
工作中使用ajax的方式
- 原生底層的ajax
- 基于 ajax封裝的js庫 （axios，jquery）
- 面向現代瀏覽器的fetch
axios
中文官網地址：https://www.axios-http.cn/
英文官網地址：https://www.npmjs.com/package/axios
介紹
GET請求（不帶參數）
- 可以在 url上來指定
- 可以通過 params 來指定
返回值介紹
可以在 url上傳遞
可以通過 params 來傳遞
GET 請求 （多個參數）
- 可以在 url 上來指定 /api/getbooks?bookname=紅樓夢&author=曹雪芹
- 可以通過 params 來指定
可以在 url上傳遞
可以通過 params 來傳遞
params 只是讓我們可以傳遞對象格式的參數，axios底層還是會把它轉成 url的方式
POST 請求
在 axios 中，發送 post 請求時，需要在 data 中來傳遞參數
DELETE 請求
DELETE 請求 攜帶的參數 類似 GET 請求，需要在 params 中或者 url 上來添加
PUT 和 PATCH 請求
以上兩個請求和 POST 請求類似，都是在 data 上 傳遞數據
form表單
阻止表單的默認行為
當一個form標簽中出現以下幾個按鈕，點擊按鈕時，會導致頁面刷新
<form action="">
<button>會刷新</button>
<button type="button">會刷新</button>
<input type="submit" value="會刷新" />
</form>
解決方案
- 給按鈕設置 type = "button"
- 給 form 綁定 submit 事件，然后在事件中阻止默認行為
const form = document.querySelector('form');
form.addEventListener('submit', function (event) {
event.preventDefault(); // 阻止默認行為
console.log('不刷新了');
});
使用JQuery快速獲取表單值
如果表單的字段比較多了，我們使用傳統方式按個獲取表單的值會很麻煩
這個時候可以借助 jQuery 中的 序列化 serialize方法來快速獲取表單數據 serialize 返回的是 a=1&b=2&c=3的數據格式
序列化，其實就是一種把數據 轉成字符串的 說法而已
<body>
<form>
<input id="bookname" type="text" placeholder="請輸入書名" />
<input id="author" type="text" placeholder="請輸入作者" />
<input id="publisher" type="text" placeholder="請輸入出版社" />
<button>提交</button>
</form>
<script src="./jquery.js"></script>
<script>
const form = document.querySelector('form');
form.addEventListener('submit', function (event) {
event.preventDefault(); // 阻止默認行為
const query=$("form").serialize();
});
</script>
</body>
原生js獲取表單值
<script>
const form = document.querySelector('form');
form.addEventListener('submit', function (event) {
event.preventDefault();
const fd = new FormData(this); // this = form dom元素
const usp = new URLSearchParams(fd);
const query = usp.toString();
console.log(query);
});
</script>
axios請求方式的簡寫
在實際開發中，常用的 5 種請求方式分別是：
GET、POST、PUT、PATCH、DELETE
為了簡化開發者的使用過程，axios 為所有支持的請求方法提供了別名：
- axios.get(url[, config])
- axios.delete(url[, config])
- axios.post(url[, data[, config]])
- axios.put(url[, data[, config]])
-
axios.patch(url[, data[, config]])
axios 基地址和攔截器
基地址
方便我們后期統一修改 URL
修改前
axios({
url: 'http://www.itcbc.com:3006/api/getbooks',
method: 'GET',
})
修改后
axios.defaults.baseURL = 'http://www.itcbc.com:3006';
axios({
url: '/api/getbooks',
method: 'GET',
})
