实现ajax请求的核心方法有xmlhttprequest和fetch api两种。1. xmlhttprequest适用于需要兼容旧浏览器的场景，支持超时设置、进度监听和请求中止，但基于事件回调的写法较繁琐，易导致回调地狱；2. fetch api是现代标准，基于promise，语法简洁、可读性强，支持链式调用和流式处理，但需手动处理http错误状态，并通过abortcontroller实现请求中止。在现代开发中推荐优先使用fetch api，若需支持老旧浏览器则选用xmlhttprequest，两者均需妥善处理网络错误、超时及json解析异常以提升应用健壮性。
JavaScript 实现 AJAX 请求的核心在于不刷新整个页面就能与服务器交换数据。这通常通过两种方式完成：一种是老牌的
XMLHttpRequest对象，另一种是更现代、基于 Promise 的
Fetch API。它们都能让你异步地获取或发送数据，极大地提升用户体验。
解决方案：
在 JavaScript 中实现 AJAX 请求，主要有两种主流方式：
XMLHttpRequest和
Fetch API。
使用 XMLHttpRequest：
// GET 请求示例
function fetchDataWithXHR(url) {
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true); // true 表示异步
xhr.timeout = 5000; // 设置超时，5秒
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) {
try {
const data = JSON.parse(xhr.responseText);
console.log('GET 请求成功:', data);
// 这里可以处理返回的数据
} catch (e) {
console.error('解析 JSON 失败:', e);
}
} else {
console.error('GET 请求失败，状态码:', xhr.status);
}
};
xhr.onerror = function() {
console.error('网络错误或请求被阻止。');
};
xhr.ontimeout = function() {
console.error('请求超时。');
};
xhr.send();
}
// POST 请求示例
function postDataWithXHR(url, data) {
const xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'application/json'); // 通常发送 JSON 数据
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) {
try {
const response = JSON.parse(xhr.responseText);
console.log('POST 请求成功:', response);
} catch (e) {
console.error('解析 JSON 失败:', e);
}
} else {
console.error('POST 请求失败，状态码:', xhr.status);
}
};
xhr.onerror = function() {
console.error('网络错误或请求被阻止。');
};
xhr.send(JSON.stringify(data)); // 将数据转换为 JSON 字符串发送
}
// 示例调用 (假设有可用的 API 端点)
// fetchDataWithXHR('https://api.example.com/data');
// postDataWithXHR('https://api.example.com/submit', { name: 'Test', value: 123 });使用 Fetch API：
// GET 请求示例
function fetchDataWithFetch(url) {
fetch(url)
.then(response => {
if (!response.ok) { // 检查 HTTP 状态码是否在 200-299 范围内
throw new Error(`HTTP 错误！状态码: ${response.status}`);
}
return response.json(); // 解析 JSON 响应
})
.then(data => {
console.log('GET 请求成功:', data);
// 处理数据
})
.catch(error => {
console.error('GET 请求失败:', error);
// 处理网络错误、解析错误或 HTTP 错误
});
}
// POST 请求示例
function postDataWithFetch(url, data) {
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data) // 将数据转换为 JSON 字符串
})
.then(response => {
if (!response.ok) {
throw new Error(`HTTP 错误！状态码: ${response.status}`);
}
return response.json();
})
.then(responseJson => {
console.log('POST 请求成功:', responseJson);
})
.catch(error => {
console.error('POST 请求失败:', error);
});
}
// 示例调用 (假设有可用的 API 端点)
// fetchDataWithFetch('https://api.example.com/data');
// postDataWithFetch('https://api.example.com/submit', { name: 'Test', value: 123 });XMLHttpRequest 与 Fetch API，我该如何选择？
这确实是个让人纠结的问题，毕竟两个都能干活。坦白说，如果不是为了兼容那些老掉牙的浏览器（比如 IE11 甚至更早，尽管现在它们基本已经退出历史舞台了），我个人在新项目中几乎无脑选
Fetch API。
自从百度屏蔽淘宝客网站、淘宝抛弃淘宝客之后，个人站长集体陷入了恐慌之中。此时，什么值得买网的异军突起引起了广大个人站长的极大关注。做一个什么值得买一样的导购网站成了众多个人站长的一致心愿！ TP-COUPON 导购系统 即是让个人站长实现此心愿的绝佳选择！ 欢迎个人站长选用。V1.1版 更新记录：1.修正请求时查询淘宝店铺错误的bug2.删除一些无用的代码
XMLHttpRequest是老兵了，它诞生得很早，功能也确实强大。你可以用它控制请求的方方面面，比如设置各种事件监听器（
onload、
onerror、
onprogress等）、手动中止请求、设置超时等等。但它的缺点也很明显：基于事件回调的模式，写起来比较啰嗦，尤其当你需要连续发起多个请求时，很容易陷入“回调地狱”（Callback Hell），代码可读性直线下降，维护起来也让人头疼。虽然可以用 Promise 对它进行封装，但那又多了一层抽象。
Fetch API则是一个现代的、基于 Promise 的替代方案。它的设计理念更符合现代 JavaScript 异步编程的习惯。你看它的代码，是不是比
XMLHttpRequest清爽多了？
then().catch()的链式调用，让异步操作的流程变得非常清晰，错误处理也集中且优雅。
Fetch默认不发送 Cookie，需要额外配置
credentials选项，这在安全性上考虑得更周到。它还支持更高级的特性，比如流式处理响应（Stream API），对于大文件下载或者实时数据流处理非常有优势。当然，它也有一些“小脾气”，比如默认不抛出 HTTP 错误（例如 404 或 500），你得手动检查
response.ok属性；另外，它没有内置的请求中止机制，需要配合
AbortController来实现。
总的来说，如果你追求代码的简洁性、可读性，并且目标浏览器环境较新，
Fetch API绝对是首选。它让你的异步代码看起来更像同步代码，逻辑流更顺畅。但如果你的项目需要支持非常老的浏览器，或者需要一些
XMLHttpRequest特有的细粒度控制（虽然大部分
Fetch也能做到，只是方式不同），那么
XMLHttpRequest依然有它的用武之地。多数情况下，我会倾向于拥抱新标准。
处理异步请求中的常见错误与挑战
在实际开发中，异步请求远不是“发出去就完事”那么简单。各种意想不到的问题随时可能冒出来，让你的用户体验瞬间“崩塌”。理解并妥善处理这些错误和挑战，是构建健壮应用的关键。
一个最常见的场景就是网络错误。用户可能断网了，或者服务器宕机了，这时候请求根本就发不出去或者收不到响应。
XMLHttpRequest会触发
onerror事件
