原生javascript封装ajax插件和使用详解
日期：2015-09-25
作者：漫画之迷
//config是一个json格式的参数，如：{url: url,data: data,async: false}
var ajax = function (config) {
var xhr = new XMLHttpRequest(),
url = config.url,
method = config.method || 'get',
async = typeof config.async !== 'undefined' ? false : true,
data = config.data,
success = config.success;
if (async && success) {
xhr.addEventListener('readystatechange', function () {
if (xhr.readyState === 4 && xhr.status === 200) {
success(xhr.responseText);
}
});
}
if (method === 'get') {
url = url + (data ? '?' + data : '');
data = null;
}
xhr.open(method, url, async);
if (method === 'post') {
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
}
xhr.send(data);
if (!async) {
return xhr.responseText;
}
}
//使用方式1：直接返回值形式，关键要设置async: false
var res = ajax({
url: url,
data: 'url=' + encodeURIComponent(location.href),
async: false
});
//如果res是文本类型就直接使用
resObj = res;
//如果res是json格式的字符串则需要转换
resObj = JSON.parse(res);
//使用方法2：callback方法返回值形式
var getData = function (callback) {
ajax({
url: url,
success: function (res) {
callback(JSON.parse(res));
}
});
}
如果您觉得本文的内容对您的学习有所帮助：
关键字：
javascript ajax XMLHttpRequest setRequestHeader responseText readystatechange async JSON callback