原生js的Ajax请求封装

最新推荐文章于 2024-08-15 14:48:45 发布

Forevermoremo

最新推荐文章于 2024-08-15 14:48:45 发布

阅读量2k

点赞数

分类专栏： js 总结文章标签： ajax

本文链接：https://blog.csdn.net/sunny123x/article/details/84064854

版权

总结同时被 2 个专栏收录

19 篇文章 1 订阅

订阅专栏

11 篇文章 0 订阅

订阅专栏

const $ = (function() {
    return {
        ajax: function({type,url,data,isAsync,success}) {
            if (!url) {
                console.error('请求地址为空')
                return;
            } 
            //创建 非IE6
            if (window.XMLHttpRequest) {
                var xhr = new XMLHttpRequest();
            } else { //IE6及其以下版本浏览器
                var xhr = new ActiveXObject('Microsoft.XMLHTTP');
            }  
            // 处理data对象
            var queryData = [];
            for (var key in data) {
                // 默认encodeURIComponent
                queryData.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
            }
            queryData = queryData.join('&');

            //连接 和 发送
            if (!type || type == 'GET') {
              // get方式参数要跟在url上
              url = url + '?' + queryData;
              xhr.open("GET", url, isAsync || true);
              xhr.send(null);
            }else if(type=='POST'){
              xhr.open(type,url,isAsync || true);
              //HTTP请求头赋值
              xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
              xhr.send(queryData);
            }

            //接收
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // 有传入success回调就执行
                    success && success(xhr.responseText);
                }
            }
        }
    }
})();

//调用
$.ajax({
    type: 'GET',
    url: 'xxx',
    data: {
        type: 1
    },
    success: function(res) {
        console.log(res);
    }
})
$.ajax({
    type: 'POST',
    url: 'xxx',
    data: {
        type: 1
    },
    success: function(res) {
        console.log(res);
    }
})