javascript如何与后端交互_AJAX的基本用法是什么？-js教程-PHP中文网

javascript如何与后端交互_AJAX的基本用法是什么？

夢幻星辰

发布： 2025-12-18 15:34:02

原创

459人浏览过

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

javascript如何与后端交互_ajax的基本用法是什么？

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

什么是 AJAX？

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

用 fetch 发送 GET 请求（推荐）

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

示例：获取用户列表

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

家电小商城网站源码1.0

家电公司网站源码是一个以米拓为核心进行开发的家电商城网站模板，程序采用metinfo5.3.9 UTF8进行编码，软件包含完整栏目与数据。安装方法：解压上传到空间，访问域名进行安装，安装好后，到后台-安全与效率-数据备份还原，恢复好数据后到设置-基本信息和外观-电脑把网站名称什么的改为自己的即可。默认后台账号：admin 密码：132456注意：如本地测试中127.0.0.1无法正常使用，请换成l

查看详情

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();

登录后复制