前言
前台提交数据到后台,很平常的事情。但是很多情况下我们要用到静默提交或局部刷新,这就需要用到Ajax。笔者使用了很多的工具例如JQuery,在后面发现JQuery的体积太大,其实笔者只是需要提交数据到后台,就根据自己的需求简写了一个Ajax。
代码
Ajax = (function() {
this.options = {
timeout: 30000,
async: true,
dataType: "text"
};
var BaseRequest = function(ajax) {
var xhr = null;
/*var error = {
url: "Please check your url of params",
type: "Please check your type of params"
}*/
var
init = function() {
xhr = window.XMLHttpRequest ?
(function() {
return new window.XMLHttpRequest();
})() :
(function() {
try {
return new window.ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
console.log("Ajax - XMLHttpRequest cannot be used with the brower.");
}
})();
if(xhr) {
xhr.onreadystatechange = callback;
xhr.timeout = ajax.timeout ? ajax.timeout : options.timeout;
xhr.ontimeout = (ajax.timeout && typeof ajax.timeout === "function") ? ajax.timeout : null;
}
console.log("xhr init complete :", xhr);
},
execute = function() {
xhr.open(ajax.type,
ajax.url,
ajax.async ? ajax.async : options.async);
if(ajax.headers) {
var keys = Object.keys(ajax.headers);
for(var i = 0; i < keys.length; i++) {
xhr.setRequestHeader(keys[i], ajax.headers[keys[i]]);
}
}
if(ajax.type.toUpperCase() == "POST") {
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
} else if(ajax.type.toUpperCase() == "GET") {
ajax.data = null;
}
try {
xhr.send(ajax.data);
} catch(e) {
console.log("Ajax send error:" + e);
}
},
callback = function() {
switch(xhr.readyState) {
case 0:
break;
case 1:
if(ajax.beforeSend && typeof ajax.beforeSend === "function") {
ajax.beforeSend();
}
break;
case 2:
break;
case 3:
break;
case 4:
var message = xhr.responseText;
if(xhr.status === 200) {
if(ajax.success && typeof ajax.success === "function") {
ajax.success(message);
}
} else {
if(ajax.error && typeof ajax.error === "function") {
ajax.error(xhr);
}
}
if(ajax.complete && typeof ajax.complete === "function") {
ajax.complete(message);
}
break;
default: break;
}
};
return {
getField: function(field) {
return xhr[field];
},
auto: function() {
init();
execute();
}
}
};
return {
/* post、get、getJson Method的params template
var obj = {
url: ["http://...", "https://..."],
dataType: ["json", "text"]
data: data,
success: function() {},
error: function() {},
async: [true, false],
headers: {key1:"value1", key2:"value2", ……},
}
*/
post: function(ajax) {
ajax.type = "POST";
new BaseRequest(ajax).auto();
},
get: function(ajax) {
ajax.type = "GET";
new BaseRequest(ajax).auto();
},
configuration: this.options
}
})();
方法讲解
- 对外提供简易的get/post方式
POST: Ajax.post(param);
GET : Ajax.get(param);
- 参数格式为:参数根据需求实现,必须选择的为url,success等
param = {
url: "where you want",
data: "transfer to back end",
dataType: "which type you want data format",
timeout: "Integer, default is 3000ms",
headers: "http headers, {key1: value1, key2: value2, ……}",
type: "POST/GET",
success: function,
error: function
}
心得
- 使用XMLHttpRequest实现Ajax的请求,实现浏览器兼容;
- 实现简易的访问方式,如有其他的访问方式或者需求,请自定义方法;
- 并没有使用Promise来处理Success/Error的返回,因此可能仍需链式迭代;
- 可以根据需要实现option(全局定义),也可在每次的请求中自定义;
- 对于成功访问的定义为状态码返回200,状态码返回302并不是一个成功的请求,如有需要请自行更改。
- 第一次使用使用Markdown折腾了半天,我好笨#流泪