AJAX异步通信主要用fetch和XMLHttpRequest，fetch基于Promise语法简洁，支持async/await，成为主流选择；XMLHttpRequest兼容性好但代码冗长。1. fetch发送GET请求：fetch(‘url’).then(res => res.json()).then(data => console.log(data))；2. 使用async/await更清晰：async function getData(){ const res = await fetch(‘url’); if(!res.ok) throw new Error(); const data = await res.json(); }；3. POST请求需设置method、headers和stringify的body；4. XMLHttpRequest需监听onreadystatechange，readyState为4且status为200时表示成功，需手动解析JSON；5. fetch默认不报错需检查response.ok，可用AbortController取消请求；6. 推荐优先使用fetch，复杂场景可选axios等库。
AJAX（Asynchronous JavaScript and XML）是前端开发中实现异步通信的核心技术，它允许我们在不刷新页面的情况下与服务器交换数据。在现代JavaScript中，发送AJAX请求主要有两种方式：传统的 XMLHttpRequest（常通过jQuery封装使用），以及更现代的 fetch API。下面详细介绍这两种方法的实际用法。
使用 fetch API 发送异步请求
fetch 是浏览器原生提供的API，基于 Promise，语法简洁，支持 async/await，已成为主流选择。
● 基本 GET 请求：
获取数据是最常见的操作。
示例：
fetch('https://api.example.com/data') .then(response => { if (!response.ok) { throw new Error('网络错误'); } return response.json(); }) .then(data => { console.log(data); }) .catch(error => { console.error('请求失败:', error); });
● 使用 async/await 写法更清晰：
async function getData() { try { const response = await fetch('https://api.example.com/data'); if (!response.ok) throw new Error('请求失败'); const data = await response.json(); console.log(data); } catch (error) { console.error('错误:', error); }}getData();
● 发送 POST 请求（提交数据）：
async function postData() { const response = await fetch('https://api.example.com/users', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ name: '张三', age: 25 }) }); if (!response.ok) throw new Error('提交失败'); const result = await response.json(); console.log(result);}postData();
● 常见配置项说明：method：请求方法，如 GET、POST、PUT、DELETE headers：设置请求头，特别是发送 JSON 数据时需指定 Content-Type body：POST 或 PUT 请求时携带的数据，必须是字符串（通常用 JSON.stringify）
传统 AJAX：XMLHttpRequest 基础用法
虽然 fetch 更现代，但了解 XMLHttpRequest 有助于理解底层机制。
● 简单 GET 请求示例：
const xhr = new XMLHttpRequest();xhr.open('GET', 'https://api.example.com/data', true);xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { const data = JSON.parse(xhr.responseText); console.log(data); }};xhr.send();
● POST 请求示例：
const xhr = new XMLHttpRequest();xhr.open('POST', 'https://api.example.com/users', true);xhr.setRequestHeader('Content-Type', 'application/json');xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 201) { console.log('创建成功'); }};xhr.send(JSON.stringify({ name: '李四', age: 30 }));
● 注意事项：readyState 为 4 表示请求完成 需手动解析 JSON（使用 JSON.parse） 错误处理较繁琐，不如 fetch 直观
fetch 与 XMLHttpRequest 的对比
两者都能实现异步请求，但存在明显差异：
fetch 返回 Promise，天然支持链式调用和 async/await fetch 默认不会报错（即使状态码是 4xx 或 5xx），需要手动检查 response.ok XMLHttpRequest 兼容性更好（IE 可用），但代码冗长 fetch 不支持取消请求（可用 AbortController 实现），而 xhr 可调用 abort()● 使用 AbortController 取消 fetch 请求：
const controller = new AbortController();fetch('/api/data', { signal: controller.signal }) .then(res => res.json()) .then(data => console.log(data));// 在需要时取消请求controller.abort();
基本上就这些。日常开发推荐优先使用 fetch API，结构清晰，易于维护。对于复杂场景或需要兼容老版本浏览器的项目，可考虑封装 xhr 或引入 axios 等第三方库。
以上就是JS AJAX请求怎么发送_JS AJAX异步请求与fetchAPI使用方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1535198.html
微信扫一扫 
支付宝扫一扫 
