开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第4天，点击查看活动详情

前言：相信大家在日常写代码的时候肯定都会碰到一些发送接口请求的情况，在原生 js 中也有专门的方法用来发接口请求，但是原生 js 的接口请求写起来有点复杂，于是就有人封装了一个 ajax 优雅的发接口请求；那么如何封装一个简单ajax呢？一开始我也是不会的，但在我的一番努力下还是为我微微的掌握了一点，下面给大家分享一下。

原生js 是如何发送接口请求的？

在原生的js当中是使用 XMLHttpRequest()来实例化一个对象，然后再通过这个对象来设置配置项发起接口请求的。

let xhr= new XMLHttpRequest()  // 创建发起接口请求的实例

// 打开请求，设置配置项
xhr.open(method,url,async,[userName],[userPass])  // 初始化一个请求,里面传入请求方法，url,是否异步等参数

xhr.onreadystatechange= function(){  // 监听状态改变事件，这个事件可以监听到服务器返回的响应头和响应体
   if(xhr.readyState=== 4 && xhr.status===200){  
       console.log(xhr.responseText); // 响应体
   }
} // 监听ajax状态改变事件

xhr.send([请求主体])  // 发送http请求

由上面我们可以看出js 发送接口请求主要分为以下几个步骤：

打开请求，往接口请求实例里面传入例如：请求方法、url、是否异步等请求配置项。
监听onreadystatechange()方法。
发送请求。

所以只要将这几个步骤理顺了，封装一个简单的 ajax也不是很难的事情吧。

简单的实现一个 ajax

我们就来简单的实现一下 ajax.get() 与 ajax.post()

const ajax={
    get(url,fn){  // 传入url 回调函数
        let xhr=new XMLHttpRequest()  // 实例化一个发接口的对象
        xhr.open("GET",url,true)  // 打开请求，设置配置项  
        xhr.onreadystatechange=function (){
            if(xhr.readyState===4){  // 如果拿到服务器返回的状态码为4（响应主体已经被客户端接收）
                fn(xhr.responseText)   // 就将服务器返回的响应体放到回调函数里面作为参数
            }
        }
        xhr.send()
    },
    post(url,data,fn){  // url ,要传送的数据，回调函数
        let xhr=new XMLHttpRequest()
        xhr.open('POST',url,true)
        xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
        xhr.onreadystatechange=function(){
            if(xhr.readyState===4){
                fn(xhr.responseText)
            }
        }
        xhr.send(data) // 向服务端发送数据
    }
}

ajax.get('http:www.baidu.com', (res) => {
    console.log(res);
})

附

http 请求方式

GET：从服务器获取数据（向服务器推送数据）

POST：向服务器推送数据（向服务器获取数据）

DELETE: 删除服务器端的某些内容

PUT:向服务器存放一些内容

HEAD：只要获取服务器的响应头信息，不要响应体

OPTIONS：一般使用它向服务器发送一个探测性请求，如果返回了信息，就说明客户端与服务端建立了连接，可以继续请求

TRACE：基于cross-domain进行跨域请求的时候

get 和 post 的区别

get 参数拼接在url后面，post参数在请求体中 // 相对安全
get 会产生不可控制的缓存，post不会
get请求的长度是有长度限制的，post没有
get请求只能进行url编码，post支持多种编码

readyState

0：刚刚创建xhr
1: 执行了open这个操作
2：请求已经发送，响应头已经被客户端接收
3：响应主体正在返回
4：响应主体已经被客户端接收

http状态码

1xx:请求已经接收，正在处理

2xx:成功，请求被成功接收

3xx:成功，资源已经重定向了

4xx:客户端错误

5xx:服务端错误

原生 js 使用 XMLHttpRequest() 来发接口请求

如何封装一个简单ajax?