js源码 模仿 jquery的ajax的获取数据（get，post ）的请求封装

Posted 2020-09-26

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);//回调函数 } } } }