面向对象极致封装＝>

前段时间查阅了一遍Jquery源码对Ajax的封装，参数采用对象化而且还能设置默认值，传入数据直接传对象就行，重要的地方可能就是如何把对象数据格式转换成url字符串，于是就有着自己封装一个小插件的想法，把浏览器兼容也封装进去，留一个数据入口，最后再来一个回调函数，结合了POST和GET两种请求方式。

[入口设计]=>

借鉴了Jquery的对象封装方式，直接传入对象一劳永逸，其实还有一个参数async，可设置可不设置，默认是true，也就是异步。当然你要同步，就换成false。

ajax({

type:'get',//请求方式

url:'/user',//接口

data:{//数据

name:'job',

age:18,

},

success:function(data){//回调函数

let obj=JSON.parse(data);//json字符串转换

console.log(obj);

}

})

[函数主体]=>

function ajax(){

var xhr;

//判断浏览器是否支持XMLHttpRequest对象

if(window.XMLHttpRequest){

xhr=new XMLHttpRequest();

}else{

xhr=new ActiveXObject("Microsoft.XMLHTTP");

}

//接收data数据，并转化为字符串格式

let dataArr=[];

for(let key in data){

dataArr.push(key+'='+data[key]);

}

//设置默认值可能为空

let datastr=dataArr.join('&')null;

//判断是gett方式并且有数据，拼接数据

if(type=='get'&&datastr){

url+='?';

url+=datastr;

datastr=null;

}

xhr.open(type,url,async);

//post发送数据需要加上请求头

if(type=='post'&&datastr){

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

}

xhr.onreadystatechange=function(){

if(xhr.readyState==4&&xhr.status==200){

success(xhr.responseText);

//把响应的数据传给参数

}

}

xhr.send(datastr);

}

[Ajax的异步]=>

异步：是相对与同步而言的，异步执行的时候不需要等待程序执行完毕再执行下一条，是可以同事进行的，如果一个网页的所有交互都是同步，那么用户体一次只能执行一个程序，所以异步就是相对于其他部分代码是独立执行的。当然不是说同步就没用，有些时候我们必然使用同步，比如说加载一些数据，然后执行加载数据成功后的渲染页面，这个时候就必须使用同步，因为你数据都还没加载完，怎么去渲染页面呢。