javascript AJAX请求如何发送_如何与服务器交换数据？

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);<br>url.searchParams.set('q', '前端');<br>fetch(url).then(...)

  登录后复制

用 fetch 发送 POST 请求（提交数据）

POST 常用于登录、表单提交、创建资源等操作，需设置请求头和请求体。

• 发送 JSON 数据时，必须设置 Content-Type: application/json：
  

  fetch('/api/login', {<br>  method: 'POST',<br>  headers: { 'Content-Type': 'application/json' },<br>  body: JSON.stringify({ username: 'admin', password: '123' })<br>})

  登录后复制

• 提交表单数据（如 FormData），不用设 headers，浏览器自动处理：
  

  const form = document.querySelector('#login-form');<br>fetch('/api/login', { method: 'POST', body: new FormData(form) })

  登录后复制

处理响应与错误（不能只靠 .catch）

fetch 只在网络失败时 reject，HTTP 状态码如 404、500 不会触发 catch，必须手动检查 response.ok 或 response.status。

标签： javascript word java js 前端 json ajax 浏览器 app ai win 状态码 表单提交