如果只是想单独封装js实现ajax异步交互,而不想使用整个jquery框架的话,请看下面代码:
/**
* [ajax description] 异步交互
* @param {[type]} obj [description]
* @return {[type]} [description]
*/
var $win = window;
var ajax = function(obj) {
if (!obj || typeof obj !== 'object') {
return;
}
var _jsonToUrlParams = function(obj) {
var str = '';
for (var key in obj) {
str += key + '=' + obj[key] + '&';
}
return str.substring(0, str.length - 1);
};
var type = obj.type ? obj.type : 'GET',
url = obj.url ? obj.url : '',
async = true,
data = obj.data ? _jsonToUrlParams(obj.data) : null,
headers = obj.headers ? (typeof obj.headers === 'object' ? obj.headers : null) : null,
success = obj.success ? (typeof obj.success === 'function' ? obj.success : null) : null,
error = obj.error ? (typeof obj.error === 'function' ? obj.error : null) : null;
if (!url) {
return;
}
if (type === 'GET' && data) {
url = url.indexOf('?') > -1 ? url + '&' + data : url + '?' + data;
data = null;
}
var _XHR = null;
if ($win.XMLHttpRequest) {
_XHR = new XMLHttpRequest();
} else {
_XHR = new ActiveXObject("Microsoft.XMLHTTP");
}
_XHR.onreadystatechange = function() {
if (_XHR.readyState == 4 && _XHR.status == 200) {
if (success) {
success(!!_XHR.responseText ? JSON.parse(_XHR.responseText) : null);
}
}
if (_XHR.readyState == 4 && _XHR.status != 200) {
if (error) {
error(_XHR);
}
}
};
_XHR.open(type, url, async);
var send_header_content_type = false;
if (headers) {
for (var key in headers) {
_XHR.setRequestHeader(String(key), String(headers[key]));
if(key == "Content-Type")
send_header_content_type = true;
}
}
if(!send_header_content_type && type == "POST")
_XHR.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
_XHR.send(data);
};
这段代码把整个 XMLHttpRequest 请求处理封装为ajax函数,直接调用就很方便了,调用方法如下:跟jquery的ajax调用是一样的
ajax({
type: "GET", // 类型,POST || GET 默认GET
url: "http://**/*", //请求地址
data: "", //发送的数据
success: function(data) { //请求成功后做相应的处理
console.log(data);
},
error: function(err) { //请求失败后做相应的处理
console.log(err);
},
});