将ajax请求封装为一个对象（原生js）

最新推荐文章于 2022-10-15 11:52:51 发布

Monster0936

最新推荐文章于 2022-10-15 11:52:51 发布

阅读量2.1k

点赞数 2

分类专栏：前端文章标签：前端 javascript Ajax

本文链接：https://blog.csdn.net/Monster0936/article/details/77304869

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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);
        }
    }
};