原生js ajax 封装

首先我们先了解ajax的get和post请求分别是怎样请求数据的

get请求

         let ajx = new XMLHttpRequest() //创建ajax实例
        /*打开需要请求的地址，可以有三个参数
        参1：请求方式
        参2：请求地址
        参3：是否异步，可选，默认异步
        */
        ajx.open('get','http://localhost/day02/api/gouwu.php?name=zhangsan')
        ajx.send()//向后端发送的数据，get方式用不到
        ajx.onreadystatechange = ()=>{//监听状态
            if(ajx.readyState==4){//判断就绪码，4为成功
                if(ajx.status==200){//判断状态码，200表示成功
                    console.log(ajx.responseText) //打印请求的内容
                }
            }
        }

post请求

        let ajx = new XMLHttpRequest() //创建ajax实例
        // /*打开需要请求的地址，可以有三个参数
        // 参1：请求方式
        // 参2：请求地址
        // 参3：是否异步，可选，默认异步
        // */
        ajx.open('post','http://localhost/day02/api/gouwu.php')
        ajx.setRequestHeader('content-type','application/x-www-form-urlencoded')//设置请求头
        ajx.send('name=zhangsan')//向后端发送的数据，get方式用不到
        ajx.onreadystatechange = ()=>{//监听状态
            if(ajx.readyState==4){//判断就绪码，4为成功
                if(ajx.status==200){//判断状态码，200表示成功
                    console.log(ajx.responseText) //打印请求的内容
                }
            }
        }

很麻烦吧，请求个数据我们需要写这么多，那么我们把它封装成get、post请求都可以使用的方法

首先先想好我们需要调用的方式，这里我封装的调用方式是这样的

ajax({ //调用封装的方法
    type: 'get', //可以不写，默认get
    url: 'http://localhost/day02/api/gouwu.php', //请求地址
    data: { //需要传输的数据,可选
        name: 'zhangsan',
        age: 18
    }
},a=>{//处理的到的数据
    console.log(a)
})

然后根据上面的调用方法进行封装

function ajax(obj, fn) {
    let ajx = new XMLHttpRequest() //创建ajax实例
    obj.type = obj.type ? obj.type : 'get' //判断type存不存在，不存在默认等于get
    let data = null //向后端发送的数据
    if (obj.data) { //判断是否存在
        for (let i in obj.data) {
            data += i + '=' + obj.data[i] + '&' //键值拼接成name=zhagnsan&age=18形式
        }
    }
    if (obj.type == 'get') { //处理get请求发送数据
        ajx.open(obj.type, obj.url + '?' + data) //地址上拼接数据
        ajx.send()
    } else if (obj.type == 'post') { //处理post请求发送数据
        ajx.open(obj.type, obj.url)
        ajx.setRequestHeader('content-type', 'application/x-www-form-urlencoded') //设置请求头
        ajx.send(data) //发送数据
    }
    ajx.onreadystatechange = () => {
        if (ajx.readyState == 4) {
            if (ajx.status == 200) {
                 /*
                 将得到的数据传给回调函数
                 短路写法，如果不传fn为空不会执行，有值就执行
                 */
                fn&&fn(ajx.responseText)
            }
        }
    }
}

这样我们就封装好了，以后使用也就变得方便了