封装原生ajax,参照jquery

概述

封装原生的ajax,类似于jquery中的ajax,使用时传入options对象

代码

    function urlParmas(obj){
    //如果传入的值是null或者不是对象的话
        if(!obj||typeof obj!=="object")return obj
        let urlPar=""
        for(let k in obj){
            if(!obj.hasOwnProperty(key))break
            urlPar+=`&${key}=${obj[key]}`
        }
        urlPar=urlPar.substring(1)
        return urlPar
    }
    function ajax(options){
    //正常不传参数会有默认的值,所以要用传入的值覆盖默认的值
        options=Object.assign({
            url:"",
            method:"get",
            dataType:"json",
            success:Function.prototype,
            params:null,
            data:null
        },options)
    }
    //判断是否是get类型的请求
    let isGet=/^(get|delete|options|head)$/i.test(options.method)
    if(isGet&&options.params){
        option.url+=
        `${options.url.indexOf("?")<0?"?":"&"}${urlParmas(options.params)}`
    }
    //原生ajax的四部
    let xhr=new XMLHttpRequest()
    //get和post请求存在差异
    xhr.setRequestHeader(
    "Content-Type","application/xx-www-form=urlencode")
    xhr.open(options.method,options.url)
    xhr.onreadystatechange=function(){
        if(/^(2|3)\d{2}$/.test(xhr.status)&&xhr.readyState===4){
            let res=JSON.parse(xhr.responseText)
            options.success(res)
        }
    }
    xhr.send(isGet?null:urlParmas(options.data))

总结

• 首先要自己设定options的默认值,防止有些参数不传使用默认值,然后利用Object.assign方法把默认值与传入的值合并

• 原生ajax的四步,一般post传值的时候,请求体的数据格式为xxx=xxx&yyy=yyy,所以使用xhr.setReponseHeader("Content-Type","application/xx-www-form=urlencode")设置请求体的数据格式(他并不影响请求体的数据格式),因为get?后的数据格式与 post请求体中的数据格式一样,就设计方法把对象转化成这种数据格式,进去要先判断是不是null或者不是对象,返回本身的值,然后便利对象中私有属性,拼接字符串,拿到结果并返回

• 在open阶段要根据method的值和params的值来确定url的值,首先判断他是否是get方式 使用正则表式/^(get|options|delete|head)$/i.test(options.method) 来判断

• 当是get请求并且有params时候改变option.url的值为options.url${options.url.indexOf("?")<0?"?":"&"}${urlParmas(options.params)}

• 在send的时候如果要是get请求传入null,要是post请求传入 urlParmas(options.data)

• 在xhr.onreadystatechange中要在数据返回后调用options.success方法传入结果

前端小白欢迎大家来补充和指正