主页

发起网络请求主体部分

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

版权属于:Asnull
作品采用:本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。
0
查看目录

目录

来自 《JavaScript原生封装一个Ajax数据请求函数》
评论

  1. 评论头像
    小A 作者
    2022-08-20 回复

    这一代码封装是不推荐使用的,因为网络上已经有许多优秀的Ajax封装插件,比如axios

博主很懒,啥都没有
43 文章数
1,945 评论量
5 分类数
48 页面数
已在风雨中度过 54年63天8小时50分