Javascript 原生封装Ajax 案例

prtyaa 2023-12-26 18:23:21  50633

分类专栏：资讯

废话不多说直接上代码：

/**
 * 将对象参数转换为字符串 
 * 配合下面的$ajax方法使用
 * 解决data对象的问题
 * @param {*} obj 
 * @returns string
 */
function queryString(obj) {
    let str = '';
    for (let key in obj) {
        str = key + '=' + obj[key] + '&'
    }

    return str.substring(0, str.length - 1);
}

/**
 * 封装ajax
 * method 请求方式 默认GET
 * url 请求地址 
 * data 是否需要提交参数 以对象的方式传入 通过queryString(obj)方法将对象转换为拼接字符串
 * success 请求数据成功执行的回调函数
 * error  请求数据失败执行的回调函数
 * @param {*} param0 
 */
function $ajax({method = "get",url,data,success,error}) {
    let xmlhttp = null;
    try {
        xmlhttp = new window.XMLHttpRequest();
    } catch (error) {
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
    }

    if (data) {
        data = queryString(data);
    }
    //提交的是get请求并且data需要传入参数
    if (method == 'get' && data) {
        url += '?' + data;
    }
    xmlhttp.open(method, url, true);
    if (method == 'get') {
        xmlhttp.send();
    } else {
        //post提交必须设置请求头       
        xmlhttp.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
        xmlhttp.send(data);
    }
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4) {
            if (xmlhttp.status == 200) {
                if (success) {
                    success(xmlhttp.responseText);
                }
            } else {
                if (error) {
                    error(`Error:${xmlhttp.status}`);
                }
            }
        }
    }
}


/**
 * 调用ajax
 */
$ajax({
    method:'POST', //请求方式 默认为get请求  可以不写
    url:'', //请求地址
    //是否需要参数 没有  可以为空
    data:{
        username:'admin',
        password:'123'
    },
    //数据成功执行的回调函数
    success:function(result){

    },
    //数据失败执行的回调函数
    error:function(msg){
        alert(msg);
    }
});

网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。

本文链接：https://www.xckfsq.com/news/show.html?id=30999

赞同 0

评论 0 条

Javascript 原生封装Ajax 案例

相关文章

关注我们