使用原生JS封装Ajax

使用原生 的JS封装 Ajax,实现 仿JQuery的Ajax,post,get三种异步请求方式:

var MAjax = {
//根据浏览器创建异步对象
createXhr: function () {
//经测试:IE7.0及以上版本的IE,两种异步创建的两种方式都支持
//如果XMLHttpRequest存在,则是IE7.0及其它内核,则直接创建异步对象(!==非全等于, === 全等于)
if (typeof XMLHttpRequest !== 'undefined') { //相当!(typeof XMLHttpRequest === 'undefined')
return new XMLHttpRequest();
}
//如果ActiveObject存在,是IE7.0或以下IE内核,判断其版本,并创建相应的异步对象
else if (typeof ActiveXObject !== 'undefined') {
//如果ActiveObject对象的参数类型不是string类型,则判断ie版本并创建异步对象
var versions = ['MSXML2.XMLHttp.6.0', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp'];
for (var i = 0, len = versions.length; i < len; i++) {
try {
//在此创建出错的话,就跳到catch中,否则执行下一句,返回创建成功的对象
var xhr = new ActiveXObject(versions[i]);
//给当前窗体对象添加一个属性用于判断 是否创建成功了
this.IsCreateOk = versions[i];
return xhr;
}
catch (e) { }
}
if (typeof this.IsCreateOk === 'undefined') {
alert("您的浏览器版本过低,无法创建异步对象,请升级您的浏览器!");
}
} }, //将请求参数编码后拼接成url参数:例 name=aa&age=11 传入参数:{name:aa,age:11}
encodeData: function (paramters) {
var data = [];
for (var name in paramters) {
//将数组中的数据以=拼接后再添加到data数组中 [name=aa,age=11]
var _regesp = /%20/g; //空格的正则表达式
var _value = paramters[name].toString(); //获取值
data.push(encodeURIComponent(name).replace(_regesp, '+') + "=" + encodeURIComponent(_value).replace(_regesp, '+'));
}
//以&将数组元素拼接后返回 如:name=aa&age=11
return data.join("&");
}, //根据响应头类型,获取相对应类型的数据
responseData: function (request) {
var responseType = request.getResponseHeader("Content-Type");
switch (responseType) {
case 'text/xml':
return request.responseXML;
case 'text/json':
case 'text/javascript':
case 'application/javascript':
case 'application/x-javascript':
return eval('(' + request.responseText + ')');
default:
return request.responseText;
}
}, //ajax请求
ajax: function (options) {
//method, url, data, success,failure, asyn
var fn = function () { };
options.method = options.method.toUpperCase();
options.url = options.url;
options.data = this.encodeData(options.data);
options.success = options.success || fn();
options.failure = options.failure || fn();
options.asyn = typeof (options.asyn) == 'undefined' ? true : options.asyn; var xhr = this.createXhr(); //注册回调函数(每当异步请求状态0-4改变的时候,就调用此函数)【一定要在Open之前注册】
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {//判断 请求是否完成,响应是否就绪
if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 300) {//判断返回的响应状态码
options.success(MSF.responseData(xhr), xhr.statusText);
} else {
options.failure(xhr.status, xhr.statusText);
}
}
} //判断请求类型,并发送请求和请求参数
switch (options.method) {
case 'POST':
xhr.open(options.method, options.url, options.asyn);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); //【在send之前设置请求头】
xhr.send(options.data);
break;
default:
options.url = options.url + '?' + options.data + '&d=' + Math.random(0, 99); //get请求,给url添加参数
xhr.open(options.method, options.url, options.asyn);
xhr.send(null);
break;
}
}, //get请求
get: function (url, data, callback) {
var fn = function () { };
callback = callback || fn();
this.url = url + '?' + this.encodeData(data) + '&d=' + Math.random(0, 99); //创建异步对象
var xhr = this.createXhr(); //注册回调函数(每当异步请求状态0-4改变的时候,就调用此函数)【一定要在Open之前注册】
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {//判断 请求是否完成,响应是否就绪
if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 300) {//判断返回的响应状态码
callback(MSF.responseData(xhr), xhr.statusText);
} else {
callback(xhr.status, xhr.statusText);
}
}
} //开始异步
xhr.open('GET', this.url, true);
xhr.send(null);
}, //post请求
post: function (url, data, callback) {
this.url = url + "?d=" + Math.random(0, 99);
callback = callback || function () { };
this.data = this.encodeData(data); var xhr = this.createXhr(); xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {//判断 请求是否完成,响应是否就绪
if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 300) {//判断返回的响应状态码
callback(MSF.responseData(xhr), xhr.statusText);
} else {
callback(xhr.status, xhr.statusText);
}
}
} xhr.open("POST", this.url, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(this.data);
}
};

使用实例:

//调用:
MAjax.ajax({
method: "get",
url: "GetPaht_Test.aspx",
data: { "name": "jack", "age": 15 },
success: function (data,state) { alert(data+"----"+state); },
failure: function () { alert("请求失败了") }
}); MAjax.get(
"GetPaht_Test.aspx",
{ "name": "jack", "age": 15 },
function (data, state) { alert(data + "----" + state) }
); MAjax.post(
"GetPaht_Test.aspx",
{ "name": "jack", "age": 15 },
function (data, state) { alert(data + "----" + state) }
);
上一篇:[AHOI2015 Junior] [Vijos P1943] 上学路上 【容斥+组合数】


下一篇:也发一个自己实现的android简单文件选择器代码。支持多卡,排序