美文网首页
2020-07-01

2020-07-01

作者: 第三条鱼de | 来源:发表于2020-07-01 21:20 被阅读0次

    ajax封装

    function ajax(options) {
                // 存储的是默认值
                var defaults = {
                    type: 'get',
                    url: '',
                    data: {},
                    header: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    success: function () { },
                    error: function () { }
                };
                // 使用options对象中的属性覆盖defaults对象中的属性
                Object.assign(defaults, options);
    
                // 创建ajax对象
                var xhr = new XMLHttpRequest();
    
                // 拼接请求参数的变量
                var params = '';
                // 循环用户传递进来的对象格式参数
                for (var attr in defaults.data) {
                    // 将参数转换为字符串格式
                    params += attr + '=' + defaults.data[attr] + '&';
                }
                // 将参数最后面的&截取掉 
                // 将截取的结果重新赋值给params变量
                params = params.substr(0, params.length - 1);
                // 判断请求方式
                if (defaults.type == 'get') {
                    defaults.url = defaults.url + '?' + params;
                }
    
    
                // 配置ajax对象
                xhr.open(defaults.type, defaults.url);
    
                // 如果请求方式为post
                if (defaults.type == 'post') {
                    // 用户希望的向服务器端传递的请求参数的类型
                    var contentType = defaults.header['Content-Type']
                    // 设置请求参数格式的类型
                    xhr.setRequestHeader('Content-Type', contentType);
                    // 判断用户希望的请求参数格式的类型
                    // 如果类型为json
                    if (contentType == 'application/json') {
                        // 向服务器端传递json数据格式的参数
                        xhr.send(JSON.stringify(defaults.data))
                    } else {
                        // 向服务器端传递普通类型的请求参数
                        xhr.send(params);
                    }
                } else {
                    // 发送请求
                    xhr.send();
                }
                // 监听xhr对象下面的onload事件
                // 当xhr对象接收完响应数据后触发
                xhr.onload = function () {
                    // xhr.getResponseHeader()
                    // 获取响应头中的数据
                    var contentType = xhr.getResponseHeader('Content-Type');
                    // 服务器端返回的数据
                    var responseText = xhr.responseText;
    
                    // 如果响应类型中包含applicaition/json
                    if (contentType.includes('application/json')) {
                        // 将json字符串转换为json对象
                        responseText = JSON.parse(responseText)
                    }
    
                    // 当http状态码等于200的时候
                    if (xhr.status == 200) {
                        // 请求成功 调用处理成功情况的函数
                        defaults.success(responseText, xhr);
                    } else {
                        // 请求失败 调用处理失败情况的函数
                        defaults.error(responseText, xhr);
                    }
                }
            }
    

    相关文章

      网友评论

          本文标题:2020-07-01

          本文链接:https://www.haomeiwen.com/subject/czxkqktx.html