Ajax原理与封装
2017-12-04 00:00
295 查看
Ajax大家每天都在用,jquery库对Ajax的封装也很完善、很好用,下面我们看一下他的内部原理,并手动封装一个自己的Ajax库。
更多有关ajax封装及数据处理,请参看上海尚学堂《Ajax中replace+Jq封装的ajax》、《ajax+json数据处理》
1) 创建Ajax对象: XMLHttpRequest
2) 设置请求参数: open(请求参数[get/post],url地址, 是否异步[true/false] )
3) 设置回调函数: onreadystateChange 用于处理返回的数据
4) 发送请求: send()
[java] view plain copy
//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();
url 请求地址
data 请求数据
type 请求类型
success 成功回调
error 失败回调
beforeSend 发送前调用 return false 阻止发送
complete ajax请求成功的回调, 无论什么时候都会执行
[java] view plain copy
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);
}
});
更多有关ajax封装及数据处理,请参看上海尚学堂《Ajax中replace+Jq封装的ajax》、《ajax+json数据处理》
一、原理
原生Ajax的发送需要四步:1) 创建Ajax对象: XMLHttpRequest
2) 设置请求参数: open(请求参数[get/post],url地址, 是否异步[true/false] )
3) 设置回调函数: onreadystateChange 用于处理返回的数据
4) 发送请求: send()
[java] view plain copy
//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等是固定的,所以第一步我们要确定好封装的参数:url 请求地址
data 请求数据
type 请求类型
success 成功回调
error 失败回调
beforeSend 发送前调用 return false 阻止发送
complete ajax请求成功的回调, 无论什么时候都会执行
[java] view plain copy
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'),所以封装时要进行区分。
由于参数过多,用户不需要每次都传入很多参数,否则用起来会非常繁琐。所以我们采取默认参数的形式,用户不传入就是用默认值,传入就是用用户的参数。
三、使用示例
[java] view plain copyajax({
url
: 'test.json',
data:{test:123,age:456},
//type:'post',
success: function (res) {
console.log(res);
}
});
相关文章推荐
- [妙味Ajax]第一课:原理和封装
- jquery中ajax封装原理/封装jquery的ajax工具函数
- $.ajax实现原理(封装ajax)
- AJAX的实现原理以及封装
- JQuery Ajax的实现原理以及二次封装通用的Ajax
- ajax请求原理及jquery $.ajax封装全解析
- AJAX原理及封装
- 《php---ajax简单示例---jquery内部运行原理》---jquery只是就ajax的一些功能进行了封装
- js原生Ajax 的封装和原理
- Ajax实现原理,代码封装
- Ajax原理和封装
- js原生Ajax的封装和原理详解
- 关于Ajax的原理以及代码封装详解
- ajax的简单封装
- 浅谈Ajax的原理
- Ajax请求GET/POST方法的封装
- ajax原理和XmlHttpRequest对象
- 一个封装了在Ajax下弹出Alert、showModelessDialog、showModalDialog窗口的类(转)
- Ajax原理详细说明
- AJAX入门(被封装过的AJAX)