封装 ajax 框架

function getTransport() {
var versions = {
function () {
return new XMLHttpRequest();
},
function () {
return new ActiveXObject("Microsoft.XMLHTTP");
}
};
var request;
for (var i = 0, len = versions.length; i < len; i++) {
var lambda = versions[i];
try {
request = lambda();
break;
} catch (e) {

}
}
return request;
}

function ajaxRequest(url, options) {
var request = getTransport(); //创建XMLRequest 对象
if (typeof request == 'undefined') {
//抛出异常,说明当期浏览器不支持XMLHttpRequest,并退出函数
throw new Error('Your browser does not support XMLHttpRequest');
return;
}
var url = url;
var method = (options.method || 'POST').toUpperCase();
if (method != "GET" && method != 'POST') {
method = "POST";
}
var parameters = options.parameters || null;//需要提交的参数,默认为null
var headers = options.headers || {}; //需要发送的HTTP头信息,是一个对象,其成员包含了头信息的名称和值的信息

//在请求开始时执行的函数,由用户指定,默认是一个空函数
var onLoadingEventHandler = options.onLoading || function () {
};
//在请求完成时执行的函数,由用户指定,默认是一个空函数
var onCompleteEventHandler = options.onComplete || function () {
};
//在请求成功时执行的函数,由用户指定,默认是一个空函数
var onSuccessEventHandler = options.onSuccess || function () {
};
//在请求失败时执行的函数,由用户指定,默认是一个空函数
var onFailureEventHandler = options.onFailure || function () {
};
//如果提交方法被指定为GET,则将parameters 的内容拼接到URL中,并将parameters 设置为null
if (method == "GET" && parameters != null) {
if (url.indexOf("?") > -1) {
url += '&' + parameters;
} else {
url += '?' + parameters;
}
parameters = null;
}
//初始化XMLHttpRequest对象
request.open(method,url, true);
request.setRequestHeader('contentType','application/x-www-form-rulencoded');
for(var name in headers){
request.setRequestHeader(name, headers[name]);
}
//注册XMLHttpRequest 对象的readystatechange事件处理函数

request.onreadystatechange = function () {
if(request.readyState==1){
//当readystate 等于1时,表示请求开始,将当前XMLHttpRequst对象最为其参数调用onreadystatechange函数
onLoadingEventHandler(request);
}
if(request.readyState ==4){
//当readystate 等于4时,表示请求完成,onCompleteEventHandler函数
onCompleteEventHandler(request);
if(request.status && request.status >=200 && request.status<300){
//当HTTP 状态码大于200小于300时,表示请求成功,这时将当前XMLHttpRequest对象作为其参数调用onSuccessEventHandler函数
onSuccessEventHandler(request);
}else {
//否则表示请求失败,这时将当前XMLHttpRequest 对象作为其参数调用onFailureHandler函数
onFailureEventHandler(request);
}
}
};
request.send(parameters); //发送请求
}

猜你喜欢

转载自www.cnblogs.com/Alan2016/p/9045208.html