JavaScript如何与后端交互？AJAX教程详解

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《JavaScript如何与后端交互？AJAX基础教程》，这篇文章主要讲到等等知识，如果你对文章相关的知识非常感兴趣或者正在自学，都可以关注我，我会持续更新相关文章！当然，有什么建议也欢迎在评论留言提出！一起学习！

AJAX是使用XMLHttpRequest或fetch API实现异步通信的编程方式，核心是不阻塞JS执行；fetch基于Promise，推荐用于GET/POST请求，需注意状态码判断和响应解析；XMLHttpRequest兼容旧浏览器，需手动处理状态与数据解析。

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学习网！更多关于文章的相关知识，也可关注golang学习网公众号。