1. 程式人生 > >將ajax請求封裝為一個物件(原生js)

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