1. 程式人生 > >js源碼 模仿 jquery的ajax的獲取數據(get,post )的請求封裝

js源碼 模仿 jquery的ajax的獲取數據(get,post )的請求封裝

{} req turn eva syn 動作 取字符串 func ring

function ajax(obj){ // 默認參數 var defaults = { type : ‘get‘, data : {}, url : ‘#‘, dataType : ‘text‘, async : true, success : function(data){console.log(data)} } // 處理形參,傳遞參數的時候就覆蓋默認參數,不傳遞就使用默認參數 for(var key in obj){//把輸入的參數與設置的默認數據進行覆蓋更新 defaults[key] = obj[key]; } // 1、創建XMLHttpRequest對象 var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);//兼容ie的早期版本 } // 把對象形式的參數轉化為字符串形式的參數 /* {username:‘zhangsan‘,‘password‘:123} 轉換為 username=zhangsan&password=123 */ var param = ‘‘; for(var attr in obj.data){ param += attr + ‘=‘ + obj.data[attr] + ‘&‘; } if(param){//substring(start, end)截取字符串去掉最後的&符號 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-urlencoded");//post模式下必須加的請求頭,這個請求頭是告訴服務器怎麽去解析請求的正文部分。 } // 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){//4 獲取數據成功 if(xhr.status == 200){//200 獲取的數據格式正確 var data = xhr.responseText; if(defaults.dataType == ‘json‘){ // data = eval("("+ data +")"); data = JSON.parse(data);//JSON.parse把獲取帶的json格式的數據轉化為js的對象形式可以使用 } defaults.success(data);//回調函數 } } } }

js源碼 模仿 jquery的ajax的獲取數據(get,post )的請求封裝