JavaScript发送请求方式及AJAX教程

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《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学习网公众号吧！