模仿jquery封装ajax功能

时间: 2019-08-10阅读: 38标签: ajax

需求分析

因为有时候想提高性能,只需要一个ajax函数,不想引入较大的jq文件,尝试过axios,可是get方法不支持多层嵌套的json,post方式后台接收方式似乎要变。。也许是我不太会用吧。。其实换个方式接收也没什么,只是习惯了JQ序列化参数。所以上网搜集了很多资料,同时也进一步了解了一点JQ。以下代码很多来自于网上,自己整合了一下。

 

封装代码

var Ajax = {};
(function($) {

    function ajax(options) {
        var str;
        var xmlHttpRequest;
        var timer;
        if (window.XMLHttpRequest) {
            xmlHttpRequest = new XMLHttpRequest();
        } else {
            xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        }
        options = Object.assign({}, { type: "GET", processData: true, contentType: "application/x-www-form-urlencoded" }, options);
        if (options.type.toUpperCase() !== "GET") {
            xmlHttpRequest.open(options.type.toUpperCase(), options.url, true);
            xmlHttpRequest.setRequestHeader("Content-type", options.contentType);
            if (options.processData) {
                str = param(options.data);
            } else {
                str = options.data;
            }
            xmlHttpRequest.send(str);
        } else {
            str = param(Object.assign(urlorQuerytoObject(options.url), options.data));
            if (options.url.indexOf("?") !== -1) {
                options.url = options.url.substr(0, options.url.indexOf("?"));
            }
            xmlHttpRequest.open("GET", options.url + "?" + str, true);
            xmlHttpRequest.send(null);
        }
        xmlHttpRequest.onreadystatechange = function() {
            if (xmlHttpRequest.readyState === 4) {
                clearInterval(timer);
                if (xmlHttpRequest.status === 200) {
                    try {
                        // 如果是JSON格式,自动转换为JSON对象
                        options.success(JSON.parse(xmlHttpRequest.responseText));
                    } catch (e) {
                        options.success(xmlHttpRequest.responseText);
                    }
                } else if (options.error) {
                    if (xmlHttpRequest.status === 304) {
                        options.error(xmlHttpRequest, "notmodified");
                    } else {
                        options.error(xmlHttpRequest, xmlHttpRequest.statusText);
                    }
                }
            }
        };
        //判断是否超时
        if (options.timeout) {
            timer = setTimeout(function() {
                if (options.error) {
                    options.error(xmlHttpRequest, "timeout");
                }
                xmlHttpRequest.abort();
            }, options.timeout);
        }
    }

    // 把url中的查询字符串转为对象,主要是想当方式为get时,用data对象的参数覆盖掉url中的参数
    function urlorQuerytoObject(urlorQuery) {
        var queryArr = [];
        var urlSplit = urlorQuery.split("?");
        queryArr[0] = urlSplit[0];
        if (urlSplit[1]) {
            queryArr[0] = urlSplit[1];
        }
        queryArr = queryArr[0].split("&");
        var obj = {};
        var i = 0;
        var temp;
        var key;
        var value;
        for (i = 0; i < queryArr.length; i += 1) {
            temp = queryArr[i].split("=");
            key = temp[0];
            value = temp[1];
            obj[key] = value;
        }
        return obj;
    }

    // 序列化参数
    // 转载自 https://www.jianshu.com/p/0ca22d53feea
    function param(obj, traditional) {

        if (traditional === "undefined") { traditional = false; }
        var
            rbracket = /\[\]$/,
            op = Object.prototype,
            ap = Array.prototype,
            aeach = ap.forEach,
            ostring = op.toString;

        function isFunction(it) {
            return ostring.call(it) === "[object Function]";
        }

        function isArray(it) {
            return ostring.call(it) === "[object Array]";
        }

        function isObject(it) {
            return ostring.call(it) === "[object Object]";
        }

        function buildParams(prefix, obj, traditional, add) {
            var name;
            if (isArray(obj)) {
                // Serialize array item.
                aeach.call(obj, function(v, i) {
                    if (traditional || rbracket.test(prefix)) {
                        // Treat each array item as a scalar.
                        add(prefix, v);
                    } else {
                        // Item is non-scalar (array or object), encode its numeric index.
                        buildParams(
                            prefix + "[" + (typeof v === "object" && v != null ? i : "") + "]",
                            v,
                            traditional,
                            add
                        );
                    }
                });
            } else if (!traditional && isObject(obj)) {
                // Serialize object item.
                for (name in obj) {
                    buildParams(prefix + "[" + name + "]", obj[name], traditional, add);
                }
            } else {
                // Serialize scalar item.
                add(prefix, obj);
            }
        }
        // Serialize an array of form elements or a set of
        // key/values into a query string
        function jollyparam(a, traditional) {
            var prefix,
                s = [],
                add = function(key, valueOrFunction) {
                    // If value is a function, invoke it and use its return value
                    var value = isFunction(valueOrFunction) ? valueOrFunction() : valueOrFunction;
                    s[s.length] = encodeURIComponent(key) + "=" +
                        encodeURIComponent(value == null ? "" : value);
                };
            // If an array was passed in, assume that it is an array of form elements.
            if (isArray(a)) {
                // Serialize the form elements
                aeach.call(a, function(item) {
                    add(item.name, item.value);
                });
            } else {
                // If traditional, encode the "old" way (the way 1.3.2 or older
                // did it), otherwise encode params recursively.
                for (prefix in a) {
                    buildParams(prefix, a[prefix], traditional, add);
                }
            }
            // Return the resulting serialization
            return s.join("&");
        }
        return jollyparam(obj, traditional);
    }

    // 为避免 Object.assign 不能使用
    // 转载自 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
    if (typeof Object.assign != "function") {
        // Must be writable: true, enumerable: false, configurable: true
        Object.defineProperty(Object, "assign", {
            value: function assign(target, varArgs) { // .length of function is 2
                "use strict";
                if (target == null) { // TypeError if undefined or null
                    throw new TypeError("Cannot convert undefined or null to object");
                }
                var to = Object(target);
                for (var index = 1; index < arguments.length; index++) {
                    var nextSource = arguments[index];
                    if (nextSource != null) { // Skip over if undefined or null
                        for (var nextKey in nextSource) {
                            // Avoid bugs when hasOwnProperty is shadowed
                            if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
                                to[nextKey] = nextSource[nextKey];
                            }
                        }
                    }
                }
                return to;
            },
            writable: true,
            configurable: true
        });
    }

    $ = {
        get: function(url, data, success) {
            return ajax({ url: url, data: data, success: success });
        },
        post: function(url, data, success) {
            return ajax({ type: "POST", url: url, data: data, success: success });
        },
        ajax: function(options) { return ajax(options); },
        param: function(obj, traditional) { return param(obj, traditional); },
        urlorQuerytoObject: function(urlorQuery) { return urlorQuerytoObject(urlorQuery); }
    };

    // 满足 JQuery 的使用习惯
    if (typeof window.$ === "undefined") {
        window.$ = $;
    }
})(Ajax);


用法

高度模仿JQ。

// get请求
$.get("", {}, function(data) {})

// post请求
$.post("", {}, function(data) {})

// 更完整的ajax
$.ajax({
    type: "post",
    // 非必须,默认 get
    url: "",
    data: {},
    // json格式
    processData: true,
    // 非必须,默认 true
    contentType: "application/json;charsetset=UTF-8",
    //非必须,默认 application/x-www-form-urlencoded
    success: function(data) {},
    timeout: 1000,
    // 超时时间,非必须,如果设置了,超时且存在error函数则会调用
    error: function(xhr, statusText) {// 非必须
    // statusText: "notmodified","timeout", 或者其他xmlHttpRequest.statusText
    }
});


注意事项

1. 如果 " $ " 符号不能使用,请用 " Ajax " 替代,这个变量名若仍有冲突,请修改源代码首尾两行。

2. 如果返回的是json格式的字符串,会自动将字符串转为json对象传给success函数参数,其他情况均为字符串。

来自:https://www.cnblogs.com/kill370354/archive/2019/09/10/11497480.html

链接: http://www.fly63.com/article/detial/5257

Ajax跨域CORS

在Ajax2.0中多了CORS允许我们跨域,但是其中有着几种的限制:Origin、Methods、Headers、Credentials;Origin当浏览器用Ajax跨域请求的时候,会带上一个请求头“Origin: 协议://页面域名”,

Ajax异步请求

其实我理解前端如何通过url从后端获取数据,对于异步请求Ajax一直表示有点迷惑,所谓不尝试和不探索,光靠看概念你是永远不能理解代码的魅力的,正好公司的项目里用到了最经典的Ajax,正好作为一个案例来学习如何用json的Data

ajax延时请求问题

在做实时搜索时,给input标签设置input propertychange监听,然后进行实时请求,如果在监听事件里面直接进行请求,就会导致每一次输入的变化都会进行请求,但是有时候搜索词可能比较长,并不希望前面每次的变化都进行请求

谈CSRF与JSONP设置header问题

在CSRF/JSONP劫持的运用上,CORS跨域被限制的情况下不存在了,因此AJAX的GET/POST一堆灵活操作没法用。JSONP也无法设置header、cookie等。FORM表单请求的方式当然也没法设置header

ajax提交 使用css 控制按钮防止重复点击

有时候遇到ajax提交数据时 多点几次会出现重复点击的情况.所以下面介绍一个用css控制防重复点击的效果,submitting 是一个类 没有任何意思,也可以写成变灰度的效果

JQuery中的ajax

ajax() 方法用于执行 AJAX(异步 HTTP)请求。 所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。语法

ajax请求中的contentType和dataType

contentType设置你发送给服务器的格式,有以下三种常见情况。application/x-www-form-urlencoded :默认值,application/json:服务端消息主体是序列化后的 JSON 字符串。

$.ajax防止多次点击重复提交的方法

第一种:使用$.ajaxPrefilter( [dataTypes], handler(options, originalOptions, jqXHR) ) 方法;第二种:使用beforeSend选项,在发送请求前将提交按钮变为不可用的状态;

ajax 高级技术

ajax技术是一种从客户端向服务器请求数据的技术,而如果是要将数据从服务器主动推向客户端,那么就需要更加高级的数据传输技术,这些技术主要是为了处理一些在客户端展示服务器上实时变化的数据

ajax是什么?如何创建一个ajax?

ajax(asynchronous javascript and xml)主要用来实现客户端与服务器端的异步通信,实现页面的局部刷新。XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全