ajax请求封装

最新推荐文章于 2024-06-04 18:40:44 发布

gu_eu

最新推荐文章于 2024-06-04 18:40:44 发布

阅读量92

点赞数 1

分类专栏： ajax 文章标签： javascript vue.js reactjs jquery

本文链接：https://blog.csdn.net/weixin_52400118/article/details/110053609

版权

ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何封装一个JavaScript函数`ajax`，用于处理GET和POST的Ajax网络请求。函数处理了参数、请求类型和返回值类型，并在请求成功或失败时触发回调。在成功时，调用`success`回调，失败时调用`fail`回调。示例中展示了如何调用这个函数来发起一个GET请求。

摘要由CSDN通过智能技术生成

ajax请求封装

/* 
	request 网络请求
*/
function ajax(options) {
    /**
     * 传入方式默认为对象
     * */
    options = options || {};
    /**
     * 默认为GET请求
     * */
    options.type = (options.type || "GET").toUpperCase();
    /**
     * 返回值类型默认为json
     * */
    options.dataType = options.dataType || 'json';
    /**
     * 默认为异步请求
     * */
    options.async = options.async || true;
    /**
     * 对需要传入的参数的处理
     * */
    var params = getParams(options.data);
    var xhr;
    /**
     * 创建一个 ajax请求
     * W3C标准和IE标准
     */
    if (window.XMLHttpRequest){
        /**
         * W3C标准
         * */
        xhr = new XMLHttpRequest();
    }else{
        /**
         * IE标准
         * @type {ActiveXObject}
         */
        xhr = new ActiveXObject('Microsoft.XMLHTTP')
    }
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4){
            var status = xhr.status;
            if (status >= 200 && status < 300 ){
                options.success && options.success(xhr.responseText,xhr.responseXML);
            }else{
                options.fail && options.fail(status);
            }
        }
    };
    if (options.type == 'GET'){
        xhr.open("GET",options.url + '?' + params ,options.async);
        xhr.send(null)
    }else if (options.type == 'POST'){
        /**
         *打开请求
         * */
        xhr.open('POST',options.url,options.async);
        /**
         * POST请求设置请求头
         * */
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        /**
         * 发送请求参数
         */
        xhr.send(params);
    }
}
/**
 * 对象参数的处理
 * @param data
 * @returns {string}
 */
function getParams(data) {
    var arr = [];
    for (var param in data){
        arr.push(encodeURIComponent(param) + '=' +encodeURIComponent(data[param]));
    }
    // console.log(arr);
    arr.push(('randomNumber=' + Math.random()).replace('.'));
    // console.log(arr);
    return arr.join('&');
}

页面调用

 ajax({
     url: "https://xxxx--", //请求地址
     type: 'GET', //请求方式
     data: {
     	type: 1,
     	value: ''
     }, //请求参数
     dataType: "json", // 返回值类型的设定
     async: true, //是否异步
     success: (response, xml) => {
     		console.log(JSON.parse(response)); //   此处执行请求成功后的代码
      },
     fail: function (status) {
     	console.log('状态码为' + status); // 此处为执行成功后的代码
     }
});