JavaScript - 原生 Ajax 请求封装,支持自定义 headers、同步或异步执行等(附带详细代码注释及使用示例)
function createCORSRequest(method, url) {
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr) {
// 现代浏览器
xhr.open(method, url, true);
} else if (typeof XDomainRequest != "undefined") {
// IE8和IE9
xhr = new XDomainRequest();
xhr.open(method, url);
} else {
// 不支持CORS的浏览器
xhr = null;
}
return xhr;
}
function makeRequest(method, url, async, headers, onSuccess, onError) {
var xhr = createCORSRequest(method, url);
if (!xhr) {
throw new Error('CORS not supported');
}
if (async) {
xhr.onload = function() {
if (xhr.status === 200) {
onSuccess(xhr.responseText);
} else {
onError(xhr.statusText);
}
};
xhr.onerror = function() {
onError(xhr.statusText);
};
}
if (headers) {
Object.keys(headers).forEach(function(header) {
xhr.setRequestHeader(header, headers[header]);
});
}
if (async) {
xhr.send();
} else {
xhr.send();
if (xhr.status === 200) {
return xhr.responseText;
} else {
throw new Error(xhr.statusText);
}
}
}
// 使用示例
var url = 'https://api.example.com/data';
var headers = { 'Custom-Header': 'value' };
try {
var response = makeRequest('GET', url, false, headers);
console.log('同步请求结果:', response);
} catch (e) {
console.error('发生错误:', e);
}
makeRequest('GET', url, true, headers, function(response) {
console.log('异步请求结果:', response);
}, function(error) {
console.error('异步请求发生错误:', error);
});
这段代码定义了两个函数:createCORSRequest
用于创建跨域请求,makeRequest
用于发送请求并处理结果。makeRequest
函数支持自定义headers、同步和异步请求,并提供了成功和错误的回调函数。这是一个简洁的Ajax请求封装,适用于现代和旧版浏览器。
评论已关闭