Ajax常用的封装函数
qingheluo2016-12-16清河洛276
因为Ajax使用起来比较麻烦,主要就是参数问题,比如到底使用GET还是POST;到底是使用同步还是异步等等,我们需要封装一个Ajax函数,来方便我们调用function createXHR() {
if (typeof XMLHttpRequest != 'undefined') {
return new XMLHttpRequest();
}else if(typeof ActiveXObject != 'undefined') {
var versions = ['MSXML2.XMLH...
因为Ajax使用起来比较麻烦,主要就是参数问题,比如到底使用GET还是POST;到底是使用同步还是异步等等,我们需要封装一个Ajax函数,来方便我们调用
function createXHR() {
if (typeof XMLHttpRequest != 'undefined') {
return new XMLHttpRequest();
}else if(typeof ActiveXObject != 'undefined') {
var versions = ['MSXML2.XMLHttp.6.0','MSXML2.XMLHttp.3.0','MSXML2.XMLHttp'];
for (var i = 0; i < versions.length; i ++) {
try {
return new ActiveXObject(version[i]);
} catch (e) {}
}
} else {
throw new Error('您的浏览器不支持XHR对象!');
}
}
function ajax(obj) {
var xhr = new createXHR();
obj.url = obj.url + '?rand=' + Math.random();
obj.data = params(obj.data);
if (obj.method === 'get'){
obj.url = obj.url.indexOf('?') == -1 ? obj.url + '?' + obj.data : obj.url + '&' + obj.data;
}
if (obj.async === true) {
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) callback();
}
}
xhr.open(obj.method, obj.url, obj.async);
if (obj.method === 'post') {
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(obj.data);
} else {
xhr.send(null);
}
if (obj.async === false) {callback();}
function callback () {
if (xhr.status == 200) {
obj.success(xhr.responseText); //回调
} else {
alert('数据返回失败!状态代码:' + xhr.status + ',状态信息:' + xhr.statusText);
}
}
}
addEvent(document, 'click', function () { //IE6需要重写addEvent
ajax({
method : 'get',
url : 'demo.php',
data : {'name' : 'Lee','age' : 100},
success : function (text) {alert(text);},
async : true
}
);
}
);
function params(data) {
var arr = [];
for (var i in data) {
arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
}
return arr.join('&');
}
PS:封装Ajax并不是一开始就形成以上的形态,需要经过多次变化而成。