JavaScript中AJAX核心是XMLHttpRequest或fetch()，推荐fetch：GET用fetch(url)并res.json()解析；POST需设headers和body；须手动检查res.ok处理HTTP错误；超时用AbortController；旧浏览器才用XMLHttpRequest。
JavaScript 中 AJAX 请求的核心是通过 XMLHttpRequest 或更现代的 fetch() API 向服务器发起异步 HTTP 请求，不刷新页面就能获取、提交数据。
用 fetch 发送 GET 请求（最常用）
fetch() 是当前推荐的方式，语法简洁，返回 Promise，天然支持 async/await。
基本 GET 请求只需传入 URL 字符串：fetch('/api/users') 响应需手动解析为 JSON（或其他格式）：fetch('/api/users').then(res => res.json()).then(data => console.log(data)) 带查询参数时，建议用 URL 构造：
const url = new URL('/api/search', window.location.origin);
url.searchParams.set('q', '前端');
fetch(url).then(...)
用 fetch 发送 POST 请求（提交数据）
POST 常用于登录、表单提交、创建资源等操作，需设置请求头和请求体。
发送 JSON 数据时，必须设置 Content-Type: application/json：
fetch('/api/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username: 'admin', password: '123' })
})
提交表单数据（如 FormData），不用设 headers，浏览器自动处理：
const form = document.querySelector('#login-form');
fetch('/api/login', { method: 'POST', body: new FormData(form) })
处理响应与错误（不能只靠 .catch）
fetch 只在网络失败时 reject，HTTP 状态码如 404、500 不会触发 catch，必须手动检查 response.ok 或 response.status。
立即学习“Java免费学习笔记（深入）”；
正确判断业务失败：
fetch('/api/user/123')
.then(res => {
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json();
})
.then(data => {...})
.catch(err => console.error('请求失败：', err))
超时控制需自己封装（fetch 本身不支持 timeout）：
可用 AbortController 实现 8 秒超时：
const controller = new AbortController();
setTimeout(() => controller.abort(), 8000);
fetch('/api/data', { signal: controller.signal })
兼容老浏览器？用 XMLHttpRequest（少用但要知道）
如果必须支持 IE11 等旧环境，才考虑 XMLHttpRequest。它更繁琐，但原理清晰。
基本流程：创建实例 → 配置 open() → 设置 onreadystatechange → 调用 send()：
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/posts');
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
console.log(JSON.parse(xhr.responseText));
}
}
}
xhr.send();
设置请求头（如 POST 提交 JSON）：xhr.setRequestHeader('Content-Type', 'application/json');
基本上就这些。核心记住三点：用 fetch 为主、手动判断 res.ok、JSON 数据记得 stringify 和设 header。不复杂但容易忽略细节。
以上就是javascript AJAX请求如何发送_如何与服务器交换数据？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1542683.html
微信扫一扫 
支付宝扫一扫 
