Ajax跨域模仿jQuery封裝整合
阿新 • • 發佈：2020-08-13
function ajax(obj) { var defaults = { type:'get', async:true, date:{}, url:'#', dataType:'text', jsonp:'callback', success:function (data) { console.log(data); }, } //使用for in迴圈進行屬性覆蓋 for(var key in obj){ defaults[key]= obj[key]; } if (defaults.dataType == 'jsonp'){ ajax4Jsonp(defaults,obj); }else { ajax4Json(defaults,obj); } } function ajax4Json(defaults,obj) { //1、建立xhrd物件 var xhr =null; if (window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else { xhr= new ActiveXObject('Microsoft.XMLHTTP'); } //把物件形式的引數轉化成字串形式的引數 var param =''; for(var attr in defaults,data){ param += attr + '=' +defaults.data[attr]+'&'; } if (param){ param = param.substring(0,param.length -1); } //處理get引數並且處理中文亂碼問題 if (defaults.type == 'get'){ defaults.url+= '?' + encodeURI(param); } //2、準備傳送（設定傳送的引數） xhr.open(defaults.type,defaults.url,defaults.async); //處理post請求引數並設定請求頭（必須設定） var data = null; if (defaults.type == 'post'){ data =param; xhr.setRequestHeader("Content-Type","application/x-www-form-encoded"); } //3、執行傳送動作 xhr.send(data); //處理同步請求：不會呼叫回撥函式 if (defaults.async){ if (defaults.dataType == 'json'){ return JSON.parse(xhr.responseText); }else { return xhr.responseText; } } //4、指定回撥函式（處理伺服器響應資料） xhr.onreadystatechange = function () { if (xhr.readyState == 4){ if (xhr.status == 200){ var data = xhr.responseText; if (defaults.dataType == 'json'){ data = JSON.parse(data); } defaults.success(data); } } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/ajax3.js"></script> <script> ajax({ type:'get', url:'http://localhost:9999/test5', dataType:'jsonp', success:function (data) { console.log(data); }, }) </script> </head> <body> </body> </html>
} function ajax4Jsonp(defaults,obj) { var cbName = 'jQuery' + ('1.11.1'+Math.random()).replace(/\D/g,"") +'_'+(new Date().getTime()); if (defaults.jsonpCallback){ cbName = jsonpCallback; } //這裡是回撥函式，呼叫方式：伺服器響應內容來呼叫 //向window物件中添加了一個方法，方法名稱是cbName window[cbName] = function (data) { obj.success(data); } var script = document.createElement('script'); script.src = defaults.url +'?'+defaults.jsonp +'='+ cbName; var head = document.getElementsByTagName('head')[0]; head.appendChild(script); }