fetch 是基于 Promise 的现代 API，语法简洁，推荐用于新项目；2. AJAX（XMLHttpRequest）兼容性好但代码冗长，适合旧浏览器；3. fetch 需手动检查 response.ok 并解析 JSON，不因 HTTP 错误状态自动 reject；4. 两者均可实现 GET 和 POST 请求，但 fetch 支持 async/await 更易读；5. 中断请求方面，XMLHttpRequest 使用 abort()，fetch 需借助 AbortController；6. 实际开发中建议新项目用 fetch，兼容性需求可选 axios 或封装 XMLHttpRequest；7. 注意处理网络异常与业务错误区分，及安全凭据设置。
JavaScript发送HTTP请求是前端与后端交互的核心能力。现代开发中，常用的方法有 fetch 和传统的 AJAX（通常通过 XMLHttpRequest）。下面详细介绍它们的使用方式、区别和实际应用场景。
使用 fetch 发送 HTTP 请求
fetch 是现代浏览器提供的原生 API，基于 Promise，语法简洁，支持 async/await，推荐在新项目中使用。基本用法：
- fetch 默认发送 GET 请求，返回一个 Promise
- 需要手动调用 .json() 解析响应体
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('网络请求失败');
}
return response.json();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error('错误:', error);
});
示例：POST 请求提交数据
fetch('https://api.example.com/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: '张三',
age: 25
})
})
.then(response => response.json())
.then(data => {
console.log('提交成功:', data);
})
.catch(error => {
console.error('错误:', error);
});
注意：fetch 不会因 HTTP 状态码报错（如 404 或 500），需手动检查 response.ok。
使用 AJAX（XMLHttpRequest）发送请求
XMLHttpRequest 是较老的 API，兼容性好，适合需要支持旧浏览器的场景。基本流程：
立即学习“Java免费学习笔记（深入）”；
- 创建 XMLHttpRequest 实例
- 配置请求方式、URL 和回调函数
- 发送请求并处理响应
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
console.log(data);
}
};
xhr.send();
示例：POST 请求
const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/users', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 201) {
const data = JSON.parse(xhr.responseText);
console.log('创建成功:', data);
}
};
xhr.send(JSON.stringify({
name: '李四',
age: 30
}));
缺点：代码冗长，嵌套回调容易形成“回调地狱”，不如 fetch 直观。
fetch 与 AJAX 的对比
- fetch 基于 Promise，支持 async/await；XMLHttpRequest 是事件驱动
- fetch 语法更简洁，但默认不带 cookie，需设置 credentials: 'include'
- XMLHttpRequest 可以中断请求（abort），fetch 使用 AbortController 实现
- fetch 在老版本 IE 中不支持，需 polyfill
const controller = new AbortController();
fetch('/api/data', { signal: controller.signal })
.then(response => response.json())
.then(data => console.log(data));
// 需要时中断请求
controller.abort();
实际开发建议
- 新项目优先使用 fetch，结合 async/await 提升可读性
- 需要兼容低版本浏览器时，考虑使用 axios 或封装 XMLHttpRequest
- 处理错误时，注意区分网络异常和业务错误
- 发送敏感数据时，设置凭据和头部安全策略
