將ajax請求封裝為一個物件(原生js)
阿新 • • 發佈:2019-02-14
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); } } };