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错误，那可能是请求头的问题
做如下的修改可能可以解决问题

将

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为请求成功之后的回调函数

本文转自： https://blog.lipux.cn/archives/332.html
本站仅做收录，版权归原作者所有。