原生ajax封装

function ajaxFun(opt){

    //初始化
    var type = "post"; // 发送方式post|get
    var asyn = true; // 是否异步
    var withCredentials = false; // 跨域
    var data = {}; // 查询参数
    var url = ""; // 访问地址
    var outtime = 10000; // 超时时间 单位毫秒
    var success = function(){}; // 返回成功后的处理函数
    var error = function(){};  // 错误后的处理函数
    var onouttime = function(){};  // 超时后的处理函数

    if(!opt.url){
        console.log('必填访问地址');
        return false;
    }

    //替换传入值
    if(opt.type){ type = opt.type; } 
    if(opt.asyn){ asyn = opt.asyn; } 
    if(opt.withCredentials){ withCredentials = opt.withCredentials; } 
    if(opt.data){ data = opt.data; } 
    if(opt.url){ url = opt.url; } 
    if(opt.outtime){ outtime = opt.outtime; } 
    if(opt.success){ success = opt.success; } 
    if(opt.error){ error = opt.error; } 
    if(opt.onouttime){ onouttime = opt.onouttime; }

    //拼接查询字符串
    var datastr = "";
    for(key in data){
        if(datastr) { datastr += "&"; }
        datastr = datastr + `${key}=${data[key]}`;
    }

    // 获取 XMLHttpRequest对象
    var xmlHttp = new XMLHttpRequest();

    // 连接服务器
    xmlHttp.open(type, url, asyn); //api地址

    // 跨域
    if(withCredentials){
        xmlHttp.withCredentials = withCredentials;
    }

    // 设置请求头的Content-Type
    xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    // 发送数据
    xmlHttp.send(datastr);

    // 回调函数  success
    xmlHttp.onreadystatechange = function () {

        if (this.readyState == 4 && this.status == 200) {

            success(this.responseText);

        }
    };

    xmlHttp.ontimeout = function(){
        onouttime();
    };

    xmlHttp.onerror = function (){
        error();
        console.log(arguments);
    }                

}

//调用
ajaxFun({
    type : "post",
    asyn : true,
    withCredentials : true,
    data : {"id":3,"proid":5},
    url : "api.txt",
    success : function(re){
        console.log(re);
    },
    outtime : 2000,
    onouttime : function(){
        console.log('超时了');
    }
})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值