Ajax原理与包装详解

Ajax我们每日都在用,jquery库对Ajax的包裹也很完善、很好用,上边我们看一下她的内部原理,并手动封装一个谈得来的Ajax库。

更多关于ajax封装及数据处理,请参见迪拜尚学堂《Ajax中replace+Jq封装的ajax》、《ajax+json数据处理

一、原理

原生Ajax的发送需要四步:
1) 创建Ajax对象: XMLHttpRequest
2) 设置请求参数: open(请求参数[get/post],url地址,
是否异步[true/false] )
3) 设置回调函数: onreadystateChange 用于拍卖回来的数据
4) 发送请求: send()

//TODO step1: 创建ajax对象
var xhr = new XMLHttpRequest();
 //TODO step2: 设置请求参数
xhr.open('get','01.php',true);
 //TODO step3: 设置回调
xhr.onreadystatechange = function () {
     //接收返回数据
    console.log(xhr.responseText);//responseText 用于接收后台响应的文本
}
 //TODO step4: 发送请求
xhr.send();

二、封装

卷入的主题思想就是把需要动态变化的一对当成参数,不变的一些就留在这里,在上头的代码中呼吁模式(get、post)、请求地址url、请求参数data、成功的回调success、败北回调error等,这么些参数都是动态变化的;而成立Ajax对象
XMLHttprequest、事件监听onreadystatechange等是平昔的,所以率先步我们要确定好封装的参数:

一、封装

打包的核心思想就是把需要动态变化的片段当成参数,不变的一部分就留在这里,在下面的代码中呼吁形式(get、post)、请求地址url、请求参数data、成功的回调success、失利回调error等,这多少个参数都是动态变化的;而创制Ajax对象 XMLHttprequest、事件监听onreadystatechange等是永恒的,所以率先步我们要规定好封装的参数:

#.  url  请求地址

#.  data 请求数据

#.  type 请求类型

#.  success 成功回调

#.  error 败北回调

#. beforeSend 发送前调用
return false 阻止发送

#.  complete ajax请求成功的回调, 无论咋样时候都会举行

 

function ajax(option){
    //用户配置option 默认配置init
    var init = {
        type:'get',
        async:true,
        url:'',
        success: function () { },
        error: function () { },
        data:{},
        beforeSend: function () {
            console.log('发送前...');
            return false;
        }
    };
    //TODO step1: 合并参数
    for(k in option){
        init[k] = option[k];
    }
    //TODO step2: 参数转换
    var params = '';
    for(k in init.data){
        params += '&'+k+'='+init.data[k];
    }
    var xhr = new XMLHttpRequest();
    // type url
    //TODO step3: 区分get和post,进行传参
    var url = init.url+'?__='+new Date().getTime();
    //TODO step4: 发送前
    var flag = init.beforeSend();
    if(!flag){
        return;
    }
    if(init.type.toLowerCase() == 'get'){
        url += params;
        xhr.open(init.type,url,init.async);
        xhr.send();
    }else{
        xhr.open(init.type,url,init.async);
      xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
        xhr.send(params.substr(1));
    }
    xhr.onreadystatechange = function () {
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                init.success(xhr.responseText);
            }else{
                //error
                init.error();
            }
        }
    }
}

 

此地我们要留心的是get和post的传参模式地点不相同,get请求需要一贯拼接在url地址前面,post请求需要在send方法里面传参,而且亟需这是呼吁头setRequestHeader(‘content-type’,’application/x-www-

form-urlencoded’),所以封装时要开展区分。

鉴于参数过多,用户不需要每一遍都传出很多参数,否则用起来会分外繁琐。所以我们运用默认参数的样式,用户不传播就是用默认值,传入就是用用户的参数。

三、使用示例

ajax({
    url: 'test.json',
    data:{test:123,age:456},
    //type:'post',
    success: function (res) {
        console.log(res);
    }
});

 

相关文章