将ajax请求封装为一个对象(原声js)

var AjaxUtil = {
    // 默认基础选项
    options : {
        method : "get", //默认提交的方法
        url : "", //请求的路径 required
        params : {}, //请求的参数
        type : 'text', //返回的内容的类型,text,xml,json
        callback : function() {
        }//回调函数required
    },

    //创建XMLHttpRequest对象
    creatRequest : function() {
        var xmlhttp;
        try {
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //IE6以上版本
        } catch (e) {
            try {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //IE6以下版本
            } catch (e) {
                try {
                    xmlhttp = new XMLHttpRequest();
                    if(xmlhttp.overrideMimeType) {
                        xmlhttp.overrideMimeType("text/xml");
                    }
                } catch (e) {
                    alert("您的浏览器不支持Ajax");
                }
            }
        }
        return xmlhttp;
    },

    // 设置基础选项,覆盖默认项
    setOption : function(newOptions) {
        for (var pro in newOptions) {
            this.options[pro] = newOptions[pro];
        }
    },

    // 格式化请求参数
    formateParameters : function() {
        var paramsArray = [];
        var params = this.options.params;
        for (var pro in params) {
            var paramValue = params[pro];
            /*if(this.options.method.toUpperCase() === "GET")
            {
                paramValue = encodeURIComponent(params[pro]);
            }*/
            paramsArray.push(pro + "=" + paramValue);
        }
        return paramsArray.join("&");
        //method = get&url=&callback=&type=text
    },

    // 状态改变的处理
    readystatechange : function(xmlhttp) {
        // 获取返回值
        var returnValue;
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            switch (this.options.type) {
            case "xml":
                returnValue = xmlhttp.responseXML;
                break;
            case "json":
                var jsonText = xmlhttp.responseText;
                if(jsonText){
                    returnValue = eval("(" + jsonText + ")");
                }
                break;
            default:
                returnValue = xmlhttp.responseText;
                break;
            }
            if (returnValue) {
                this.options.callback.call(this, returnValue);
            } else {
                this.options.callback.call(this);
            }
        }
    },

    // 发送Ajax请求
    //{'method':'get'}
    request : function(options) {
        var ajaxObj = this;
     
        // 设置参数
        ajaxObj.setOptions.call(ajaxObj, options);
     
        // 创建XMLHttpRequest对象
        var xmlhttp = ajaxObj.createRequest.call(ajaxObj);
     
        // 设置回调函数
        xmlhttp.onreadystatechange = function() {
            ajaxObj.readystatechange.call(ajaxObj, xmlhttp);
        };
     
        // 格式化参数
        var formateParams = ajaxObj.formateParameters.call(ajaxObj);
     
        // 请求的方式
        var method = ajaxObj.options.method;
        var url = ajaxObj.options.url;
     
        if ("GET" === method.toUpperCase()) {
            url += "?" + formateParams;
        }

        // 建立连接
        xmlhttp.open(method, url, true);
     
        if ("GET" === method.toUpperCase()) {
            xmlhttp.send(null);
        } else if ("POST" === method.toUpperCase()) {
            // 如果是POST提交,设置请求头信息
            xmlhttp.setRequestHeader("Content-Type",
                    "application/x-www-form-urlencoded");
            xmlhttp.send(formateParams);
        }
    }
};

欢迎学习交流——燃烧的陈林林

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 2016-4-10 星期天 晴 我们俩第一次见面,大约是六年前,那时我们在上大二。晚上上传统文化与现代科技选修课...
    媒人2016阅读 1,911评论 0 0
  • 年过三十,心里想的,不会轻易表达。他们遇事要沉稳;即使内心如何汹涌,表面亦要处变不惊。有人说,男人20岁后再无...
    D036wade阅读 1,475评论 0 2
  • 漫步雨中 与身边匆匆而过的行人擦肩而过,徒留一地水花。 每一把陌生的伞下, 都是一张陌生的脸; 每一...
    艾泽拉阅读 1,378评论 0 2
  • 半夜趴在被窝里玩手机,突然觉得眼前一花,在一看自己正握着一个男生的腰,男生不悦地看着你“几点了还不睡,我有那么好玩...
    河伯的新娘阅读 4,057评论 0 1
  • 前几天觉得想写点东西,然后就下了简书,想在这上面写点东西。然后就想写些什么好呢,我实在没有驾驭文字的能力,想来想去...
    何夕良阅读 929评论 0 0