当封装一个 AJAX 方法时，你可以使用原生的 JavaScript XMLHttpRequest 对象或者使用更现代的 fetch API。下面，我将为你提供一个使用 XMLHttpRequest 对象的简单 AJAX 封装示例，以及一个使用 fetch API 的示例。
使用 XMLHttpRequest 封装 AJAX 方法
function ajax(options) {
// 创建 XMLHttpRequest 对象
const xhr = new XMLHttpRequest();
// 设置请求方法和 URL
xhr.open(options.method, options.url, true);
// 如果提供了请求头，则设置它们
if (options.headers) {
for (const key in options.headers) {
xhr.setRequestHeader(key, options.headers[key]);
}
}
// 处理响应
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) {
// 请求成功，调用 success 回调
if (typeof options.success === 'function') {
options.success(xhr.responseText);
}
} else {
// 请求失败，调用 error 回调
if (typeof options.error === 'function') {
options.error(xhr.statusText);
}
}
};
// 发送请求，如果提供了数据则发送数据
if (options.data) {
xhr.send(options.data);
} else {
xhr.send();
}
}
// 使用示例：
ajax({
method: 'GET',
url: 'https://api.example.com/data',
headers: {
'Content-Type': 'application/json'
},
success: function(response) {
console.log('请求成功:', response);
},
error: function(error) {
console.log('请求失败:', error);
}
});
使用 fetch API 封装 AJAX 方法
如果你正在开发一个现代的前端应用，并且目标浏览器支持 fetch API，那么使用 fetch 会更加简洁和强大。
async function ajax(options) {
try {
// 发送 fetch 请求
const response = await fetch(options.url, {
method: options.method,
headers: options.headers,
body: options.data ? JSON.stringify(options.data) : null
});
// 检查响应状态
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
// 解析响应并返回数据
const data = await response.json();
if (typeof options.success === 'function') {
options.success(data);
}
} catch (error) {
// 处理请求错误
if (typeof options.error === 'function') {
options.error(error.message);
}
}
}
// 使用示例：
ajax({
method: 'GET',
url: 'https://api.example.com/data',
headers: {
'Content-Type': 'application/json'
},
success: function(data) {
console.log('请求成功:', data);
},
error: function(error) {
console.log('请求失败:', error);
}
});
请注意，在使用 fetch 时，默认情况下它不会抛出错误来响应 HTTP 错误状态（如 404 或 500）。因此，在上面的示例中，我们显式地检查了 response.ok 属性，并在必要时抛出了一个错误。