JavaScript如何与后端交互？AJAX基础教程

本文深入浅出地讲解了JavaScript与后端交互的核心技术——AJAX，重点对比了现代推荐的fetch API与兼容性更强的XMLHttpRequest，通过清晰的代码示例演示如何用GET获取数据、用POST提交JSON、正确处理响应状态码及解析数据，并强调真正关键的是理解异步机制、请求头设置、HTTP状态码判断和数据格式转换等底层逻辑，助你扎实掌握前后端通信的本质。

JavaScript 与后端交互最常用的方式就是 AJAX（Asynchronous JavaScript and XML），它允许网页在不刷新整个页面的情况下，向服务器发送请求并处理响应。虽然名字里有 XML，但现在更常用 JSON 格式传输数据。

什么是 AJAX？

AJAX 不是一种语言或框架，而是一种使用现有技术（主要是 XMLHttpRequest 或现代的 fetch API）实现异步通信的编程方式。核心特点是：请求发送后，JS 不会卡住等待结果，而是继续执行，等服务器返回后再触发回调或 Promise 处理。

用 fetch 发送 GET 请求（推荐）

fetch 是现代浏览器原生支持的、基于 Promise 的 API，语法简洁，是当前主流选择：

示例：获取用户列表

fetch('/api/users')
  .then(response => {
    if (!response.ok) throw new Error('网络响应失败');
    return response.json(); // 解析 JSON 数据
  })
  .then(data => console.log(data))
  .catch(err => console.error('请求出错：', err));

• 默认是 GET 请求，无需额外配置
• 注意检查 response.ok，因为 4xx/5xx 状态码不会自动 reject
• 必须手动调用 .json()、.text() 等方法解析响应体

用 fetch 发送 POST 请求（带数据）

向后端提交数据时，通常需要设置请求头和请求体：

示例：登录请求

const loginData = { username: 'admin', password: '123' };

fetch('/api/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(loginData)
})
.then(res => res.json())
.then(data => console.log('登录成功：', data))
.catch(err => console.error(err));

• method 显式指定为 'POST'
• headers 告诉后端你发的是 JSON 数据
• body 必须是字符串，所以要用 JSON.stringify()

用 XMLHttpRequest（兼容老浏览器）

如果需要支持 IE10 及更早版本，可用传统 XMLHttpRequest：

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/posts');
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      console.log(JSON.parse(xhr.responseText));
    } else {
      console.error('请求失败：', xhr.status);
    }
  }
};
xhr.send();

• open() 设置请求方式和地址
• onreadystatechange 监听状态变化，readyState === 4 表示请求完成
• 需手动解析 responseText（如果是 JSON）

基本上就这些。用 fetch 足够应付大多数场景，搭配 async/await 写法更清晰；XMLHttpRequest 更底层，适合特殊定制需求。关键不是选哪个 API，而是理解“异步”、“请求头”、“状态码”、“数据格式”这几个核心点。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~