直接上代碼 //封裝的ajax函數 // 傳一個對象,所有要用的參數都在對象中 因為不寫對象 實參列表個數太多,所以像jq一樣,調用ajax也是把對象當實際參數傳進去 // type 請求方式 預設get // url 請求地址 這個必須要有,沒有直接 return 後面都不需要判斷 // asyn ...
直接上代碼
//封裝的ajax函數 // 傳一個對象,所有要用的參數都在對象中 因為不寫對象 實參列表個數太多,所以像jq一樣,調用ajax也是把對象當實際參數傳進去 // type 請求方式 預設get // url 請求地址 這個必須要有,沒有直接 return 後面都不需要判斷 // async 是否非同步 如果不傳預設是true true是非同步,false是同步 很雞肋,既然用了ajax一般都是非同步 //data : 對象的形式 用對象包裹,jq中提供了表單序列化 $(表單).serialize() 得到所以表單的鍵值對字元串 //success :成功的回調函數 有參數 //error: 失敗的回調函數 // dataType: 值:xml/json/text 以下為代碼部分: function ajax(options){ //如果沒傳參數,獲取傳的不是對象,那麼直接return if(!options || typeof options !== 'object'){ return; }var type = options.type;
var url = options.url; //如果沒有傳url則直接return if(!url){ return; } //獲取async參數,並且做判斷是否非同步 var async = options.async === false ? false : true;
//由於傳入的參數變成了對象,所以需要把對象轉換成字元串 var params = getParams(options.data);
//1. 創建實例 var xhr = new XMLHttpRequest(); //增加的功能,如果不傳或者傳的是其他的不符合要求的就用get請求,如果傳post就用post請求 type = type === 'post' ? 'post' : 'get';
// 2. 設置請求行 //判斷是否是get請求,如果是get請求要拼接參數 if(type === 'get'){ url += '?' + params; params = null; }
xhr.open(type, url, async); // 3. 設置請求頭 post才設置 if(type === 'post'){ xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); } // 4. 發送請求 // if(type === 'get'){ // xhr.send(); // }else{ // xhr.send(params); // } xhr.send(params);
// 5. 監聽響應 xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ //根據dataType去做對應的處理,保證在成功的回調函數中,拿到處理後的數據 if(options.dataType === 'json'){ var result = JSON.parse(xhr.responseText); }else if(options.dataType === 'xml'){ var result = xhr.responseXML; }else{ var result = xhr.responseText; } //成功了 // 調用success的回調函數 //如果沒傳成功的回調函數,那麼就不應該調用 options.success && options.success(result);
}else{ //失敗了 options.error && options.error(); } } }
}
//函數的作用: 將對象轉成鍵值對形式的字元串 //這裡是原生js,所以需要封裝函數將參數對象里的data數據轉成字元串格式提交給後臺 jq就比較方便了serialize() function getParams(obj){ if(!obj){ return; } var arr = []; for(var k in obj){ arr.push(k +'=' + obj[k]); } return arr.join('&'); } 結尾 var $ = { ajax:function(){} } $.ajax();是不是很像?哈哈哈
