封裝ajax原理

標籤：location   call   傳遞資料   類型   封裝   activex   null   ade   llb   

封裝ajax原理

1. 首先處理 使用者如果不傳某些參數，設定預設值
   • type預設get
   • 預設url為當前頁
   • 預設async方式請求
   • data資料預設為{}
2. 處理使用者傳進來的參數對象
   • 遍曆，拼接成key=value&key=value形式,加入數組
3. 通過XMLHttpRequest對象建立xhr，早期的IE瀏覽器不支援XMLHttpRequest對象,通過var xhr = new ActiveXObject(‘Msxm12.XMLHTTP‘)建立
4. 判斷使用者請求的方法
   • get:將資料拼接在url後面，
   • post：需要加一個要求標頭，並且用send方法傳遞資料
5. 判斷資料是否請求成功
   • xhr.readyState == 4 && xhr.status == 200表示請求成功
6. 根據伺服器端返回的資料類型進行加工，再用callback傳遞出去
   • 如果返回的是json格式的資料，就轉換成js對象json.parse
   • 如果是xml格式，就將DOM文檔對象返回
   • 將處理好的資料用callback傳遞出去
7. 最佳化！！！
   • 將使用者需要傳入的參數掛載到options對象上，使用者只需要傳入一個對象就可以使用了

function ajax(options){//預設值的處理，使用者不傳某些參數的時候，設定一些預設值//設定type的預設值為getoptions.type = options.type || "get";//佈建要求地址的預設值為當前頁地址options.url = options.url || location.href;// //設定async的預設值options.async = options.async || "true";//設定options.data的預設值options.data = options.data || {};//處理使用者傳進來的請求參數（data）對象//{key: "123", age: 1, gender: "male"}//key=123&age=1&gender=malevar dataArr = [];for(var k in options.data){dataArr.push(k + "=" + options.data[k]);}var dataStr = dataArr.join("&");var xhr = new XMLHttpRequest();xhr.open(options.type, options.type == "get"? options.url + "?" + dataStr : options.url, options.async);if(options.type == "post"){xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");}xhr.send(options.type == "get"? null : dataStr);if(options.async){xhr.onreadystatechange = function(){if(xhr.readyState == 4 && xhr.status == 200){var type = xhr.getResponseHeader("Content-Type");var result;if(type.indexOf("json") != -1){result = JSON.parse(xhr.responseText);}else if(type.indexOf("xml") != -1){result = xhr.responseXML;}else{result = xhr.responseText;}options.success(result);}}}else{var type = xhr.getResponseHeader("Content-Type");var result;if(type.indexOf("json") != -1){result = JSON.parse(xhr.responseText);}else if(type.indexOf("xml") != -1){result = xhr.responseXML;}else{result = xhr.responseText;}options.success(result);}}function get(options){options.type = "get";ajax(options);}function post(options){options.type = "post";ajax(options);}// ajax({// url: "json.php",// data: {key: "123", age: 1, gender: "male"},// success: function(data){// console.log(data);// }// });get({url: "json.php",success: function(data){console.log(data);}})// ajax({// url: "xml.php",// type: "get",// data: {key: "123", age: 1, gender: "male"},// success: function(data){// console.log(data);// }// });

　　

封裝ajax原理