愚墨的博客
  • 首页
  • 前端技术
  • 面试
只争朝夕不负韶华
  1. 首页
  2. 前端技术
  3. 正文

ajax封装

2016年04月20日 3093点热度 0人点赞 0条评论

封装完成后,我已吐三升血,在也不用以后一遍一遍的写了!

原生js封装ajax的类库,模仿jQuery,但是没有jQuery那么完善。
首先是执行的格式和参数

ajax({
    url: 'data.json',// 请求的路径
    data: {a: 1, b: 2, node: JSON.stringify({name: '你好'})}, // 发送的参数 a=1&b=2
    dataType: 'json',// 按照指定格式格式化服务器返回的数据
    headers: {
        'content-type': 'application/x-www-form-urlencoded',
        zidingyishoubu: 'hello'
    },// 自定义请求首部
    method: 'post',//是指定http method 请求
    success: function (data) {
        console.log('打倒土豪劣绅:', data);
    },// ajax成功时执行的函数
    error: function (err) {
        console.error(err);
    },// ajax失败时执行的函数
    async: true,//是否为异步请求
    cache: false// 是否缓存该请求
});

ajax封装代码

(function () {
    var ajax = function (options) {
        //先判断一下参数格式类型
        if (!tools.getType(options, 'Object')) {
            console.log(typeof options)
            throw new TypeError('参数类型错误')
        };
        var xhr = new tools.getXHR();
        var isGET = /^(get|head|delete)/ig.test(options.method);
        //判断是否有参数,有的话就的格式化参数
        if (options.data) {
            options.data = tools.encodeToURIString(options.data, isGET)
        };
        //判断是否是get请求,是的话就将data拼接到url的后面
        if (isGET) {
            options.url = tools.padStringToURL(options.url, options.data)
        };
        //判断是否需要缓存
        if (options.cache === false) {
            var random = Math.random();
            options.url = tools.padStringToURL(options.url, '_=' + random);
        };

        xhr.open(options.method, options.url, options.async);

        //设置请求首部
        if (xhr.setRequestHeader && tools.getType(options.headers, 'Object')) {
            for (var cur in options.headers) {
                if (!options.headers.hasOwnProperty(cur))continue;
                xhr.setRequestHeader(cur, options.headers[cur]);
            }
        };

        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (/^2\d{2}/.test(xhr.status)) {
                    var responseText = xhr.responseText;
                    if (responseText && /json/ig.test(options.dataType)) {
                        try {
                            responseText = tools.JSONParse(responseText);
                        } catch (e) {
                            options.error(e);
                            return;
                        }
                    }
                    options.success(responseText);
                } else if (/^(4|5)\d{2}$/g.test(xhr.status)) {
                    options.error(xhr.status);
                }
            }
        }

        xhr.send(options.data);
        return xhr;

    };

    /*专业打辅助的工具*/
    var tools = {
        /**
         *
         * @param data 检测的数据
         * @param type 检测的类型
         * @returns {boolean}
         */
        getType: function (data, type) {
            return Object.prototype.toString.call(data) === '[object ' + type + ']';
        },
        /**
         * 创建ajax对象
         * @returns {*}
         */
        getXHR: function () {
            var list = [function () {
                return new XMLHttpRequest()
            }, function () {
                return new ActiveXObject('Microsoft.XMLHTTP');
            }];
            var xhr = null;
            while (xhr = list.shift()) {
                try {
                    xhr();
                    break;
                } catch (e) {
                    xhr = null;
                    continue;
                }
            }
            if (xhr === null) {
                throw  new Error('当前浏览器不支持ajax功能')
            }
            return xhr();
        },
        /**
         * 把一个对象格式化为URIString格式
         * @param data 需要格式化的参数
         * @param encodeZH 请求的类型
         * @returns {string} 格式化完毕得到的字符串
         */
        encodeToURIString: function (data, encodeZH) {
            if (!data) {
                return '';
            }
            ;
            if (tools.getType(data, 'String')) {
                return data;
            }
            var arr = [];
            for (var cur in data) {
                if (!data.hasOwnProperty(cur))continue;
                if (encodeZH) {
                    arr.push(encodeURIComponent(cur) + '=' + encodeURIComponent(data[cur]));
                } else {
                    arr.push(cur + '=' + data[cur]);
                }
            }
            return arr.join('&');

        },
        /**
         *
         * @param url 地址
         * @param param 需要拼接的参数
         * @returns {string} 拼接后的字符串
         */
        padStringToURL: function (url, param) {
            if (!param) {
                return url;
            }
            var data = tools.encodeToURIString(param);
            var reg = /\?/g;

            return reg.test(url) ? (url + '&' + data) : (url + '?' + data)
        },
        /**
         * json字符串转json对象
         * @param jsonString
         * @returns {*}
         * @constructor
         */
        JSONParse: function (jsonString) {
            if (tools.getType(jsonString, 'Object')) {
                return jsonString;
            }
            if (window.JSON) {
                return JSON.parse(jsonString)
            }
            return eval('(' + jsonString + ')');
        }

    };
    this.ajax = ajax;//因为自执行函数中this相当于window,所以可以写成window.ajax= ajax
})()

需要沉淀:
1、编程思想。
2、封装格式,代码封装的很清晰
3、考虑的很全面,每一个参数的不同情况的处理和逻辑判断

标签: 暂无
最后更新:2017年09月16日

愚墨

保持饥渴的专注,追求最佳的品质

点赞
< 上一篇
下一篇 >

文章评论

取消回复

搜搜看看
历史遗迹
  • 2023年5月
  • 2022年9月
  • 2022年3月
  • 2022年2月
  • 2021年12月
  • 2021年8月
  • 2021年7月
  • 2021年5月
  • 2021年4月
  • 2021年2月
  • 2021年1月
  • 2020年12月
  • 2020年11月
  • 2020年9月
  • 2020年7月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年1月
  • 2019年5月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年9月
  • 2018年3月
  • 2018年2月
  • 2018年1月
  • 2017年11月
  • 2017年7月
  • 2017年6月
  • 2017年3月
  • 2017年2月
  • 2017年1月
  • 2016年12月
  • 2016年11月
  • 2016年9月
  • 2016年8月
  • 2016年7月
  • 2016年6月
  • 2016年5月
  • 2016年4月
  • 2016年3月
  • 2016年2月
  • 2016年1月
  • 2015年12月
  • 2015年10月
  • 2015年9月
  • 2015年7月
  • 2015年6月
  • 2015年4月

COPYRIGHT © 2020 愚墨的博客. ALL RIGHTS RESERVED.

THEME KRATOS MADE BY VTROIS