回歸下原生js,網上看到的AJAX封裝,遂拿來改改,不知還有何弊端,望指出! 假設一個需求,後端要求傳入兩個數字n1、n2,然後返回總和。 當其中一個參數為空或者不是數字時,返回:{"status":"0", "msg":"參數有誤!"} 當正確的時候,返回:{"status":"1", "sum" ...
回歸下原生js,網上看到的AJAX封裝,遂拿來改改,不知還有何弊端,望指出!
1 var ajaxHelper = { 2 /*1.0 瀏覽器相容的方式創建非同步對象*/ 3 makeXHR: function () { 4 //聲明非同步對象變數 5 var xmlHttp = false; 6 //聲明 擴展 名 7 var xmlHttpObj = ["MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp", "MSXML.XMLHttp"]; 8 //判斷瀏覽器是否支持 XMLHttpRequest,如果支持,則是新式瀏覽器,可以直接創建 9 if (window.XMLHttpRequest) { 10 xmlHttp = new XMLHttpRequest(); 11 } 12 //否則,只能迴圈遍歷老式瀏覽器非同步對象名,嘗試創建,知道創建成功為止 13 else if (window.ActiveXObject) { 14 for (i = 0; i < xmlHttpObj.length; i++) { 15 xmlHttp = new ActiveXObject(xmlHttpObj[i]); 16 if (xmlHttp) { 17 break; 18 } 19 } 20 } 21 //判斷 非同步對象 是否創建 成功,如果 成功,則返回非同步對象,否則返回false 22 return xmlHttp ? xmlHttp : false; 23 }, 24 /*2.0 發送Ajax請求*/ 25 doAjax: function (method, url, data, isAyn, callback, type) { 26 method = method.toLowerCase(); 27 //2.1創建非同步對象 28 var xhr = this.makeXHR(); 29 //2.2設置請求參數(如果是get,則帶url參數,如果不是,則不帶) 30 xhr.open(method, url + (method == "get" ? "?" + data : ""), isAyn); 31 //2.3根據請求謂詞(get/post),添加不同的請求頭 32 if (method == "get") { 33 xhr.setRequestHeader("If-Modified-Since", 0); 34 } else { 35 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 36 } 37 //2.4設置回調函數 38 xhr.onreadystatechange = function () { 39 //如果接受完畢 伺服器發回的 響應報文 40 if (xhr.readyState == 4) { 41 //判斷狀態碼是否正常 42 if (xhr.status == 200) { 43 if (type && type.toLowerCase() == "json") { 44 var ret = {}; 45 try { 46 if (typeof JSON != "undefined") { 47 ret = JSON.parse(xhr.responseText); 48 } else { 49 //IE8以下不支持JSON 50 ret = new Function("return " + xhr.responseText)(); 51 } 52 callback(ret); 53 } catch (e) { 54 console.log(e.message); 55 callback(false); 56 } 57 } else { 58 //直接返迴文本 59 callback(xhr.responseText); 60 } 61 } else { 62 console.log("AJAX Status Code:" + xhr.status); 63 callback(false); 64 } 65 } 66 }; 67 //2.5發送(如果是post,則傳參數,否則不傳) 68 xhr.send(method != "get" ? data : null); 69 }, 70 /*3.0 直接發送Post請求*/ 71 doPost: function (url, data, isAyn, callback, type) { 72 this.doAjax("post", url, data, isAyn, callback, type); 73 }, 74 /*4.0 直接發送Get請求*/ 75 doGet: function (url, data, isAyn, callback, type) { 76 this.doAjax("get", url, data, isAyn, callback, type); 77 } 78 };
假設一個需求,後端要求傳入兩個數字n1、n2,然後返回總和。
當其中一個參數為空或者不是數字時,返回:{"status":"0", "msg":"參數有誤!"}
當正確的時候,返回:{"status":"1", "sum":"//n1加n2的和"}
後端的代碼就不貼出來了。
前端調用:
1 document.getElementById("btnSubmit").onclick = function () { 2 ajaxHelper.doPost("後端url", "n1=10&n2=25", true, function (ret) { 3 if (!ret) { return; } 4 if (ret.status != 1) { 5 alert(ret.msg); 6 return; 7 } 8 var n = ret.sum; 9 var s = ret.status; 10 }, "json"); 11 };