进行简单封装的ajax请求,可直接使用

/**
 * @author li914
 * 功能:使用XMLHttpRequest实现进行请求,get/post 请求
 * 创建时间:2019-11-14
 * */
var liHttp = {
    /**
     * 功能:进行get请求
     * @param options 请求设置
     *      options.url 请求地址
     *      options.timeout 请求超时时间,默认0
     *      options.dataType 请求完成后返回数据格式 默认为空,即返回数据为字符串
     *      options.sysnc 设置请求异步或同步 默认为 true  异步请求
     *      options.headers 设置请求header信息 例如:{"aaa":"bbb"}
     *      options.success 请求成功时触发的回调函数
     *          res 请求结果 包含:response  服务器返回的数据  status  服务器返回的状态码   statusText  结果文字 OK
     *          xml XMLHttpRequest的对象
     *      options.error 请求失败时触发的回调函数
     *          err 失败信息
     *          xml XMLHttpRequest的对象
     *      options.complete 请求完成时触发回调函数,无论成功或失败,都会触发此函数
     *          res 完成信息
     *          xml XMLHttpRequest的对象
     * */
    get:function (options) {
        var _options_ = {
            url:"",
            timeout:0,
            dataType:"",
            sysnc:true,
            headers:{},
            success:function (res,xml) {},
            error:function (err,xml) {},
            complete:function (res,xml) {}
        };
        if (typeof  options == "object"){
            for (var key in options){
                if (_options_.hasOwnProperty(key)){
                    _options_[key] = options[key];
                }
            }
        }
        this.xml();
        var xml = this.http;
        xml.open("GET",_options_.url,_options_.sysnc);
        xml.timeout = _options_.timeout;
        xml.responseType = _options_.dataType;
        for (var k in _options_.headers){
            xml.setRequestHeader(k, _options_.headers[k]);
        }
        xml.send();

        xml.onreadystatechange = function (evt) {
            if (xml.readyState === 4){
                var status = xml.status;
                var statusText = xml.statusText;
                var response = xml.response;
                if (status && statusText){
                    _options_.success({response:response,status:status,statusText:statusText},xml);
                }
            }
        };

        xml.ontimeout = function (e) {
            _options_.complete(e.type,xml);
        };

        xml.onloadend = function(e){
            _options_.complete(e,xml);
        };

        xml.onerr = function (err) {
            _options_.error(err,xml);
            _options_.complete(err,xml);
        };

        return this;
    },

    /**
     * 功能:进行post请求,并且可使用FormData包装可进行上传文件
     * @param options 请求设置
     *      options.url 请求地址
     *      options.timeout 请求超时时间,默认0
     *      options.data post请求参数
     *      options.dataType 请求完成后返回数据格式 默认为空,即返回数据为字符串
     *      options.sysnc 设置请求异步或同步 默认为 true  异步请求
     *      options.headers 设置请求header信息 例如:{"aaa":"bbb"}
     *      options.success 请求成功时触发的回调函数
     *          res 请求结果 包含:response  服务器返回的数据  status  服务器返回的状态码   statusText  结果文字 OK
     *          xml XMLHttpRequest的对象
     *      options.error 请求失败时触发的回调函数
     *          err 失败信息
     *          xml XMLHttpRequest的对象
     *      options.complete 请求完成时触发回调函数,无论成功或失败,都会触发此函数
     *          res 完成信息
     *          xml XMLHttpRequest的对象
     * */
    post:function (options) {
        var _options_ = {
            url:"",
            timeout:0,
            data:{},
            dataType:"",
            sysnc:true,
            headers:{},
            success:function (res,xml) {},
            error:function (err,xml) {},
            complete:function (res,xml) {}
        };
        if (typeof  options == "object"){
            for (var key in options){
                if (_options_.hasOwnProperty(key)){
                    _options_[key] = options[key];
                }
            }
        }

        this.xml();
        var xml = this.http;
        xml.open("POST",_options_.url,_options_.sysnc);
        xml.timeout = _options_.timeout;
        xml.responseType = _options_.dataType;
        for (var k in _options_.headers){
            xml.setRequestHeader(k, _options_.headers[k]);
        }

        var params = null;
        if (Object.prototype.toString.call(_options_.data)==='[object Object]') {
            params = new FormData();
            for (var key in _options_.data){
                params.append(key,_options_.data[key]);
            }
        }
        if (Object.prototype.toString.call(_options_.data)==='[object FormData]') {
            params = _options_.data;
        }
        if (Object.prototype.toString.call(_options_.data)==='[object String]') {
            params = _options_.data;
        }
        xml.send(params);

        xml.onreadystatechange = function (evt) {
            if (xml.readyState === 4){
                var status = xml.status;
                var statusText = xml.statusText;
                var response = xml.response;
                if (status && statusText){
                    _options_.success({response:response,status:status,statusText:statusText},xml);
                }
            }
        };

        xml.ontimeout = function (e) {
            _options_.complete(e.type,xml);
        };

        xml.onloadend = function(e){
            _options_.complete(e,xml);
        };

        xml.onerr = function (err) {
            _options_.error(err,xml);
            _options_.complete(err,xml);
        };

        return this;
    },

    /**
     * 功能:进行get/post请求,在post请求下,,可使用FormData包装可进行上传文件
     * @param options 请求设置
     *      options.url 请求地址
     *      options.timeout 请求超时时间,默认0
     *      options.data post 请求参数
     *      options.data type 请求方法 默认get
     *      options.dataType 请求完成后返回数据格式 默认为空,即返回数据为字符串
     *      options.sysnc 设置请求异步或同步 默认为 true  异步请求
     *      options.headers 设置请求header信息 例如:{"aaa":"bbb"}
     *      options.success 请求成功时触发的回调函数
     *          res 请求结果 包含:response  服务器返回的数据  status  服务器返回的状态码   statusText  结果文字 OK
     *          xml XMLHttpRequest的对象
     *      options.error 请求失败时触发的回调函数
     *          err 失败信息
     *          xml XMLHttpRequest的对象
     *      options.complete 请求完成时触发回调函数,无论成功或失败,都会触发此函数
     *          res 完成信息
     *          xml XMLHttpRequest的对象
     * */
    ajax:function(options){
        var _options_ = {
            url:"",
            timeout:0,
            data:{},
            type:"get",
            dataType:"",
            sysnc:true,
            headers:{},
            success:function (res,xml) {},
            error:function (err,xml) {},
            complete:function (res,xml) {}
        };
        if (typeof  options == "object"){
            for (var key in options){
                if (_options_.hasOwnProperty(key)){
                    _options_[key] = options[key];
                }
            }
        }

        this.xml();
        var xml = this.http;
        xml.open(_options_.type,_options_.url,_options_.sysnc);
        xml.timeout = _options_.timeout;
        xml.responseType = _options_.dataType;
        for (var k in _options_.headers){
            xml.setRequestHeader(k, _options_.headers[k]);
        }
        var params = null;
        if (Object.prototype.toString.call(_options_.data)==='[object Object]') {
            params = new FormData();
            for (var key in _options_.data){
                params.append(key,_options_.data[key]);
            }
        }
        if (Object.prototype.toString.call(_options_.data)==='[object FormData]') {
            params = _options_.data;
        }
        if (Object.prototype.toString.call(_options_.data)==='[object String]') {
            params = _options_.data;
        }
        xml.send(params);

        xml.onreadystatechange = function (evt) {
            if (xml.readyState === 4){
                var status = xml.status;
                var statusText = xml.statusText;
                var response = xml.response;
                if (status && statusText){
                    _options_.success({response:response,status:status,statusText:statusText},xml);
                }
            }
        };

        xml.ontimeout = function (e) {
            _options_.complete(e.type,xml);
        };

        xml.onloadend = function(e){
            _options_.complete(e,xml);
        };

        xml.onerr = function (err) {
            _options_.error(err,xml);
            _options_.complete(err,xml);
        };

        return this;
    },

    /**
     * 功能:进行创建XMLHttpRequest对象
     * */
    xml:function () {
        if (!this.http){
            if (window.XMLHttpRequest) {
                this.http = new XMLHttpRequest();
            } else if (window.ActiveXObject) {
                this.http = new ActiveXObject("Microsoft.XMLHTTP");
            }
        }
        return this;
    },

    /**
     * 保存XMLHttpRequest对象
     * */
    http:null
};

使用方法:引入后,可直接调用

 

进行简单封装的ajax请求,可直接使用_第1张图片

 

 

 

你可能感兴趣的:(JavaScript)