1 /*
* ajax方法
*/
var Ajax = function() {
var that = this;
//创建异步请求对象方法
that.createXHR = function() {
if(window.XMLHttpRequest) { //IE7+、Firefox、Opera、Chrome 和Safari
return new XMLHttpRequest();
} else if(window.ActiveXObject) { //IE6 及以下
var versions = ['MSXML2.XMLHttp', 'Microsoft.XMLHTTP'];
for(var i = 0, len = versions.length; i < len; i++) {
try {
return new ActiveXObject(version[i]);
break;
} catch(e) {
//跳过
}
}
} else {
throw new Error('浏览器不支持XHR对象！');
}
}
//初始化数据方法
that.init = function(obj) {
//初始化数据
var objAdapter = {
method: 'get',
data: {},
success: function() {},
complete: function() {},
error: function(s) {
alert('status:' + s + 'error!');
},
async: true
}
//通过使用JS随机字符串解决IE浏览器第二次默认获取缓存的问题
that.url = obj.url + '?rand=' + Math.random();
that.method = obj.method || objAdapter.method;
that.data = that.params(obj.data) || that.params(objAdapter.data);
that.async = obj.async || objAdapter.async;
that.complete = obj.complete || objAdapter.complete;
that.success = obj.success || objAdapter.success;
that.error = obj.error || objAdapter.error;
}
//ajax异步调用
that.ajax = function(obj) {
that.method = obj.method || 'get';
if(obj.method === 'post'){
that.post(obj);
}else{
that.get(obj);
}
}
//post方法
that.post = function(obj) {
var xhr = that.createXHR(); //创建XHR对象
that.init(obj);
that.method='post';
if(that.async === true) { //true表示异步，false表示同步
//使用异步调用的时候，需要触发readystatechange 事件
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) { //判断对象的状态是否交互完成
that.callback(obj,this); //回调
}
};
}
//在使用XHR对象时，必须先调用open()方法，
//它接受三个参数：请求类型(get、post)、请求的URL和表示是否异步。
xhr.open(that.method, that.url, that.async);
//post方式需要自己设置http的请求头，来模仿表单提交。
//放在open方法之后，send方法之前。
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(that.data); //post方式将数据放在send()方法里
if(that.async === false) { //同步
that.callback(obj,this); //回调
}
};
//get方法
that.get = function(obj) {
var xhr = that.createXHR(); //创建XHR对象
that.init(obj);
if(that.async === true) { //true表示异步，false表示同步
//使用异步调用的时候，需要触发readystatechange 事件
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) { //判断对象的状态是否交互完成
that.callback(obj,this); //回调
}
};
}
//若是GET请求，则将数据加到url后面
that.url += that.url.indexOf('?') == -1 ? '?' + that.data : '&' + that.data;
//在使用XHR对象时，必须先调用open()方法，
//它接受三个参数：请求类型(get、post)、请求的URL和表示是否异步。
xhr.open(that.method, that.url, that.async);
xhr.send(null); //get方式则填null
if(that.async === false) { //同步
that.callback(obj,this); //回调
}
}
//请求成功后，回调方法
that.callback = function(obj,xhr) {
if(xhr.status == 200) { //判断http的交互是否成功，200表示成功
obj.success(xhr.responseText); //回调传递参数
} else {
alert('获取数据错误！错误代号：' + xhr.status + '，错误信息：' + xhr.statusText);
}
}
//数据转换
that.params = function(data) {
var arr = [];
for(var i in data) {
//特殊字符传参产生的问题可以使用encodeURIComponent()进行编码处理
arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
}
return arr.join('&');
}
return {
post : that.post,
get : that.get,
ajax : that.ajax
}
}
上述的Ajax方法可以看成是一个类，共有方法有:
1. 初始化数据方法init(),
2. 创建异步请求对象方法createXHR()，
3.请求方法ajax(),post(),get()，
4.请求成功后回调方法callback(),
5.数据格式转换方法params()
也可以看成一个函数，return 返回的json对象中定义的接口用于函数内方法的调用
故而有有两种方式进行使用封装的Ajax
函数方式：测试代码数据
Ajax().post({
url: 'ajax.php',
data: {
'name': 'JR',
'age': 22
},
success: function(message) {
console.log(message);
},
async: true
});
类方式：测试代码数据
var ajax = new Ajax();
ajax.post({
url: 'ajax.php',
data: {
'name': 'JR',
'age': 22
},
success: function(message) {
console.log(message);
},
async: true
});
对上述封装的ajax方法进行优化
var Ajax = {
//ajax模块
init: function(obj) {
//初始化数据
var objAdapter = {
url: '',
method: 'get',
data: {},
success: function() {},
complete: function() {},
error: function(s) {
alert('status:' + s + 'error!');
},
async: true
}
//通过使用JS随机字符串解决IE浏览器第二次默认获取缓存的问题
objAdapter.url = obj.url + '?rand=' + Math.random();
objAdapter.method = obj.method || objAdapter.method;
objAdapter.data = Ajax.params(obj.data) || Ajax.params(objAdapter.data);
objAdapter.async = obj.async || objAdapter.async;
objAdapter.complete = obj.complete || objAdapter.complete;
objAdapter.success = obj.success || objAdapter.success;
objAdapter.error = obj.error || objAdapter.error;
return objAdapter;
},
//创建XMLHttpRequest对象
createXHR: function() {
if(window.XMLHttpRequest) { //IE7+、Firefox、Opera、Chrome 和Safari
return new XMLHttpRequest();
} else if(window.ActiveXObject) { //IE6 及以下
var versions = ['MSXML2.XMLHttp', 'Microsoft.XMLHTTP'];
for(var i = 0, len = versions.length; i < len; i++) {
try {
return new ActiveXObject(version[i]);
break;
} catch(e) {
//跳过
}
}
} else {
throw new Error('浏览器不支持XHR对象！');
}
},
params: function(data) {
var arr = [];
for(var i in data) {
//特殊字符传参产生的问题可以使用encodeURIComponent()进行编码处理
arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
}
return arr.join('&');
},
callback: function(obj, xhr) {
if(xhr.status == 200) { //判断http的交互是否成功，200表示成功
obj.success(xhr.responseText); //回调传递参数
} else {
alert('获取数据错误！错误代号：' + xhr.status + '，错误信息：' + xhr.statusText);
}
},
ajax: function(obj) {
if(obj.method === 'post') {
Ajax.post(obj);
} else {
Ajax.get(obj);
}
},
//post方法
post: function(obj) {
var xhr = Ajax.createXHR(); //创建XHR对象
var opt = Ajax.init(obj);
opt.method = 'post';
if(opt.async === true) { //true表示异步，false表示同步
//使用异步调用的时候，需要触发readystatechange 事件
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) { //判断对象的状态是否交互完成
Ajax.callback(opt, xhr); //回调
}
};
}
//在使用XHR对象时，必须先调用open()方法，
//它接受三个参数：请求类型(get、post)、请求的URL和表示是否异步。
xhr.open(opt.method, opt.url, opt.async);
//post方式需要自己设置http的请求头，来模仿表单提交。
//放在open方法之后，send方法之前。
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(opt.data); //post方式将数据放在send()方法里
if(opt.async === false) { //同步
Ajax.callback(obj, xhr); //回调
}
},
//get方法
get: function(obj) {
var xhr = Ajax.createXHR(); //创建XHR对象
var opt = Ajax.init(obj);
if(opt.async === true) { //true表示异步，false表示同步
//使用异步调用的时候，需要触发readystatechange 事件
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) { //判断对象的状态是否交互完成
Ajax.callback(obj, xhr); //回调
}
};
}
//若是GET请求，则将数据加到url后面
opt.url += opt.url.indexOf('?') == -1 ? '?' + opt.data : '&' + opt.data;
//在使用XHR对象时，必须先调用open()方法，
//它接受三个参数：请求类型(get、post)、请求的URL和表示是否异步。
xhr.open(opt.method, opt.url, opt.async);
xhr.send(null); //get方式则填null
if(opt.async === false) { //同步
Ajax.callback(obj, xhr); //回调
}
}
};
测试代码
Ajax.post({
url: 'ajax.php',
data: {
'name': 'JR',
'age': 22
},
success: function(message) {
console.log(message);
},
async: true
});
ajax.php页面代码
<?php
echo $_POST['name'];
?>
控制台显示