es6 封装ajax

/**
     * @Ajax封装
     * 执行基本ajax请求,返回XMLHttpRequest
     *  $Ajax.request({
     *      url
     *      async 是否异步 true(默认)
     *      method 请求方式 POST or GET(默认)
     *      data 请求参数 (键值对字符串)
     *      success 请求成功后响应函数,参数为xhr
     *      error 请求失败后响应函数,参数为xhr 11
     *  });
     */
    let $Ajax = function() {
        let _onStateChange = (xhr, success, failure) => {
            if (xhr.readyState === 4) { //    请求已完成,且响应已就绪
                let _s = xhr.status; //   状态码
                if (_s >= 200 && _s < 300) {
                    success(xhr); //
                } else {
                    failure(xhr);
                }
            } else {}
        };
        let request = (opt) => {
            let _fn = () => {};
            let _url = opt.url || ''; //    获得url
            let _async = opt.async !== false,
                _method = opt.method || 'GET',
                _data = opt.data || null,
                _success = opt.success || _fn,
                _error = opt.failure || _fn;
            _method = _method.toUpperCase(); //  默认都转换大写
            if (_method === 'GET' && _data) {
                let _args = '';
                if (typeof _data === 'string') {
                    _args = _data;
                } else if (typeof _data === 'object') {
                    let _arr = new Array();
                    for (let _k in _data) {
                        let _v = _data[_k];
                        _arr.push(_k + '=' + _v);
                    }
                    _args = _arr.join('&');
                }
                _url += (_url.indexOf('?') === -1 ? '?' : '&') + _args;
                _data = null;
            }
            // var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveObject('Microsoft.XMLHTTP');
            let _xhr = window.XMLHttpRequest ? new XMLHttpRequest() : '';
            _xhr.onreadystatechange = () => { // 当请求被发送到服务器时,需要执行一些基于响应的任务
                _onStateChange(_xhr, _success, _error);
            };
            _xhr.open(_method, _url, _async); // 创建一个请求,并准备向服务器发送
            if (_method === 'POST') { //   如果是POST请求的时候,需要添加个请求消息头
                _xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;');
            }
            _xhr.send(_data); //   向服务器发送请求
            return _xhr;
        };
        return {
            request: request
        };
    }();

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值