JavaScript手录进阶01-跨域问题

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会自动转换）；
示例响应：

json 复制代码

{
  "status": "1", // 1表示成功，0表示失败
  "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错误处理）：

javascript 复制代码

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+）