javascriptAJAX是什么_如何使用fetch发送请求【教程】_技术教程

AJAX是一种通过JavaScript在不刷新页面前提下与服务器交换数据的技术模式；fetch是现代推荐实现方式，但默认不带Cookie、不自动处理4xx/5xx状态码，需手动检查response.ok、显式解析响应体并配置credentials等。

JavaScript 中的 AJAX 不是某个具体函数，而是一种通过 JavaScript 在不刷新页面的前提下与服务器交换数据的技术模式；fetch 是现代浏览器中实现这种模式的推荐方式，但它默认不带 Cookie、不自动处理 4xx/5xx 状态码，直接用容易出错。

什么是 AJAX？别被术语绕晕

AJAX 全称 Asynchronous JavaScript and XML，本质就是「用 JS 发 HTTP 请求 + 解析响应」。XML 早已不是重点，现在传 JSON 才是主流。关键在于：请求发出去后，页面不用跳转，JS 可以接着处理返回的数据。

过去靠 XMLHttpRequest 手写，现在更常用 fetch —— 它是原生 API、基于 Promise、语法更简洁，但行为更“严格”。

`fetch` 基础用法和必须注意的坑

fetch 默认只管发请求、收响应，不管状态是否成功。比如服务器返回 404 或 500，fetch 依然会进入 .then()，而不是 .catch()。

必须手动检查 response.ok（即 status 在 200–299 范围内）
必须显式调用 response.json() 或 response.text() 才能读取响应体，且只能调用一次
默认不发送 Cookie，需加 { credentials: 'include' } 才能携带认证信息
没有超时控制，需自己用 AbortController 实现

简单 GET 示例：

fetch('/api/user')
  .then(response => {
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return response.json();
  })
  .then(data => console.log(data))
  .catch(err => console.error('请求失败:', err));

POST 请求怎么传 JSON 数据？

发 JSON 到后端，核心就三点：设对 Content-Type、把 JS 对象转成字符串、用 body 字段传出去。

headers 必须包含 { 'Content-Type': 'application/json' }
body 必须是字符串，所以得用 JSON.stringify()
如果接口需要登录态，别忘了加 credentials: 'include'

示例：

fetch('/api/login', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  credentials: 'include',
  body: JSON.stringify({ username: 'admin', password: '123' })
})
.then(r => r.json())
.then(console.log);