如何用JavaScript发送AJAX请求_与服务器如何通信

fetch() 是现代浏览器发送 GET/POST 请求的首选，需注意错误处理、编码、CORS 和认证；兼容旧浏览器时仍需掌握 XMLhttpRequest。

用 fetch() 发送 GET 请求最简单也最常用

现代浏览器中，fetch() 是首选方案，语法简洁、基于 promise，不用引入额外库。它默认发送 GET 请求，适合获取数据（如用户列表、配置项）。

常见错误是忽略网络失败和 HTTP 错误状态的区分：网络异常（如断网）会 reject，但 404、500 这类响应码仍会 resolve，需手动检查 response.ok 或 response.status。

• 必须用 await response.json()（或 .text() 等）读取响应体，否则拿到的是 Response 对象，不是实际数据
• URL 中带中文或特殊字符时，先用 encodeURIComponent() 编码参数，避免 400 错误
• 不加 credentials: 'include' 时，跨域请求不会携带 cookie，登录态无法传递

const url = 'https://api.example.com/users?id=' + encodeURIComponent('张三'); try {   const response = await fetch(url, { credentials: 'include' });   if (!response.ok) throw new Error(`HTTP ${response.status}`);   const data = await response.json();   console.log(data); } catch (err) {   console.error('请求失败:', err.message); }

POST 提交 JSON 数据要设好 Content-Type 头

向服务器提交结构化数据（如表单、配置更新），通常用 POST + JSON。关键点不在方法本身，而在请求头和载荷格式是否匹配。

漏掉 headers 或写错值会导致后端解析失败——比如 express 默认不解析 text/plain，而 Django 可能直接返回 415 Unsupported Media Type。

立即学习“Java免费学习笔记（深入）”；

• Content-Type 必须是 'application/json'，不能是 'json' 或漏写
• 请求体必须是字符串，用 JSON.stringify() 转换对象，不能直接传对象字面量
• 如果后端接收 application/x-www-form-urlencoded，就得用 new URLSearchParams() 构造 body

const data = { name: '李四', email: 'lisi@example.com' }; const response = await fetch('/api/users', {   method: 'POST',   headers: { 'Content-Type': 'application/json' },   body: JSON.stringify(data) });

处理跨域（CORS）错误不能只靠前端改代码

看到浏览器控制台报 No 'access-Control-Allow-Origin' header，第一反应不该是“怎么让 fetch 跨过去”，而是确认服务端是否允许该源访问。

前端加 mode: 'cors'（fetch 默认值）或设置 credentials 都没用，除非服务端明确返回对应响应头。开发时临时绕过只能靠代理（如 webpack DevServer 的 proxy）或后端配 CORS 中间件。

• 本地开发时，chrome 启动参数加 --disable-web-security 属于危险操作，仅限调试，不可用于测试逻辑
• 若后端是 Express，用 cors 包比手写头更可靠：app.use(cors({ origin: 'http://localhost:3000' }))
• 请求带认证信息（Cookie / Authorization）时，后端 Access-Control-Allow-Origin 不能为 *，必须指定具体域名

需要兼容老浏览器？XMLHttpRequest 还得会写

尽管 fetch 已成主流，但部分企业内网系统仍要求支持 IE11 或旧版 edge。这时 XMLHttpRequest 不可替代，且它的上传进度监听、请求中止等能力在某些场景下比 fetch 更直接。

容易踩的坑是事件注册顺序和状态判断：必须在调用 xhr.open() 之后、xhr.send() 之前绑定 onload 和 onerror，否则可能错过回调；readyState === 4 仅表示请求完成，仍需检查 status 是否在 200–299 范围。

• 设置请求头要用 xhr.setRequestHeader()，且必须在 open() 之后、send() 之前
• 发送 JSON 时，send() 的参数同 fetch：需 JSON.stringify()，且手动设 Content-Type
• 取消请求用 xhr.abort()，而 fetch 需配合 AbortController

const xhr = new XMLHttpRequest(); xhr.open('POST', '/api/login'); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onload = function() {   if (xhr.status >= 200 && xhr.status < 300) {     console.log(JSON.parse(xhr.responseText));   } }; xhr.onerror = function() {   console.error('网络错误'); }; xhr.send(JSON.stringify({ user: 'admin', pass: '123' }));

实际项目里，真正卡住人的往往不是“怎么发请求”，而是搞不清响应格式（JSON？html？重定向？）、没处理好凭据传递时机、或者把跨域问题当成前端能单独解决的事。多看 Network 面板里的 Request/Response Headers，比反复改 JS 更有效。