1.区分ajax与一般http请求
首先我们需要先看一下xhr,当你进入页面第一句话使用 XMLHttpRequest（XHR）对象可以与服务器交互。您可以从URL获取数据，而无需让整个的页面刷新。这允许网页在不影响用户的操作的情况下更新页面的局部内容。
使用过axios我们都知道我们在请求之后看到页面并不像我们自己点击刷新的那种情况。他会自动更新需要更新的数据，回显到页面上。底层用的就是xhr。
（1）ajax请求是特殊的http请求
（2）对于服务器来说，没有任何区别，区别在浏览器端
（3）浏览器接受到响应
1）一般请求：浏览器一般会显示响应体数据，也就是我们常说的刷新和跳转页面
2）ajax请求：浏览器不会对界面进行任何操作，只是调用监听的回调函数并传入响应数据。
2.XHR封装简单的ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button onclick="Get()">发送get请求</button>
<button onclick="Post()">发送post请求</button>
<button onclick="Delete()">发送delete请求</button>
<button onclick="Put()">发送put请求</button>
</body>
<script>
//查看network
function Get(){
axios({
url:'xxx',
method: 'GET',
params:{
id:1,
hello:'xxx'
}
})
}
function Post(){
axios({
url:'xxx',
method:'POST',
data:{
name:'张明',
sex:'男'
}
})
}
//我们封装的函数需要具有以下几个特点（为什么要具有以下特点：我们需要实现一个axios的简单封装）
// 1.函数的返回值为一个promise，成功的时候返回response，失败的时候返回error
// 2.能够处理多种请求方式
// 3.函数的参数为一个配置对象
// {
// url:'',//请求地址
// method:'',//请求方式
// params:{},//get和delete携带的query参数
// data:{}//post和delete传参
// }
//4.响应json文件自动解析成js的对象或者数组
function axios({
url,//请求地址
method='GET',//请求方式默认为get 当我们使用axios的时候如果我们不写method他会默认传递GET
params={
},//get和delete携带的query参数 默认空对象
data={
}//post和delete传参 默认空对象
}){
//返回一个promise对象
return new Promise((resolve, reject)=>{
//将method转大写
method = method.toUpperCase();
//处理query参数拼接到url
let queryString = '';
Object.keys(params).forEach(key => {
queryString += `${
key}=${
params[key]}&`
});
//判断queryString最后的&
if(queryString){
queryString = queryString.substring(0,queryString.length-1)
//拼接到url
//说明本url指的是没有其他参数的url 如果已经拼接过不能用这种方法
url += '?'+queryString
}
//执行异步请求
//(1)创建XHR对象
const request = new XMLHttpRequest();
//(2)创建连接(初始化请求)
request.open(method,url)
//(3)发送请求
if(method == 'GET' || method == 'DELETE'){
request.send()
}else if(method == 'POST' || method == 'PUT'){
//告诉服务器请求体的格式是json
request.setRequestHeader('Content-Type','application/json;charset=utf-8');
request.send(JSON.stringify(data));
}
//绑定状态改变的监听
//说明为什么监听函数可以绑定在send后面(因为send()请求是异步的，不是同步的，所以不影响监听)
request.onreadystatechange = function(){
//如果请求没有完成，直接结束
if(request.readyState !== 4){
return;
}
//响应状态码[200,299]代表成功
const {
status, statusText} = request;
//如果请求成功调用resolve()
if(status>=200 && status<=299){
const response={
data:JSON.parse(request.response),
status,
statusText
}
resolve(response);
}else{
reject(new Error('request error status is'+status))
}
//如果请求失败调用reject()
}
})
}
</script>
</html>