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

2018-07-27 0 条评论 852 次阅读 15 人点赞

做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);
        }
    };
}

说明:

参数类型说明
opt.methodString提交方式,包括POST和GET两种方式
opt.urlString发送请求的url
opt.asyncBloolean是否为异步请求,true为异步的,false为同步的
opt.dataObject发送的参数,格式为对象类型
opt.successFunctionajax发送并接收成功调用的回调函数

2.使用示例

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

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

希望本文对你有所帮助~

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

《【Wordpress】Wordpress后台登录不上wp-login.php无限重定向解决方法》

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

Kiwi

Valar Morghulis

文章评论(0)