什么是 XMLHttpRequest 對(duì)象雕旨？xhr
XMLHttpRequest 對(duì)象用于在后臺(tái)與服務(wù)器交換數(shù)據(jù)怒详。
但是代碼非常長(zhǎng)，會(huì)冗余
IMG_2223(20201124-211759).JPG
ajax post提交參數(shù)會(huì)以表格類型
IMG_2224(20201124-212608).PNG
ajax GET提交會(huì)以參數(shù)類型
IMG_2227(20201124-212731).PNG
IMG_2228(20201124-212918).PNG
fetch fetch是一種HTTP數(shù)據(jù)請(qǐng)求的方式，是XMLHttpRequest的一種替代方案凝危。fetch不是ajax的進(jìn)一步封裝，而是原生js晨逝。Fetch函數(shù)就是原生js蛾默，沒有使用XMLHttpRequest對(duì)象。
IMG_2233.PNG
IMG_2234.PNG
IMG_2231.PNG
IMG_2232(20201124-214303).PNG
IMG_2230(20201124-214156).PNG
IMG_2229(20201124-213738).PNG
IMG_2235(20201124-220916).JPG
jquery
// 基本用法無參數(shù)get請(qǐng)求
$.ajax({
url:"demo_test.txt",
success:function(result){
console.log(result);
}
}
// 需指定方法則增加method字段
$.ajax({
url:"demo_test.txt",
method:"POST",
success:function(result){
console.log(result);
}
}
// 有參數(shù)捉貌，則增加data字段支鸡，有請(qǐng)求頭則增加headers字段，有錯(cuò)誤處理增加error字段
// 默認(rèn)是按照表單提交post方法趁窃，data中雖然是json但是提交時(shí)轉(zhuǎn)成表單
$.ajax({
url:"demo_test.txt",
data:{a:10},
success:function(result){
console.log(result);
},
error:function(xhr,status,error){
console.log(error);
}
});
// data在post下是表單格式牧挣，在get下是querystring格式
// 通過以下方法指定為json格式[json格式本質(zhì)就是body里是json字符串，頭里是application/json]
$.ajax({
url:"demo_test.txt",
headers:{ contentType: "application/json"},
method:"POST",
data:JSON.stringify({a:10}),
success:function(result){
console.log(result);
}
});
fetch
// fetch的post表單數(shù)據(jù)用法
fetch(url,{
headers:{
'content-type': "application/x-www-form-urlencoded"
},
method:"POST",
body:"a=12&b=33",
})
.then(res=>res.json())
.then(data=>console.log(res))
.catch(e=>{})
// fetch的post json數(shù)據(jù)用法
fetch(url,{
headers:{
'content-type': "application/json"
},
method:"POST",
body:JSON.stringify({a:100}),
})
.then(res=>res.json())
.then(data=>console.log(res))
.catch(e=>{})
axios
// axios默認(rèn)是json類型的提交
axios({
url:"http://localhost:99?x=1",
method:"POST",
data:{a:12}
})
.then(res=>console.log(res.data))
// 如果想改成form則需要修改headers和data格式
axios({
url:"http://localhost:99?x=1",
method:"POST",
headers:{"Content-Type":"application/x-www-form-urlencoded"},
data:"a=12&b=23"
})
.then(res=>console.log(res.data))
簡(jiǎn)寫
JQuery的get和post可以簡(jiǎn)寫：
$.get(url,data,callback) // querystring格式
$.post(url,data,callback) // x-www-form-urlencoded格式
axios的get/post/put/delete等等都可以簡(jiǎn)寫
axios.post(url,data).then(callback)
