在經歷了Jsp實訓的慘痛教訓後,特意花了點時間學習Ajax,學完後自我感覺良好,於是寫瞭如下一個小框架: 1 /** 2 * frameAjax 3 * 4 * 參數: 5 * paramsObj: Json 6 * required params: 7 * type:請求參數類型(String) ...
在經歷了Jsp實訓的慘痛教訓後,特意花了點時間學習Ajax,學完後自我感覺良好,於是寫瞭如下一個小框架:
1 /** 2 * frameAjax 3 * 4 * 參數: 5 * paramsObj: Json 6 * required params: 7 * type:請求參數類型(String) 8 * url:請求地址(String) 9 * data:請求參數(Json),data可為空值。 10 * success:請求回調(Function) 11 * async:表示請求是否非同步處理。預設為true,表示非同步,可省略不寫。 12 * 13 */ 14 15 (function () { 16 function frameAjax(paramsObj) { 17 //處理請求參數 18 var arr = []; 19 for (var pro in paramsObj.data) { 20 arr.push(pro + '=' + paramsObj.data[pro]); 21 } 22 var data = arr.join("&"); //用“&”拼接請求參數 23 var async = true; //預設非同步 24 if (paramsObj.async) { //判斷是否非同步處理 25 async = paramsObj.async; 26 } 27 28 //創建Ajax引擎對象 29 var ajax = getAjax(); 30 //覆寫onreadystatement函數 31 ajax.onreadystatechange = function () { 32 //判斷Ajax狀態碼 33 if (ajax.readyState == 4) { 34 //判斷響應狀態碼 35 if (ajax.status == 200) { 36 if (paramsObj.success) { 37 paramsObj.success(ajax); 38 } 39 } else if (ajax.status == 404) { 40 console.error("請求資源不存在"); 41 } else if (ajax.status == 500) { 42 console.error("伺服器繁忙"); 43 } 44 } 45 } 46 47 //發送請求 48 if (paramsObj.type.toLowerCase() == "get") { 49 ajax.open("get", paramsObj.url + (data == null ? "" : "?" + data), async); 50 ajax.send(null); 51 } else if (paramsObj.type.toLowerCase() == "post") { 52 ajax.open("post", paramsObj.url, async); 53 ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 54 ajax.send(data); 55 } else { 56 console.log("請求類型錯誤"); 57 } 58 } 59 60 //獲取請求對象 61 function getAjax() { 62 var ajax; 63 if (window.XMLHttpRequest) { //火狐 64 ajax = new XMLHttpRequest(); 65 } else if (window.ActiveXObject) { //IE 66 ajax = new ActiveXObject("Msxml2.XMLHTTP"); 67 } 68 return ajax; 69 } 70 //將框架封裝於window對象中 71 window.frameAjax = frameAjax; 72 }())