专栏首页无道编程自己原生js封装的ajax请求

自己原生js封装的ajax请求

前言

这几天在恶(xue)补(xi)node.js,其中老师讲到了ajax,以前学习js都是东一点、西一点。不系统,当然,原因也很多。

当时一些js基础知识也欠缺(虽然现在也不咋的),想要自己封装,难度也很大。

今天也终于自己封装一个简易 的ajax。

细节

发送POST数据,需要设置header头:

Content-Type 头部信息设置为 application/x-www-form-urlencoded

ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

完整代码参考:

(function (w) {
    var responseType = function (type, content) {
        switch (type) {
            case 'TEXT':
                return content;
            case 'JSON':
                return JSON.parse(content);
            default:
                return content;
        }
    };

    var param = function (a) {
        var s = [],
            rbracket = /\[\]$/,
            isArray = function (obj) {
                return Object.prototype.toString.call(obj) === '[object Array]';
            },
            add = function (k, v) {
                v = typeof v === 'function' ? v() : v === null ? '' : v === undefined ? '' : v;
                s[s.length] = encodeURIComponent(k) + '=' + encodeURIComponent(v);
            },
            buildParams = function (prefix, obj) {
                var i, len, key;

                if (prefix) {
                    if (isArray(obj)) {
                        for (i = 0, len = obj.length; i < len; i++) {
                            if (rbracket.test(prefix)) {
                                add(prefix, obj[i]);
                            } else {
                                buildParams(prefix + '[' + (typeof obj[i] === 'object' ? i : '') + ']', obj[i]);
                            }
                        }
                    } else if (obj && String(obj) === '[object Object]') {
                        for (key in obj) {
                            buildParams(prefix + '[' + key + ']', obj[key]);
                        }
                    } else {
                        add(prefix, obj);
                    }
                } else if (isArray(obj)) {
                    for (i = 0, len = obj.length; i < len; i++) {
                        add(obj[i].name, obj[i].value);
                    }
                } else {
                    for (key in obj) {
                        buildParams(key, obj[key]);
                    }
                }
                return s;
            };

        return buildParams('', a).join('&').replace(/%20/g, '+');
    };

    async function ajax(options) {
        options.method = options.method ? options.method.toUpperCase() : 'GET';
        options.dataType = options.dataType ? options.dataType.toUpperCase() : 'TEXT';
        options.data = options.data ? options.data : '';

        options.success = options.success ? options.success : function () {
        };
        options.fail = options.fail ? options.fail : function () {
        };
        if (!options.url) {
            throw new Error("there are no url.");
        }

        var ajax = new XMLHttpRequest();
        ajax.open(options.method, options.url, true);
        if (options.method === 'POST') {
            ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            ajax.send(typeof options.data === 'object' ? param(options.data) : options.data);
        } else {
            ajax.send();
        }
        ajax.onreadystatechange = function () {
            if (ajax.readyState === 4) {
                if (ajax.status === 200 || ajax.status === 301) {
                    options.success(responseType(options.dataType, ajax.responseText));
                } else {
                    throw new Error("the status of this request is't done.");
                }
            }

        };
    }

    w.ajax = ajax;

})(window);

其中param函数是参考:https://www.cnblogs.com/daysme/p/6651382.html

目的是发送post时,如果data参数是对象,那么将其转换为字符串类型。

使用

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <script src="ajax.js"></script>
    <script>
        window.onload = function () {
            let oBtn = document.getElementById('btn');
            oBtn.onclick = function () {
                ajax({
                    url: 'http://localhost:3000',
                    method: 'post',
                    data: 'aa=ff&dd=afjalk',
                    success: function (res) {
                        console.log(res);
                    },
                    dataType: 'json'
                })

            };

        };
    </script>
</head>
<body>
<button id="btn">Request</button>
</body>
</html>

核心就是:

ajax({
    url: 'http://localhost:3000',
    method: 'post',
    data: 'aa=ff&dd=afjalk', // data可以是这种字符串,也可以是对象{}
    success: function (res) {
        console.log(res);
    },
    dataType: 'json'
})

压缩文件下载:ajax.min.js

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【Android】实现ImageView的展示网络图片的功能

    无道
  • 使用Jquery的$.ajax 解决csrf问题

    csrf也就是laravel默认在表单提交中都会验证csrf字串,没有的话就不会予以通过。

    无道
  • 使用Windows自带的沙箱功能

    对于无道来说,更好的用途是测试软件,因为最近在维护另一个网站:https://www.miaiyu.cn 给大家分享软件,但是每分享软件都需要截图。并且要测试!...

    无道
  • 博客首页加载的优化

    从刚做好这个博客不就第一次就发现了,发起 ajax 请求时,可以看到 content-download 的时间居然比 waiting 的时间还长,而且首页等待时...

    柳醉梦声
  • 常用控件之ImageView的使用(一)

    Hi,喜欢每天练习的小伙伴肯定对上一篇的Button了如指掌了,那么今天我们为大家带来了ImageView控件,这个控件能与Button碰撞出什么样的火花呢?话...

    下码看花
  • EasyUI中不启用Combobox组件的可编辑模式

    Combobox组件默认是可编辑模式的,如果不想让用户可以编辑,只要在data-options中,增加editable设置为false就可以了,如下:

    徐大嘴
  • HSQLDB: java程序使用hsqldb 入门教程 java启动hsqldb (初步hsqldb效率评估)

    用户1258909
  • 我们常听到Kbps、Mbps、Gbps它们分别的含义?

    我们总听的有些单位Kbps、Mbps、Gbps,但有的人可能搞不懂Kbps、Mbps、Gbps代表什么意思?那我们今天就简单的介绍下它们分别的含义吧。

    墨者盾
  • 低成本做接口测试

    我之前尝试录制,将录制好的请求进行处理,然后post/get出去。 结果有人做了一个很完备的工具,比我的要完备,好得太多。它就是HttpRunner. 关键是很...

    赵云龙龙
  • caffe的demo测试

    当运行 demo.py 有如上输出时, 说明我们已经可以通过之前别人训练好的模型进行测试, 下面我们将自己动手训练一个模型。该模型数据采用 voc2007 数据...

    foochane

扫码关注云+社区

领取腾讯云代金券