【前端】原生JS实现类似jQuery的ajax

做web的同学肯定知道jQuery框架里的ajax方法，这个方法很常用也很好用。但是总有一些时候我们不得不放弃使用jQuery，必须使用原生JS（比如我之前遇到的一个项目），又或者项目本来就很简单，为了页面简洁，为了节省资源我们没必要使用jQuery，这个时候我们要想使用ajax的话就必须自己用JS实现了，所以今天在这里分享用原生JS实现类似JQuery的ajax的方法。

直接贴代码：

1.ajax函数

function ajax(opt) {
    opt = opt || {};
    opt.method = opt.method.toUpperCase() || 'POST';
    opt.url = opt.url || '';
    opt.async = opt.async || true;
    opt.data = opt.data || null;
    opt.success = opt.success || function () { };
    var xmlHttp = null;
    if (XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
    else {
        xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
    } var params = [];
    for (var key in opt.data) {
        params.push(key + '=' + opt.data[key]);
    }
    var postData = params.join('&');
    if (opt.method.toUpperCase() === 'POST') {
        xmlHttp.open(opt.method, opt.url, opt.async);
        xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
        xmlHttp.send(postData);
    }
    else if (opt.method.toUpperCase() === 'GET') {
        xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async);
        xmlHttp.send(null);
    }
    xmlHttp.onreadystatechange = function () {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            opt.success(xmlHttp.responseText);
        }
    };
}

说明：

2.使用示例

ajax({
    method: 'POST',
    url: 'post.php',
    data: {
        param1: 'value1',
        param2: 'value2',
    },
    success: function (response) {
        console.log(response) ;
    }
})

就这样，一个简单ajax就实现了，用起来也是很顺手的。

希望本文对你有所帮助~

喜欢这篇文章的话可以扫描下方二维码支持我~

文章来自清渭技术小站，转载请注明出处