JavaScript原生封装一个Ajax数据请求函数

发起网络请求主体部分

function urlReques(dict){
    /* 封装一个数据请求函数 */
    var xhr = new XMLHttpRequest();
    var qs = resolveData(dict.data);
    if(dict.method.toUpperCase() === "GET"){
        xhr.open(dict.method,dict.url + '?' + qs);
        xhr.send()
    }else if(dict.method.toUpperCase() === "POST"){
        xhr.open(dict.method,dict.url);
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send(qs);
    }

    // 监听请求状态
    xhr.onreadystatechange = function(){
        console.log(xhr.status)
        if(xhr.readyState === 4 && xhr.status === 200){
            var result = JSON.parse(xhr.responseText);
            dict.success(result);
        }
    }
}

如果使用post请求时出现415错误，那可能是请求头的问题，具体可百度寻找一些415错误的原因
做如下的修改可能可以解决问题

将

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(qs);

修改为

xhr.setRequestHeader('Content-Type','application/json; charset=utf-8');
xhr.send(JSON.stringify(dict.data));

将data对象转换为查询字符串的格式

也就是类似于 name=Asnull&no=1 这样的格式

function resolveData(data){
    /* 将对象转换为查询字符串格式 */
    var arr = []
    for(var key in data){
        arr.push(key + "=" + data[key])
    }
    return arr.join("&")
}

调用函数发起网络请求

urlReques({
    method:'POST',
    url:'https://blog.lipux.cn/api',
    data:{
        name:'Asnull',
        no:1
    },
    success:function(res){
        // 请求成功之后的回调函数 res为返回的结果
        console.log(res)
    }
})

method为请求方式分为post和get
url为请求接口
data为需要提交的参数，以js对象的形式书写
success为请求成功之后的回调函数