ajax

什么是 XMLHttpRequest 对象？xhr
XMLHttpRequest 对象用于在后台与服务器交换数据。
但是代码非常长，会冗余

IMG_2223(20201124-211759).JPG

ajax post提交参数会以表格类型

IMG_2224(20201124-212608).PNG

ajax GET提交会以参数类型

IMG_2227(20201124-212731).PNG

IMG_2228(20201124-212918).PNG

fetch fetch是一种HTTP数据请求的方式，是XMLHttpRequest的一种替代方案。fetch不是ajax的进一步封装，而是原生js。Fetch函数就是原生js，没有使用XMLHttpRequest对象。

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

// 基本用法无参数get请求
$.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);
    }
}
// 有参数，则增加data字段，有请求头则增加headers字段，有错误处理增加error字段
// 默认是按照表单提交post方法，data中虽然是json但是提交时转成表单
$.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格式本质就是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表单数据用法
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数据用法
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默认是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))

简写

JQuery的get和post可以简写：

$.get(url,data,callback)  // querystring格式
$.post(url,data,callback) // x-www-form-urlencoded格式

axios的get/post/put/delete等等都可以简写

axios.post(url,data).then(callback)