面向对象极致封装=>

前段时间查阅了一遍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的异步]=>

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

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180131G15QUT00?refer=cp_1026

同媒体快讯

  • ES6新特性一

    2018-10-16
  • 正则表达式Reg

    2018-10-16

相关快讯

扫码关注云+社区