AJAX是实现无刷新数据交互的核心技术，通过XMLHttpRequest（XHR）或现代的fetch/axios库，在不重新加载页面的情况下与服务器交换数据。其核心价值是提升用户体验，避免页面整体刷新导致的交互中断。
跨域问题（浏览器同源策略限制）
跨域的本质
浏览器的同源策略（Same-Origin Policy）是安全机制，限制不同源（协议、域名、端口任一不同）的页面访问彼此的资源。例如：本地http://localhost:5500页面请求远程http://api.gaode.com/weather，因域名不同触发跨域限制。
跨域解决方案
| 解决方案 | 原理 | 优缺点 | 适用场景 |
|---|
| CORS（跨域资源共享） | 后端在响应头设置Access-Control-Allow-Origin，指定允许的源（如*表示允许所有，或具体域名http://localhost:5500） | 优点：支持GET/POST等所有请求方法，安全规范；缺点：需后端配合配置 | 生产环境首选，如高德地图API已开放CORS |
| JSONP | 利用script标签无同源限制的特性，通过动态创建script标签加载远程脚本，脚本执行时调用预设的回调函数传递数据 | 优点：无需后端复杂配置，兼容性好；缺点：仅支持GET请求，存在XSS风险 | 老项目兼容，或仅需GET请求的场景（如早期百度搜索接口） |
| 代理服务器 | 开发环境用webpack-dev-server的proxy，生产环境用Nginx反向代理，将跨域请求转发为同源请求（如本地/api/weather转发到http://api.gaode.com/weather） | 优点：前端无感知，无需修改代码；缺点：需配置代理服务 | 开发环境调试、生产环境隐藏真实接口地址 |
| postMessage | 跨窗口/iframe通信，通过window.postMessage(data, targetOrigin)发送数据，目标窗口监听message事件接收 | 优点：专门用于跨窗口通信；缺点：需双方约定数据格式，存在安全风险（需验证origin） | 多窗口、iframe间的数据交互 |
| WebSocket | 全双工通信协议（ws://或wss://），建立连接后不受同源限制，可实时双向传输数据 | 优点：实时性强，无请求次数限制；缺点：需后端支持WebSocket协议 | 实时聊天、实时数据更新（如股票行情） |
关键注意点
- 跨域限制仅存在于浏览器，服务器之间的请求（如Java后端调用高德API）无跨域问题；
- CORS的
Access-Control-Allow-Credentials: true表示允许携带Cookie，此时Access-Control-Allow-Origin不能设为*，需指定具体域名。
请求与响应的核心概念
请求方法（HTTP Method）
| 方法 | 作用 | 特点 | 示例场景 |
|---|
| GET | 获取资源 | 参数拼接在URL后（如?city=北京&key=xxx），有缓存，长度限制（约2KB） | 查询天气、列表分页 |
| POST | 提交资源 | 参数在请求体中（如JSON、表单数据），无缓存，无长度限制 | 用户登录、文件上传 |
| PUT | 更新资源（全量） | 幂等性（多次请求结果一致） | 完整更新用户信息（如修改姓名+年龄） |
| DELETE | 删除资源 | 幂等性 | 删除一条订单记录 |
响应状态码（HTTP Status Code）
| 状态码范围 | 含义 | 常见代码及场景 |
|---|
| 2xx（成功） | 请求正常处理 | 200 OK（成功）、204 No Content（成功但无响应体） |
| 3xx（重定向） | 需要进一步操作 | 301 永久重定向（域名迁移）、304 Not Modified（协商缓存命中，无需重新返回资源） |
| 4xx（客户端错误） | 请求存在问题 | 400 Bad Request（参数错误）、401 Unauthorized（未登录）、403 Forbidden（无权限）、404 Not Found（资源不存在） |
| 5xx（服务器错误） | 服务器处理失败 | 500 Internal Server Error（服务器代码错误）、503 Service Unavailable（服务器过载） |
数据查看方式
- 传统方式：
console.log
适合简单调试，需手动解析响应数据（如console.log(response.data)），但无法查看请求头、耗时等元信息。 - 推荐方式：浏览器开发者工具
Network面板
打开路径：F12 → Network，核心标签功能如下： - Headers：查看请求头（Request Headers）和响应头（Response Headers），如
User-Agent（客户端信息）、Content-Type（数据格式）； - Payload：查看请求参数（GET在
Query String Parameters，POST在Form Data或Request Payload）； - Response：查看原始响应数据（如JSON字符串、HTML）；
- Preview：格式化展示响应数据（如JSON自动转为树形结构，直观查看
forecasts数组中的天气信息）； - Timing：查看请求时间轴（DNS解析、TCP连接、等待响应等阶段耗时，用于性能优化）。
网络请求监控与性能优化
监控操作步骤
- 打开
Network面板，点击左上角「清空」按钮（🔄旁边的垃圾桶）清除历史请求； - 勾选「Preserve log」（保留日志），避免页面刷新丢失请求记录；
- 触发请求（如点击“查询天气”按钮），查看新增的请求条目；
- 筛选请求：通过顶部筛选栏（
XHR/Fetch、JS、CSS）快速定位接口请求。
关键监控指标
- 状态码：200表示成功，非200需排查（如404检查URL，500联系后端）；
- 请求大小：包括「Size」（响应体大小，如878B）和「Transferred」（实际传输大小，压缩后可能更小）；
- 耗时：「Time」列显示总耗时（如116ms），超过500ms需优化（如压缩资源、使用CDN）。
性能优化技巧
- 减少请求数：合并JS/CSS文件，使用雪碧图（Sprite）合并小图标；
- 利用缓存：通过
Cache-Control设置强缓存（如max-age=3600表示缓存1小时），或ETag/Last-Modified设置协商缓存； - 压缩资源：服务器开启Gzip/Brotli压缩（响应头
Content-Encoding: gzip），减少传输体积； - CDN加速：静态资源（JS、CSS、图片）部署到CDN，就近节点分发，降低延迟。
请求头与载荷
核心请求头解析
| 请求头字段 | 含义 | 示例 |
|---|
User-Agent | 客户端设备/浏览器信息 | Mozilla/5.0 (Windows NT 10.0; Win64; x64) Chrome/124.0.0.0 Safari/537.36 |
Content-Type | 请求体数据格式 | application/json（JSON格式）、multipart/form-data（文件上传）、application/x-www-form-urlencoded（表单默认格式） |
Cookie | 客户端存储的Cookie（如登录凭证） | token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9... |
Referer | 请求来源页面URL | http://localhost:5500/weather.html（防盗链常用） |
Authorization | 身份验证信息（如Bearer Token） | Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9... |
载荷（Payload）查看技巧
- GET请求：参数在
Query String Parameters中，直接查看键值对（如city=北京&key=123456）； - POST请求（JSON格式）：参数在
Request Payload中，需确保Content-Type: application/json，否则后端无法解析； - 文件上传：参数在
Form Data中，Content-Type: multipart/form-data，可查看文件名、文件大小等信息； - 调试技巧：若后端未收到参数，先检查
Content-Type是否与参数格式匹配，再对比Payload中的键名是否与接口文档一致。
响应数据查看与处理
常见响应数据格式
- JSON（主流）：轻量级数据交换格式，需用
JSON.parse()转为JS对象（现代库如axios会自动转换）；
示例响应：
{"status": "1", "count": "1","info": "OK","forecasts": [{ "date": "2024-05-20", "dayTemp": "25℃", "nightTemp": "11℃", "wind": "西南风≤3级" }]
}
- XML：早期格式，需用
DOMParser解析，现已被JSON取代； - HTML/Text：直接渲染或展示文本（如后端返回简单提示语“登录成功”）。
错误处理
- 网络错误：如断网，通过
XMLHttpRequest.onerror或fetch的catch捕获； - HTTP错误：如404/500，
fetch需通过response.ok判断（response.ok为true表示状态码2xx），axios会直接进入catch；
示例（fetch错误处理）：
fetch('http://api.gaode.com/weather?city=北京').then(response => {if (!response.ok) throw new Error(`HTTP错误：${response.status}`);return response.json();}).then(data => console.log('天气数据：', data)).catch(error => console.error('请求失败：', error));
AJAX在项目中的应用
- 用户认证：登录时POST提交用户名/密码，获取
token并存储到localStorage，后续请求通过Authorization头携带token； - 数据提交：表单提交（如注册、发表评论），用POST请求避免参数暴露在URL中；
- 实时更新：
- 轮询：定时（如30秒）请求接口更新数据（如公告列表）；
- 长轮询：后端持有请求，有新数据时才返回，减少无效请求（如简易聊天）；
- WebSocket：全双工通信，实时推送数据（如直播弹幕、实时订单状态）；
- 文件上传/下载：
- 上传：用
FormData对象携带文件，Content-Type: multipart/form-data； - 下载：通过
a标签href指向下载接口，或用blob对象处理二进制流（如导出Excel）。
主流AJAX库对比
| 库 | 特点 | 适用场景 |
|---|
| XMLHttpRequest | 原生API，需手动处理兼容和状态 | 理解AJAX原理，或极简单场景 |
| fetch | 原生API，Promise风格，无需引入库 | 现代浏览器，简单异步请求 |
| axios | 第三方库，支持Promise、拦截器、取消请求、自动转换JSON、请求重试 | 生产项目首选，兼容性好（支持IE8+） |
