封装前的一些分析
（1）封装的变量提取
1.请求的类型 get 或者 post
2.请求的地址 index.php 或者 login.php等等
3.前端提交的数据
4.请求成功之后做的事情
（2）需要根据type的不同需要处理的问题
1.在open的时候如果是get方式，url需要坠上data,在send的时候发送的null
2.如果是post的时候，url地址不需要坠上data，在send的时候需要传递data，而且需要设置请求头
第一版本
ajax('post',
'demo.php',
'username=feifei&age=18',
function(data) {
alert('hello')
})
function ajax(type,url,data,fn) {
//第一步
// 创建对象
var xhr = new XMLHttpRequest();
//第二步
if(type == 'get' || type == 'GET') {
// 如果是get方式，需要将data和url组合起来
url = url + '?' + data;
// 如果是get请求，直接将data数据设置为null
data = null;
}
xhr.open(type,url,true);
if(type == 'post' || type == 'POST') {
// 如果是post的 需要设置请求头
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
}
//第三步
// 发送数据
xhr.send(data);
//第四步
xhr.onreadystatechange = function () {
if(xhr.readyState == 4 && xhr.status == 200) {
var data = xhr.responseText;
// 将一个匿名函数传递进来
// 如果传递了fn参数，才去调用
fn && fn(data);
}
}
}
第二版本
ajax({
type : 'post',
url : 'demo.php',
data : 'username=feifei&age=18',
beforeSend : function () {
alert('开始啦');
},
success : function (data) {
console.log(data);
},
error : function (error) {
console.log('错误状态码是：' + error.status);
},
complete : function () {
console.log('完成');
}
})
function ajax(obj) {
var xhr = new XMLHttpRequest();
if(obj.type == 'get' || obj.type == 'GET') {
obj.url = obj.url + '?' + obj.data;
obj.data = null;
}
xhr.open(obj.type,obj.url,true);
if(obj.type == 'post' || obj.type == 'POST') {
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
}
// 在AJAX发送之前调用
obj.beforeSend && obj.beforeSend();
// 发送数据
xhr.send(obj.data);
xhr.onreadystatechange = function () {
if(xhr.readyState == 4) {
// 意味这ajax回到了客户端
// 在根据状态码觉得是成功还是失败
if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
var data = xhr.responseText;
// 将一个匿名函数传递进来
// 如果传递了fn参数，才去调用
obj.success && obj.success(data);
} else {
obj.error && obj.error(xhr);
}
// 不管是成功还是失败，都调用complete
obj.complete && obj.complete();
}
}
}
第三版本
将data数据用对象的形式传递过去
ajax({
type : 'post',
data : {
name : 'feifei',
age : 18
},
url : 'demo.php',
beforeSend : function () {
alert('开始');
},
success : function (data) {
console.log(data);
},
error : function (error) {
console.log(error.status);
},
complete : function () {
console.log('结束');
}
})
function ajax(obj) {
var xhr = new XMLHttpRequest();
if(obj.type == 'get' || obj.type == 'GET') {
obj.url = obj.url + '?' + params(obj.data);
obj.data = null;
} else {
// 在post的时候，也需要将对象形式的data转换成字符串形式的data
obj.data = params(obj.data);
}
xhr.open(obj.type,obj.url,true);
if(obj.type == 'post' || obj.type == 'POST') {
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
}
obj.beforeSend && obj.beforeSend();
xhr.send(obj.data);
xhr.onreadystatechange = function () {
if(xhr.readyState == 4) {
if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
var data = xhr.responseText;
obj.success && obj.success(data);
} else {
obj.error && obj.error(xhr);
}
obj.complete && obj.complete();
}
}
}
// 这个函数的作用只有一个，将data对象转换成data字符串
// { username : 'feifei',age : 18 }
// 'username=feifei&age=18'
function params(data) {
var str = '';
for(var attr in data) {
str += attr + '=' + data[attr] + '&';
}
return str.slice(0,-1);
}
第四版本
添加命名空间
$.ajax({
type : 'post',
data : {
name : 'feifei',
age : 18
},
url : 'demo.php',
beforeSend : function () {
console.log('我要开始发送请求了');
},
success : function (data) {
console.log(data);
},
error : function (error) {
console.log(error.status);
},
complete : function () {
console.log('发送成功');
}
})
var $ = {
ajax : function (obj) {
var xhr = new XMLHttpRequest();
if(obj.type == 'get' || obj.type == 'GET') {
obj.url = obj.url + '?' + $.params(obj.data);
obj.data = null;
} else {
obj.data = $.params(obj.data);
}
xhr.open(obj.type,obj.url,true);
if(obj.type == 'post' || obj.type == 'POST') {
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
}
obj.beforeSend && obj.beforeSend();
xhr.send(obj.data);
xhr.onreadystatechange = function () {
if(xhr.readyState == 4) {
if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
var data = xhr.responseText;
obj.success && obj.success(data);
} else {
obj.error && obj.error(xhr);
}
obj.complete && obj.complete(xhr);
}
}
},
params : function (data) {
var str = '';
for(var attr in data) {
str += attr + '=' + data[attr] + '&';
}
return str.slice(0,-1);
}
}
