Ajax
Ajax 是瀏覽器中的技術(shù)：用來(lái)實(shí)現(xiàn)客戶端網(wǎng)頁(yè)請(qǐng)求服務(wù)器的數(shù)據(jù)随闽。
它的英文全稱是 Asynchronous Javascript And XML，翻譯為 異步 js 和 xml ,簡(jiǎn)稱 Ajax。
同步-異步
同步是 一種 阻塞 方式的代碼執(zhí)行過(guò)程
//代碼按照正常順序就是 阻塞
console.log(1)
console.log(2)
異步是 一種 非阻塞 方式的代碼執(zhí)行過(guò)程 如 ajax凌简、setInterval卷扮、setTimeout
console.log(0);
setInterval(() => {
console.log(2);
}, 1000);
console.log(1);
XML
一種類似html的數(shù)據(jù)格式，表示 數(shù)據(jù)是以 xml格式 在服務(wù)器和瀏覽器上進(jìn)行傳輸?shù)摹?網(wǎng)絡(luò)傳輸數(shù)據(jù)的格式可以大概理解為
-
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 是一種類似對(duì)象的字符串
json 的全稱為：JavaScript Object Notation谨读，是一種輕量級(jí)的數(shù)據(jù)交互格式
"{"name":"菜鳥(niǎo)教程","url":"www.runoob.com","slogan":"學(xué)的不僅是技術(shù)局装，更是夢(mèng)想！"}"
Ajax五種請(qǐng)求方式
Ajax三大關(guān)鍵
- 請(qǐng)求地址:告訴瀏覽器去哪個(gè)服務(wù)器地址和服務(wù)器交互數(shù)據(jù)
- 請(qǐng)求方式:讓瀏覽器選擇合適的方式和服務(wù)器交互
- 請(qǐng)求參數(shù):查詢 或者提交注冊(cè)時(shí)的數(shù)據(jù)
工作中使用ajax的方式
- 原生底層的ajax
- 基于 ajax封裝的js庫(kù) （axios，jquery） 主流
- 面向現(xiàn)代瀏覽器的fetch
axios的介紹
axios是前端圈最火的,專注于數(shù)據(jù)請(qǐng)求的庫(kù)
GET請(qǐng)求(不帶參數(shù))
<script src="./lib/axios.js"></script>
<script>
// 請(qǐng)求地址 http://www.itcbc.com:3006/api/getbooks
// 請(qǐng)求方式 GET
// 請(qǐng)求參數(shù) 可以不傳
axios({
// 請(qǐng)求地址
url: 'http://www.itcbc.com:3006/api/getbooks',
// 請(qǐng)求方式
method: 'GET',
// 請(qǐng)求參數(shù) 可以不傳
}).then(function (result) {
// 我們的數(shù)據(jù) 響應(yīng)回來(lái)了 .then 里面的函數(shù)就會(huì)觸發(fā) result 擁有了后臺(tái)響應(yīng)的數(shù)據(jù)
console.log(result.data.data);
});
</script>
// 請(qǐng)求地址 http://www.itcbc.com:3006/api/getbooks
// 請(qǐng)求方式 GET
// 請(qǐng)求參數(shù) 可以不傳
axios({
// 請(qǐng)求地址
url: 'http://www.itcbc.com:3006/api/getbooks',
// 請(qǐng)求方式
method: 'GET',
// 請(qǐng)求參數(shù) 可以不傳
//結(jié)合箭頭函數(shù)
}).then(result=>{
console.log(result);
})
GET請(qǐng)求(帶參數(shù))
- 可以在 url 上來(lái)指定
/api/getbooks?bookname=紅樓夢(mèng)&author=曹雪芹 - 可以通過(guò) params來(lái)指定
/*
axios 發(fā)送get請(qǐng)求 攜帶參數(shù) 兩種方式
1 直接在url上拼接 即可 演示
http://www.itcbc.com:3006/api/getbooks?bookname=斗破蒼穹134&author=我自己
2 在params 對(duì)象中攜帶 本質(zhì) 也是 幫我們將對(duì)象 轉(zhuǎn)成了字符串 然后拼接在 url上
3 實(shí)際開(kāi)發(fā)中 兩種傳遞參數(shù)的方式 都常用的 哪種寫(xiě)代碼方便就使用哪個(gè)ｎ砩小２β觥！
*/
axios({
url: "http://www.itcbc.com:3006/api/getbooks?author=土豆",
method: "GET",
}).then((result) => {
console.log(result);
});
//params上帶參數(shù)
//params只是讓我們可以傳遞對(duì)象格式的參數(shù),axios底層還是會(huì)把它轉(zhuǎn)成url的方式
axios({
url: 'http://www.itcbc.com:3006/api/getbooks',
method: 'GET',
params: {
bookname: '斗破蒼穹134',
author: '土豆',
},
}).then((result) => {
console.log(result);
});
POST請(qǐng)求
在axios中,發(fā)送post請(qǐng)求時(shí),需要在data中來(lái)傳遞參數(shù)
/*
post 新增數(shù)據(jù)
請(qǐng)求的三大關(guān)鍵
1 請(qǐng)求的地址 http://www.itcbc.com:3006/api/addbook
2 請(qǐng)求的方式 POST
3 請(qǐng)求的參數(shù) data 來(lái)傳遞
*/
axios({
url:"http://www.itcbc.com:3006/api/addbook",
method:"POST",
data:{
bookname:"從入門(mén)到出去",
// bookname:"1",
author:"黑馬77",
publisher:"白馬",
appkey:"sdfr34343"
}
})
.then(result=>{
console.log(result);
})
DELETE請(qǐng)求
DELETE 請(qǐng)求 攜帶的參數(shù) 類似 GET 請(qǐng)求塑径，需要在 params 中或者 url 上來(lái)添加
// 用params攜帶參數(shù)
axios({
url: "http://www.itcbc.com:3006/api/delbook",
method: "DELETE",
params: {
id: 8178,
appkey: "996007",
},
}).then((result) => {
console.log(result);
});
// 在url攜帶參數(shù)
axios({
url: "http://www.itcbc.com:3006/api/delbook?id=734&appkey=996007",
method: "DELETE",
}).then((result) => {
console.log(result);
});
PUT 和 PATCH 請(qǐng)求
以上兩個(gè)請(qǐng)求和 POST 請(qǐng)求類似女坑，都是在 data 上 傳遞數(shù)據(jù)
