Ajax
Ajax 是瀏覽器中的技術：用來實現客戶端網頁請求服務器的數據。
它的英文全稱是 Asynchronous Javascript And XML，翻譯為 異步 js 和 xml ,簡稱 Ajax。
同步-異步
同步是 一種 阻塞 方式的代碼執行過程
//代碼按照正常順序就是 阻塞
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五種請求方式
Ajax三大關鍵
- 請求地址:告訴瀏覽器去哪個服務器地址和服務器交互數據
- 請求方式:讓瀏覽器選擇合適的方式和服務器交互
- 請求參數:查詢 或者提交注冊時的數據
工作中使用ajax的方式
- 原生底層的ajax
- 基于 ajax封裝的js庫 （axios，jquery） 主流
- 面向現代瀏覽器的fetch
axios的介紹
axios是前端圈最火的,專注于數據請求的庫
GET請求(不帶參數)
<script src="./lib/axios.js"></script>
<script>
// 請求地址 http://www.itcbc.com:3006/api/getbooks
// 請求方式 GET
// 請求參數 可以不傳
axios({
// 請求地址
url: 'http://www.itcbc.com:3006/api/getbooks',
// 請求方式
method: 'GET',
// 請求參數 可以不傳
}).then(function (result) {
// 我們的數據 響應回來了 .then 里面的函數就會觸發 result 擁有了后臺響應的數據
console.log(result.data.data);
});
</script>
// 請求地址 http://www.itcbc.com:3006/api/getbooks
// 請求方式 GET
// 請求參數 可以不傳
axios({
// 請求地址
url: 'http://www.itcbc.com:3006/api/getbooks',
// 請求方式
method: 'GET',
// 請求參數 可以不傳
//結合箭頭函數
}).then(result=>{
console.log(result);
})
GET請求(帶參數)
- 可以在 url 上來指定
/api/getbooks?bookname=紅樓夢&author=曹雪芹 - 可以通過 params來指定
/*
axios 發送get請求 攜帶參數 兩種方式
1 直接在url上拼接 即可 演示
http://www.itcbc.com:3006/api/getbooks?bookname=斗破蒼穹134&author=我自己
2 在params 對象中攜帶 本質 也是 幫我們將對象 轉成了字符串 然后拼接在 url上
3 實際開發中 兩種傳遞參數的方式 都常用的 哪種寫代碼方便就使用哪個！！！
*/
axios({
url: "http://www.itcbc.com:3006/api/getbooks?author=土豆",
method: "GET",
}).then((result) => {
console.log(result);
});
//params上帶參數
//params只是讓我們可以傳遞對象格式的參數,axios底層還是會把它轉成url的方式
axios({
url: 'http://www.itcbc.com:3006/api/getbooks',
method: 'GET',
params: {
bookname: '斗破蒼穹134',
author: '土豆',
},
}).then((result) => {
console.log(result);
});
POST請求
在axios中,發送post請求時,需要在data中來傳遞參數
/*
post 新增數據
請求的三大關鍵
1 請求的地址 http://www.itcbc.com:3006/api/addbook
2 請求的方式 POST
3 請求的參數 data 來傳遞
*/
axios({
url:"http://www.itcbc.com:3006/api/addbook",
method:"POST",
data:{
bookname:"從入門到出去",
// bookname:"1",
author:"黑馬77",
publisher:"白馬",
appkey:"sdfr34343"
}
})
.then(result=>{
console.log(result);
})
DELETE請求
DELETE 請求 攜帶的參數 類似 GET 請求，需要在 params 中或者 url 上來添加
// 用params攜帶參數
axios({
url: "http://www.itcbc.com:3006/api/delbook",
method: "DELETE",
params: {
id: 8178,
appkey: "996007",
},
}).then((result) => {
console.log(result);
});
// 在url攜帶參數
axios({
url: "http://www.itcbc.com:3006/api/delbook?id=734&appkey=996007",
method: "DELETE",
}).then((result) => {
console.log(result);
});
PUT 和 PATCH 請求
以上兩個請求和 POST 請求類似，都是在 data 上 傳遞數據
