20210815-Ajax函数封装

ajax({
    url:'http://localhost:3000/xxx',
    data:{
        name:'zhangsan',
        age:20
    },
    success:function (data){
        console.log(data)
    }
})

function ajax(options){
    // 存储默认值
    var defaults={
        type: 'get',
        url:'',
        data:{},
        header:{
            'Content-Type':'application/x-www-form-urlencoded'
        },
        success:function (){},
        error:function (){}
    }
    // 使用options对象中的属性覆盖defaults中的属性
    Object.assign(defaults,options)
    // 创建ajax对象
    var xhr=new XMLHttpRequest();
    // 拼接请求参数的对象
    var params='';
    // 循环用户传递过来的对象格式参数
    for(var attr in defaults.data){
        params+=attr+'='+defaults.data[attr]+'&';
    }
    <!--more-->
    // 参数后边的&截取掉
    params=params.substr(0,params.length-1);
    // 判断请求方式
    if(defaults.type=='get'){
        defaults.url=defaults.url+'?'+params;
    }
    // 配置ajax对象
    xhr.open(defaults.type,defaults.url)
    if(defaults.type=='post'){
        var contentType=defaults.header['Content-Type'];
        xhr.setRequestHeader('Content-Type',contentType);
        // 判断用户希望的请求参数格式类型
        // 如果类型为json
        if(contentType=='application/json'){
            // 传递json类型的参数
            xhr.send(JSON.stringify(defaults.data))
        }else{
            // 传递普通类型的参数
            xhr.send(params);
        }
    }else{
        xhr.send();
    }
    xhr.onload=()=>{
        // xhr.getResponseHeader();
        // 获取响应头数据
        var contentType=xhr.getResponseHeader('Content-Type');
        var responseText=xhr.responseText;
        // 如果响应中包含application/json
        if(contentType.includes('application/json')){
            // json字符串转化为json对象
            responseText=JSON.parse(responseText);
        }
        // 当http状态码等于200时
        if (xhr.status==200){
            // 请求成功
            defaults.success(responseText,xhr);
        }else {
            // 请求失败
            defaults.error(responseText,xhr);
        }
    }
}