js 封装ajax 以及调用发起后台请求,如何封装方法

最新推荐文章于 2023-09-20 10:27:08 发布

最新推荐文章于 2023-09-20 10:27:08 发布

阅读量304

点赞数

分类专栏： html css js jq 文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/vue1024/article/details/122443193

版权

html css js jq 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

js 封装ajax 以及调用发起后台请求

一个功能封装一个方法

如何封装方法

1，确定哪些方法是可变的（参数）

2，确定返回值（单个值，对象）

3，参数+代码实现达到返回值

//封装ajax对象
function createAjax(){
    var xhr = null;
    //创建ajax对象
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();//其他浏览器
    }else{
        xhr = new ActiveXObject("Microsoft.XMLHTTP");//兼容浏览器
    }
    return xhr;
}
//拼接参数
function getValStr(dataObj){
    var arr= [];
    for(var key in dataObj){
        arr.push(key+"="+dataObj[key]);
    }
    var datas = arr.join("&");
    return datas;
}
function ajax(options){
    var xhr = createAjax() //创建ajax对象
    var types = options.type.toLowerCase();//转换大小写
    var datas = getValStr(options.data)//参数拼接
    
    if(types == "get"){
        options.url = options.url+ "?" + datas
    }else if(types == "post"){
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8");
    }else{
        console.log("传输方式错误");
    }
    xhr.open(options.type,options.url)
    xhr.send(types == "get"? null : datas)
    xhr.onreadystatechange = function(){
        if(xhr.readyState==4){
            var data = JSON.parse(xhr.responseText)
            if(xhr.status==200){
                //成功回应
                options.success(data)     
            }else{
                //失败回应
                options.error(data)
            }
        }
    }

}

调用 ajax方法发送请求

ajax({
    type:"get",
    url:"http://localhost:3000/user/getUserList",
    data:{
        page:1,
        size:13
    },
    success:function(res){
        console.log(res);
    },
    error: function(status) {
        console.log('状态码为' + status); // 此处为请求失败后的回调
    }
});