美文网首页
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);
                }
            }
        }

相关文章

  • python生成时间列表

    python生成时间列表 yearmonthday = pd.date_range("2020-07-01","2...

  • Google/Edge浏览器 配合 Burp Suite 代理设

    糖糖给嘟嘟吃 2020-07-01 10:28:20 一、代理设置使用SwitchyOmega 二、解决无法访问(...

  • 心疼

    心一些心事 翎玺 0.22 · 字数 2073 · 阅读 2 2020-07-01 23:56 2020年是特殊的...

  • 柳哥学习计划

    start 2020-06-15end 2020-07-01 认识运维行业所需技术 学会各种编程/脚本语言的hel...

  • 2020-07-02

    一年的一半岁月,请温柔度过 2020-07-01 今天早上来校的时候,在家里甚感天气有些...

  • 家有四宝!龙凤成长记之第52天

    2020-07-01 1. 今天香港回归23年,全港放假。儿子明天考TS主题,他把所有chapter的重点内容全部...

  • 2020-07-02

    日拱一卒,持续精进 【姓名】老盖 【时间】2020-07-01 【今日全情工作】 思路和老板不谋而合 【今日认真...

  • 2020-07月日志

    2020-07-01日志 1.认真对待食物 √ 2.充足的水 √ 3.体态改善 √ 4.完善贴图绘制,补看手绘视频...

  • 2020-07-01

    焦点解决网络初级第19期坚持分享第242天:2020-07-01 昨天是月底,老公厂里班产提前完成难得有空休息一天...

  • bug合集

    记一个bug :2020-07-01 在使用下划线时遇到换行后下划线不显示的问题,刚开始以为是自己的下划线没有设置...

网友评论

      本文标题:2020-07-01

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