几种ajax
1.原生ajax（是核心，http协议，b-s浏览器与服务器之间的交互）
XMLHttpRequest
1. 实例化XHR对象
let xhr = new XMLHttpRequest();
2. 打开请求 （设置请求行）
xhr.open(method,url);
3. 设置请求头信息
xhr.responseType = 'json';
xhr.setRequestHeader('Content-type','application/json')
4. 设置监听
xhr.onreadystatechange = function(){
if(this.readyState = 4){
if(this.status == 200){
响应成功
this.response
} else {
失败
}
}
}
5. 发送请求(请求体)
xhr.send(JSON.stringify(data));
注：以post发送数据
1）如果发送参数类型是查询字符串，也就是表单类型，在发送的时候一定要将obj转换为查询字符串 ，qs必须在ES6模块代码下才能应用
1. Content-Type:表单编码
application/x-www-form-urlencoded
2. send()
var obj = {
name:"terry",
comment:'123'
}
send(qs.stringify(obj));
2）参数类型为json 在发送的时候一定要将obj转换为json字符串
1. Content-Type:表单编码
application/json
2. send()
var obj = {
name:"terry",
comment:'123'
}
send(JSON.stringify(obj));
2 .jQuery.ajax
1. 回调函数
2. 不专注于ajax
常见参数？含义？
属性
url
method 请求方法，一般GET/POST/DELETE/PUT
data 如果不是字符串，将会自动转换为查询字符串。
{
name:"terry",
gender:"male"
}
name=terry&gender=male
{
ids:[1,2,3]
}
ids[]=1&ids[]=2&ids[]=3
ids[0]=1&ids[1]=2&ids[1]=3
async 默认为true,表示异步
dataType 期望接受到的响应值的数据格式
cache 是否缓存
processData 是否处理data数据，默认为true json不转换
contentType 内容类型，用来标识当前的数据格式，默认值为'application/x-www-form-urlencoded',如果使用post,data的值如果是对象，那么这个对象会自动转换为查询字符串 （qs）
application/x-www-form-urlencoded
表单编码，查询字符串
multipart/form-data
附件上传格式
text/plain
不编码
如果contentType取值不是以上三种之一，那么，在发送跨域请求的时候要先发送一个OPTIONS请求
application/json
$.post('');
网络监听
options 探路请求
post 真正请求
钩子函数
beforeSend 在ajax发送之前，在xhr.send执行之前
success 在ajax请求成功之后执行
error 在ajax请求失败之后执行
complete 在ajax请求完成之后执行
例子，2. 如何使用jquery发送查询字符串、如何使用jquery发送json
1) 发送查询字符串
$.ajax({
method:'post',
data:obj
})
如果数据是数组的话使用qs转换
$.ajax({
method:'post',
processData:false,//先禁用自动转换
data:qs.stringify({ids:[1,2,3,4]})
})
查看qs的api
2) 发送JSON
$.ajax({
method:'post',
contentType:'application/json',
processData:false,
data:JSON.Stringify(obj)
})
3.axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端
特点：
1) 基于Promise ，用法简介
2) 可以直接运行在node中，jquery不可以（基于XMLHttpRequest ，因为这个是浏览器的api）；也能运行在浏览器中
3) 纯粹的Ajax库
首先安装axios,
方法一：npm install axios
方法二： CDN 引入
技术点：
0) 基础
1. axios用法
1) 底层API
axios({}).then().catch().finally();
类似
$.ajax({})
2) 快捷API
axios.get()里面两个参数
axios.get(url [,config]).then().catch()=$.get(url[,data][,success][,dataType])
1. axios.get(url[,config]).then().catch()
axios.get('deleteById?id=1')
axios.get('deleteById',{
params:{ids:1}
})
类似
$.ajaxSetup({
error:function(){}
})
$.get(url[,data][,success][,dataType])
2. axios.post(url[,data][,config]).then()
3. axios.delete(url[,delete])
4. axios.put(url[,data][,config])
RESTFUL
get /category/findAll
get /category/deleteById
post/category/saveOrUpdate
post/category/batchDelete
get /category 查询
delete /category 单个删除 id
post /category 保存
put /category 修改
3) axios config参数有哪些？
axios({
baseURL:
url
method
params GET请求的参数（拼接到地址）
data POST请求的参数（请求体）
transformRequest:[(data,headers)=>{}]
在请求发送前执行函数，用于修改data的数据格式
paramsSerializer: function(params){}
在请求发送前执行函数，用于修改params的数据格式
headers:{
'Content-Type':'application/json'
},
transformResponse:[(data)=>{}]
在响应回来之后，then/catch执行之前执行
responseType:'json'
期望服务器返回的数据类型，类似于jquery dataType
//配合后台代码完成防攻击操作
xsrfCookieName
xsrfHeaderName
})
jquery默认将查询的数据转换为查询字符串
使用axios post一个对象，类型为查询字符串
axios默认为json，有个baseURL
1) post提交一个对象，数据类型为查询字符串
axios({
baseURL:"http://120.78.164.247:8099",
url:"/manager/category/saveOrUpdate",
method:"post",
headers:{
'Content-Type':'application/x-www-form-urlencoded'
},
transformRequest:[(data,headers)=>{
return qs.stringify(data);
}]
})
.then(()=>{
})
.catch(()=>{
});
2) post提交一个对象，数据类型为json,因为默认就是json
axios({
baseURL:"http://120.78.164.247:8099",
url:"/manager/category/saveOrUpdate",
method:"post",
data:data,
})
.then(()=>{
})
.catch(()=>{
});
3) 如何提取配置信息
设置基路径baseURL
defaults后面的参数为config中的参数
axios.defaults.baseURL="";
axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
axios.get('')
axios.posts('')
4）拦截器
axios.interceptors.request.user((config)=>{
},(error)=>{
});
qs query string 查寻字符串
https://baijiahao.baidu.com/s?id=1608754469242612325&wfr=spider&for=pc