js 手写 ajax

ajax 在我们的开发工作中已经司空见惯，几乎所有我们频繁使用的库和框架都提供了经过完善封装的ajax方法，如jQuery，zepto，angular等等，这使得我们的数据请求都变得异常简洁明了

但是这也带来了很明显的缺陷，就是我们知道如何区使用封装后的ajax，却不会通过原生的js来写ajax

这次就亲手实现以下原生js的ajax

XMLHttpRequest对象
我们常用的ajax就是用过XMLHttpRequest对象实现的。这个对象有很多的属性和事件，在使用之前，我们需要将它实例化

 const xhr = new XMLHttpRequest()

实例化后，我们就可以通过xhr来发送一个请求

//xhr具有一个open方法,这个方法的作用类似于初始化,并不会发起真正的请求
//open 方法具有5个参数，但是常用的是前3个
//method：请求方式 -- get/post
//url:请求的地址
//async:是否异步请求，默认为true(异步)
xhr.open(method,url,async)

//send方法发送请求.并接受一个可选参数
//当请求方式为post时，可以将请求体的参数传入
//如果请求方式时get时,可以不传或者传入null
//不管是get还是post，参数都需要通过 encodeURLComponent 编码后拼接
xhr.send(data)

再通过send方法发送请求后，xhr对象在收到响应数据时会自动填充到其对应的属性中，xhr具有以下常用属性：

• responseText：请求返回的数据内容
• responseXML：如果响应内容时“text/xml” “application/xml”,这个属性将保存数据的XML DOM文档
• status：响应的HTTP状态，如200 304 404等
• statusText：HTTP状态说明
• readyStatus：请求/响应过程的当前活动阶段
• timeout：设置请求超时事件

上面写了这么多属性。我们并没有发现收到数据时的回调方法，那么该怎么在收到数据时进行处理呢？
这个问题的重点要放在readyStatus这个属性上

readyStatus的值会随着请求各阶段的变化而改变，其一共有5个值：

• xhr.readyStatus == 0 尚未调用 open 方法
• xhr.readyStatus ==1 已调用open但还未发送请求
• xhr.readyStatus ==2 已发送请求(已调用 send)
• xhr.readyStatus ==3 已经收到请求返回的数据
• xhr.readyStatus ==4 请求已完成

当readyStatus的状态发生改变时,会触发 xhr 的事件 onreadystatechange,于是我们就可以在这个方法中，对接收到的数据进行处理

 xhr.onreadystatechange = ()=>{
   
      if(xhr.readyStatus === 4){
   
        //HTTP状态在200-300之间表示请求成功
        //HTTP状态为304表示请求内容未发生改变，可直接从缓存中读取
        if(xhr.status >=