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，语法简洁，是当前主流选择：
示例：获取用户列表
立即学习“Java免费学习笔记（深入）”；
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，而是理解“异步”、“请求头”、“状态码”、“数据格式”这几个核心点。
以上就是javascript如何与后端交互_AJAX的基本用法是什么？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1543540.html
微信扫一扫 
支付宝扫一扫 
