JavaScript发送请求方式及AJAX教程

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《JavaScript发送请求方法及AJAX详解》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

AJAX是一种异步JavaScript技术，核心是后台发起HTTP请求并局部更新页面；现代实现方式包括Fetch API（推荐）、XMLHttpRequest（兼容性好）和Axios（功能增强）。

JavaScript 发送请求的核心方式就是 AJAX，它让网页能在不刷新页面的情况下与服务器交换数据。

什么是 AJAX

AJAX（Asynchronous JavaScript and XML）是一种开发技术，不是单一语法或 API。它的本质是：用 JavaScript 在后台悄悄发起 HTTP 请求，拿到响应后局部更新页面，用户无感。

虽然名字里有 XML，但现在最常用的数据格式其实是 JSON；“异步”才是关键——请求发出后，代码不会卡住等待结果，而是继续执行，等服务器返回了再通过回调或 Promise 处理数据。

现代 JavaScript 发送请求的三种主要方式

1. Fetch API（推荐，原生、简洁、基于 Promise）
替代传统 XMLHttpRequest 的现代标准，语法更清晰：

• 基本 GET 请求：fetch('/api/users') 返回一个 Promise，用 .then() 或 async/await 处理响应
• 带配置的 POST 请求：fetch('/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ user: 'a', pass: 'b' }) })
• 注意：fetch 默认不带 Cookie，需加 credentials: 'include' 才能发送凭据

2. XMLHttpRequest（XHR，兼容性最好，但写法较繁琐）
AJAX 的原始实现，所有浏览器都支持，适合需要精细控制或兼容老版本的场景：

• 创建实例：const xhr = new XMLHttpRequest()
• 配置并发送：xhr.open('GET', '/data.json'); xhr.send()
• 监听响应：xhr.onload = () => { if (xhr.status === 200) console.log(xhr.responseText) }

3. 第三方库（如 Axios）
封装了 fetch/XHR，提供更友好的 API 和内置功能（自动转换 JSON、请求/响应拦截、超时控制、取消请求等）：

• GET：axios.get('/api/posts')
• POST：axios.post('/login', { email, password })
• 统一错误处理、默认配置、CSRF 自动携带等，适合中大型项目

常见注意事项

• CORS（跨域）问题：浏览器会拦截非同源请求，需后端设置 Access-Control-Allow-Origin 等响应头
• 错误处理别只靠 catch：fetch 成功返回 Response 对象，但 404、500 仍算“成功”，需手动检查 response.ok 或 response.status
• 避免“裸奔”请求：生产环境建议统一封装请求函数，加入 loading 状态、错误提示、鉴权 token 注入等逻辑

一句话总结

AJAX 是一种思想，Fetch 是它的现代实现，XMLHttpRequest 是它的老前辈，Axios 是它的增强版助手——选哪个，看项目需求和兼容要求就行。

终于介绍完啦！小伙伴们，这篇关于《JavaScript发送请求方式及AJAX教程》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！