JS高级ajax封装

//1、浏览器适配
//2、传入参数:请求方式,请求接口地址,请求参数,请求成功,回调函数,请求失败的回调函数

function ajaxFun(method, url, data, successFun, failFun) {
    //1、根据浏览器的支持情况创建XMLHttpRequest对象
    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    //2、判断请求方式的类型
    //把method转换为大写
    //toUppercase先把变量的字符串拷贝一份出来,然后针对拷贝的那一份进行修改为大写
    var upperMethod = method.toUpperCase();

    if(upperMethod == 'GET') {
        //请求为get请求时,配置请求参数,并发送请求
        xhr.open(upperMethod, url + '?' + data, true);
        xhr.send(null);
    } else if(upperMethod == 'POST') {
        //请求为post请求时,配置请求参数,并发送请求
        xhr.open(upperMethod, url, true);
        xhr.send(data);
    } else {
        //如果传出的请求方法并不是get或post,则弹出提示,并关闭函数的执行
        console.error('你的请求方式错了,必须是get或post的一种');
        return;
    }
    //监听服务器响应,根据服务器传回来的信息调用不同的回调函数
    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4 && xhr.status == 200) {
            successFun(xhr.responseText);
        } else if(xhr.readyState == 4) {
            failFun('请求失败');
            //提式
            console.error(xhr.status);
        }
        //提示开发人员
        console.warn(xhr.readyState)
    }
}

你可能感兴趣的:(JS高级ajax封装)