AJAX 快速上手指南
AJAX（Asynchronous JavaScript and XML）是异步 JavaScript 和 XML 的缩写，核心是在不刷新整个页面的情况下，与服务器交换数据并更新部分页面内容，是前端实现无刷新交互的核心技术。本文涵盖 AJAX 原生实现、jQuery 封装、Axios 用法及实战示例，零基础也能快速上手。
一、AJAX 核心原理
AJAX 本质是通过浏览器内置的 XMLHttpRequest（XHR）对象，异步向服务器发送请求、接收响应，核心流程：
创建 XHR 对象；
配置请求（方法、URL、是否异步）；
监听响应状态变化；
发送请求；
处理服务器返回的数据。
二、原生 JavaScript 实现 AJAX（基础版）
无需任何框架，直接使用原生 JS 即可实现，复制以下代码即可运行：
html
预览
<!DOCTYPE html>
核心说明：
readyState 状态：0（未初始化）→1（已打开）→2（已发送）→3（接收中）→4（完成）；
status 状态码：200（成功）、404（资源不存在）、500（服务器错误）；
GET 请求：参数拼接在 URL 后，适合查询数据；
POST 请求：参数放在请求体，适合提交 / 修改数据，需设置 Content-Type。
三、jQuery 封装 AJAX（简化版）
jQuery 封装了原生 XHR，语法更简洁，复制以下代码即可使用：
html
预览
<!DOCTYPE html>
常用 jQuery AJAX 方法：
$.get(url, [data], [success], [dataType])：GET 请求；
$.post(url, [data], [success], [dataType])：POST 请求；
$.ajax(options)：通用方法，支持更多配置（超时、请求头、跨域等）。
四、Axios 实现 AJAX（现代主流版）
Axios 是基于 Promise 的 HTTP 库，支持浏览器和 Node.js，语法优雅、功能丰富，复制以下代码即可使用：
html
预览
<!DOCTYPE html>
Axios 核心优势：
支持 Promise，可配合 async/await 解决回调地狱；
内置请求 / 响应拦截器，方便统一处理（如添加 token、统一错误处理）；
支持取消请求、批量请求、自动转换 JSON 数据；
兼容浏览器和 Node.js 环境。
五、AJAX 实战：完整交互示例
以下示例整合 Axios + 加载状态 + 错误处理，可直接复制到博客使用：
html
预览
<!DOCTYPE html>
AJAX 数据请求示例
六、AJAX 常见问题与解决方案
- 跨域问题（最常见）
AJAX 默认遵循「同源策略」（协议、域名、端口一致），跨域请求会报错，解决方案：
后端配置 CORS（推荐）：服务器返回 Access-Control-Allow-Origin 响应头；
JSONP（仅支持 GET）：利用
