Ajax请求五部曲

Ajax异步请求是前端中最为重要的一部分，可以与后端数据进行对接
理解Ajax对理解jQuery里面的Ajax请求有很大的帮助

从前端向后端发送请求报文，后端返回相应报文
请求报文的格式：
请求行
请求头
请求体

Ajax异步请求步骤
1. 实例化XMLHttpRequest对象

var xhr=new XMLHttpRequest();

2. 设置请求行
请求行中一般设置的是请求的地址和请求的方式，而请求的方式一般为get和post，本文只介绍这两种

1. get请求，是将请求的数据拼接到url地址的后面，从服务器获取数据

xhr.open("get",url+"?uaername="XXX")

 2. post请求，将数据存入请求体中,是向服务器传输数据

xhr.open("post",url)

3. 设置请求头
//get方式是不需要设置请求头的

 POST请求的数据格式：

浏览器默认为application/x-www-form-urlencoded

 xhr.setRequestHeader(Conten-Type：application/x-www-form-urlencoded)

如果传输数据的格式要设置为JSON字符串，需要设置请求头为

 xhr.setRequestHeader(Conten-Type：application/json)

请求头中还可以设置请他的一些格式比如token…
4. 设置请求体
1.get的参数在url拼接了，所以不需要在这个函数中设置,传个空也是可以的

xhr.send()

2.post需要把参数传入请求体，注意参数的格式要与请求头中的数据格式相同
如果是默认数据格式：
转换为查询字符串的格式

xhr.send(Qs.stringify{
	username:"zhangsan",
	gender:"male"
})

如果是JSON数据格式:需要传入JSON字符串

xhr.send(JSON.stringify({
	username:"zhangsan",
	gender:"male"
}))

5. 监听请求的状态
这里监听的是JSON格式的，xhr.response格式需要转换为对象

    xhr.onreadystatechange=function(){
                    // 代表代理的状态
                    if(xhr.readyState===4){
                        // 代表请求的响应状态
                        if(xhr.status===200){
                           let resp=JSON.parse(xhr.response);
                           //判断业务的状态
                          if(resp.status===200){
                            alert("登陆成功")
                          }else{
                             alert("登陆失败")
                          }
                        }
                    }
                }