jQuery Ajax 核心方法与工程实践：load、get、post、getJSON 深度解析

1. 为什么说 jQuery 的 Ajax 是前端开发者的“第一口热汤”

Ajax 这个词，现在听起来可能有点老派——毕竟 Fetch API 和 Axios 已经成了新项目的标配。但如果你翻过 2010 年前后的前端项目源码，或者接手过一批维护了十年以上的老系统，你会发现 jQuery 的 Ajax 方法不是“过时”，而是刻在骨子里的肌肉记忆。它不是教科书里抽象的概念，而是一套被成千上万开发者在真实业务中反复锤炼、踩坑、优化出来的最小可行交互范式。

我带过三届校招前端新人，第一周必做的一件事，就是让他们删掉所有现代框架，只用原生 JavaScript + jQuery 写一个城市选择器：点击省份，异步加载下级城市列表，支持搜索过滤，失败时显示友好提示。为什么？因为只有亲手写过new XMLHttpRequest()的 try-catch 嵌套、手动处理 IE6 的 ActiveXObject 兼容、调试过readyState === 4 && status === 200的边界条件，你才会真正理解 jQuery 的.load()、.get()、.post()到底省掉了多少行“防御性代码”。

这系列文章标题叫“AJAX快餐”，不是说它浅薄，而是强调它的即食性与确定性。就像一包泡面：水烧开，撕开包装，倒进去，三分钟，热汤入口。它不追求底层原理的炫技，也不鼓吹“必须手写 Promise 链才专业”，它解决的是最原始、最迫切的问题：让页面动起来，让用户等得不焦躁，让后端接口调得不崩溃。

核心关键词就三个：统一、降噪、可预测。

• “统一”是指团队里十个开发者写 Ajax，不会出现七种回调嵌套风格、五种错误处理逻辑、三种参数拼接方式；
• “降噪”是把创建请求对象、设置请求头、监听状态变化、解析响应体这些重复劳动封装成一行代码；
• “可预测”则是指无论 Chrome、Firefox 还是 IE8（对，当年真有），.get()返回的永远是XMLHttpRequest对象，回调函数签名永远是(data, textStatus, jqXHR)，失败时textStatus永远是"timeout"或"error"而不是浏览器私有字符串。

这不是技术退步，而是工程收敛。就像汽车工程师不会每次造车都从冶炼钢铁开始，jQuery 的 Ajax 就是那套已经验证过一万次的“标准底盘”。你不需要知道差速器齿轮比，但必须清楚油门踩下去，车会往前走——而且走得很稳。

所以，这篇文章不讲“jQuery Ajax 已死”，只讲“jQuery Ajax 怎么活”。它适合三类人：

• 正在维护老系统的开发者，需要快速定位.load()失败是缓存问题还是跨域问题；
• 想深入理解 Ajax 底层机制的学习者，通过 jQuery 的封装反向推导原生实现；
• 甚至包括刚转行的后端工程师，当你第一次看到$.post("/api/login", {user: "a", pwd: "b"})时，能立刻明白这行代码背后发生了什么，而不是被fetch()的then().catch()绕晕。

接下来的内容，没有一句空话。每一个方法、每一行代码、每一个注意事项，都来自我过去八年在电商后台、政府内网、教育 SaaS 等不同场景下的真实日志——包括那次因serialize()忘记加name属性导致登录接口始终收不到密码字段的凌晨三点排查，也包括为兼容某银行定制版 IE11 而重写的$.ajaxSetup()全局错误拦截器。我们直接开火。

2. 从原始 XMLHttpRequest 到 jQuery 封装：一场降维打击式的工程进化

2.1 原始 Ajax 的“手工作坊”时代

先看一段今天看起来像考古文物的代码：

function createXHR() { if (window.XMLHttpRequest) { return new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE6 及更早版本 try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { throw new Error("浏览器不支持 Ajax"); } } } } function loadCityData() { var xhr = createXHR(); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) { document.getElementById("cityList").innerHTML = xhr.responseText; } else { console.error("请求失败，状态码：" + xhr.status); } } }; xhr.open("GET", "/api/cities?province=beijing", true); xhr.send(null); }

这段代码在 2008 年是教科书级范例，但放在今天，它暴露了原始 Ajax 的四大硬伤：

1. 兼容性黑洞：ActiveXObject的两种写法（Msxml2.XMLHTTPvsMicrosoft.XMLHTTP）必须层层 try-catch，稍有遗漏，IE6 用户看到的就是白屏加报错弹窗；
2. 状态判断迷宫：readyState === 4只代表“传输完成”，不等于“成功”。你还得手动检查status是否在200-299或304范围，漏掉304 Not Modified就会导致缓存失效；
3. 参数拼接脆弱：URL 中的中文、特殊符号（如&、=）必须手动encodeURIComponent()，否则后端Request.QueryString解析直接出错；
4. 错误无处安放：网络超时、DNS 失败、SSL 证书错误……这些status无法捕获的异常，全靠onerror事件，而 IE8 及以下根本不支持。

我曾在一个政务系统中见过这样的“解决方案”：把整个createXHR()函数封装进一个叫AjaxHelper.js的文件，然后要求所有新员工入职第一周背诵这个文件。结果呢？外包团队来了三拨，每拨人都重写了一遍createXHR，最后项目里同时存在AjaxHelper.js、AjaxUtil.js、XhrFactory.js三个同功能文件，连ActiveXObject的初始化顺序都不一样。

2.2 jQuery 的封装哲学：用约定消灭配置

jQuery 的破局点，不是堆砌更多 API，而是用一套强约定，覆盖 95% 的使用场景。它的设计思想非常朴素：

“开发者最常做的三件事是什么？—— 加载 HTML 片段、获取 JSON 数据、提交表单。那就把这三件事做成‘一键操作’，剩下的 5%，交给.ajax()这个终极开关。”

于是有了load()、get()、post()、getJSON()这组“快捷键”。它们不是简单的语法糖，而是经过深思熟虑的职责划分：

关键在于，这些方法共享同一套底层引擎——jQuery.ajax()。你可以把load()理解为.ajax()的“预设模式”，就像相机的“人像模式”或“夜景模式”，它把光圈、快门、ISO 都调好了，你只需按快门。

举个最典型的对比：加载一个城市列表到<div id="cityList"></div>。

原始写法（含错误处理）：

function loadCities() { var xhr = createXHR(); xhr.timeout = 5000; // 手动设超时 xhr.ontimeout = function() { document.getElementById("cityList").innerHTML = "加载超时，请重试"; }; xhr.onerror = function() { document.getElementById("cityList").innerHTML = "网络错误，请检查连接"; }; xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { document.getElementById("cityList").innerHTML = xhr.responseText; } else if (xhr.status === 0) { // 状态码为0：常见于跨域、本地文件协议 document.getElementById("cityList").innerHTML = "请求被阻止"; } else { document.getElementById("cityList").innerHTML = "服务器错误：" + xhr.status; } } }; xhr.open("GET", "/api/cities?province=shanghai&" + Date.now(), true); xhr.send(); }

jQuery 写法：

$("#cityList").load("/api/cities", { province: "shanghai" }, function(response, status, xhr) { if (status === "error") { $(this).html("加载失败：" + xhr.status + " " + xhr.statusText); } });

差异在哪？

• 超时控制：jQuery 默认 0（不限时），但你可以在$.ajaxSetup({ timeout: 5000 })中全局设置，无需每个请求都写；
• 错误分类：status参数直接告诉你"success"、"error"、"timeout"、"notmodified"，不用自己解析statusText；
• 参数编码：{ province: "shanghai" }会被自动encodeURIComponent并拼接到 URL，中文、空格、&符号全部安全；
• DOM 插入：.load()的核心价值是“所见即所得”——响应 HTML 直接渲染，省去document.getElementById().innerHTML = ...的冗余步骤。

这不是偷懒，而是把开发者从“胶水代码”的泥潭里解放出来，专注业务逻辑。就像你不会因为汽车有自动挡就质疑驾驶员的技术，.load()也不是替代思考，而是让思考聚焦在“该加载什么”和“加载失败怎么办”，而不是“怎么创建请求对象”。

2.3 为什么.load()是新手的第一课，也是老手的压舱石

很多教程把.load()当作“简单方法”一带而过，这是巨大误解。.load()的精妙，在于它完美平衡了简洁性与可控性。

它的完整签名是：
$(selector).load(url, [data], [callback])

• url：可以是纯路径（/api/data），也可以是带选择器的路径（/api/data #content），后者意味着“只加载返回 HTML 中 ID 为 content 的元素”，这相当于内置了一个轻量级的querySelector；
• [data]：如果传对象，自动转为 POST；如果传字符串（如"a=1&b=2"），则作为查询参数追加到 URL 后；
• [callback]：回调函数中的this指向当前 jQuery 包装集，即$(selector)，避免了闭包中this指向丢失的经典陷阱。

我在线上系统中大量使用.load()的一个隐藏技巧：利用选择器做服务端渲染降级。
比如一个商品详情页，理想情况是前端 Ajax 加载，但如果用户禁用了 JavaScript，服务端会直接返回完整 HTML。这时，.load()的选择器语法就能无缝衔接：

<!-- 服务端渲染的完整页面 --> <div id="productDetail"> <h1>iPhone 15</h1> <p>价格：¥5999</p> <div class="specs">...</div> </div>

// 前端增强：只加载 specs 部分，其他内容保持不变 $("#productDetail .specs").load("/api/product/specs?id=123");

这样，无论 JS 是否执行，页面结构都是完整的，SEO 友好，无障碍访问也无压力。这种“渐进增强”思维，正是 jQuery Ajax 设计的底层基因。

提示：.load()的最大陷阱是浏览器缓存。GET 请求默认被缓存，连续点击按钮可能返回旧数据。解决方案不是加时间戳（+ "?t=" + Date.now()），而是用$.ajaxSetup({ cache: false })全局关闭，或在单个请求中设置$.ajax({ url: "...", cache: false })。加时间戳是野路子，容易污染 URL，且在某些 CDN 配置下反而失效。

3. 四大核心方法深度拆解：不只是 API 文档，更是避坑指南

3.1.load()—— DOM 注入的瑞士军刀

.load()表面看只是“把 HTML 塞进某个 div”，但它的能力远超想象。我们来拆解它在真实项目中的五种高阶用法。

场景一：动态加载并过滤内容（服务端不可控时）

假设后端接口/api/news返回一整页新闻列表 HTML，但你只需要其中的<ul class="news-list">部分：

// ✅ 正确：用选择器语法精准提取 $("#newsContainer").load("/api/news ul.news-list"); // ❌ 错误：试图在回调里用 jQuery 过滤（此时 HTML 已插入，可能触发脚本执行） $("#newsContainer").load("/api/news", function() { $("#newsContainer").find("ul.news-list").appendTo("#newsContainer"); });

原理很简单：jQuery 在内部会先用$.get()获取完整 HTML 字符串，再用$(htmlString).find(selector)提取目标节点，最后插入。整个过程在内存中完成，不触发 DOM 插入事件，安全高效。

场景二：POST 提交并加载响应（替代表单提交）

传统表单提交会刷新整个页面。用.load()可以实现“无刷新提交”：

<form id="searchForm"> <input type="text" name="q" placeholder="搜索商品..." /> <button type="submit">搜索</button> </form> <div id="searchResults"></div>

$("#searchForm").on("submit", function(e) { e.preventDefault(); // 阻止默认提交 var $form = $(this); $("#searchResults").load($form.attr("action"), $form.serialize()); });

这里serialize()自动收集所有name属性的表单字段，生成q=手机&category=electronics字符串，并作为 POST 数据发送。.load()检测到有数据参数，自动切换为 POST 方法。

场景三：错误处理的黄金组合

.load()的回调函数只在请求完成（无论成功失败）时触发，status参数告诉你结果。但有时你需要更细粒度的控制，比如超时重试：

function safeLoad(selector, url, data, callback) { var maxRetries = 3; var attempt = 0; function doLoad() { attempt++; $(selector).load(url, data, function(response, status, xhr) { if (status === "success") { if (callback) callback(response, status, xhr); } else if (status === "timeout" && attempt < maxRetries) { console.log("第 " + attempt + " 次超时，重试中..."); setTimeout(doLoad, 1000); // 1秒后重试 } else { $(selector).html("加载失败，请检查网络"); } }).fail(function(xhr, status, error) { // .fail() 是 jQuery 1.8+ 的链式错误处理 console.error("Ajax 失败：", status, error); }); } doLoad(); } // 使用 safeLoad("#userProfile", "/api/user/profile", { id: 123 });

场景四：加载脚本并执行（慎用！）

.load()也能加载<script>标签并执行，但这是双刃剑：

// ✅ 安全：加载纯 HTML 片段（不含 script） $("#widget").load("/widgets/weather.html"); // ⚠️ 危险：加载含 script 的 HTML，可能执行恶意代码 $("#widget").load("/widgets/ads.html"); // 如果 ads.html 包含 <script>alert(1)</script>，它会被执行！

解决方案：永远用$.getScript()加载 JS，用.load()只加载 HTML 结构。二者职责分明。

场景五：与事件委托配合（动态内容的事件绑定）

.load()加载的内容是动态插入的，直接绑定的事件会失效：

// ❌ 错误：事件绑定在加载前，对新内容无效 $("#newsContainer a").on("click", function() { /* ... */ }); // ✅ 正确：用事件委托，监听父容器 $("#newsContainer").on("click", "a", function() { /* ... */ });

这是 jQuery 事件系统的基础知识，但新手极易忽略。.load()让 DOM 动态化，事件委托就是它的天然搭档。

3.2$.get()与$.post()—— 数据获取与提交的基石

$.get()和$.post()是最常用的两个方法，它们的签名几乎一致：

$.get(url, [data], [success], [dataType]); $.post(url, [data], [success], [dataType]);

区别仅在于 HTTP 方法（GET vs POST）和默认dataType（$.get()默认"html"，$.post()默认"html"，但实践中$.post()更常配"json"）。

关键细节：data参数的双重身份

data参数既可以是对象，也可以是字符串，但行为截然不同：

// 方式1：传对象（推荐） $.get("/api/users", { page: 1, size: 10 }, function(data) { // data 是服务器返回的原始内容（可能是 HTML、JSON 字符串等） }); // 方式2：传字符串（需自行编码） $.get("/api/users?page=1&size=10", function(data) { /* ... */ }); // 方式3：混合使用（危险！） $.get("/api/users?page=1", { size: 10 }); // 结果：URL 变成 /api/users?page=1&size=10，但 ?page=1 中的 page 不会被 encodeURIComponent！

最佳实践：永远传对象。jQuery 会为你处理所有编码，包括中文、空格、特殊符号。传字符串是给自己挖坑。

dataType参数：告诉 jQuery “你收到的是什么”

dataType是$.get()/$.post()的灵魂参数，它决定了 jQuery 如何处理响应：

我遇到过最痛的坑：后端返回 JSON，但Content-Type错设为"text/plain"。jQuery 检测到类型不匹配，拒绝自动解析，data就是一串 JSON 字符串。typeof data === "string"，data.length > 0，但data.forEach报错。解决方案只有两个：

1. 后端修复Content-Type；
2. 前端强制指定dataType: "json"，jQuery 会忽略Content-Type，强行解析。

$.get("/api/config", function(data) { // data 是字符串，不是对象！ console.log(typeof data); // "string" }); $.get("/api/config", null, null, "json"); // 强制解析 // 或 $.ajax({ url: "/api/config", dataType: "json", success: function(data) { /* data 是对象 */ } });

3.3$.getJSON()—— JSON 数据获取的专用通道

$.getJSON()是$.get()的特化版本，等价于$.get(url, data, success, "json")。它的存在意义在于语义明确：看到这个方法，你就知道“我要拿 JSON，且信任后端返回的是合法 JSON”。

实战：处理 JSONP 跨域请求

在 CORS 普及前，JSONP 是唯一跨域方案。$.getJSON()对 JSONP 有原生支持：

// 传统 JSONP：需手动定义回调函数 function handleWeather(data) { $("#weather").html("温度：" + data.temp); } // 然后在 URL 中指定 callback=handleWeather // jQuery 写法：用 ? 代替函数名，jQuery 自动处理 $.getJSON("https://api.weather.com/v1/forecast?city=beijing&callback=?", function(data) { $("#weather").html("温度：" + data.temp); });

jQuery 会自动生成一个唯一函数名（如jQuery1234567890123456789_1234567890123），将其注入全局作用域，并在 URL 中替换?。请求完成后，服务器返回jQuery1234567890123456789_1234567890123({...})，浏览器执行该函数，触发你的回调。

注意：JSONP 只支持 GET，不支持 POST；且无法捕获网络错误（<script>标签加载失败无事件），只能靠超时。

serializeArray()与$.toJSON()：表单数据的 JSON 化流水线

serializeArray()是处理表单的神器，但它返回的是数组，不是字符串：

// 表单：<form><input name="user" value="zhang"/><input name="age" value="25"/></form> var arr = $("form").serializeArray(); // arr = [{name: "user", value: "zhang"}, {name: "age", value: "25"}]

要发给后端 JSON 接口，需转换为对象再序列化：

// 步骤1：数组转对象 var obj = {}; $.each(arr, function(i, field) { obj[field.name] = field.value; }); // obj = {user: "zhang", age: "25"} // 步骤2：对象转 JSON 字符串（需 jquery.json 插件） var jsonStr = $.toJSON(obj); // 步骤3：发送 $.post("/api/user", jsonStr, function(res) { /* ... */ }, "json");

现代项目中，更推荐用原生JSON.stringify()替代$.toJSON()，但serializeArray()本身仍是 jQuery 不可替代的利器。

3.4$.ajax()—— 全能引擎与终极控制权

当所有快捷方法都无法满足需求时，$.ajax()就是你的核武器。它的参数对象options是 jQuery Ajax 的完整说明书。

核心参数详解（基于 jQuery 1.12.4，兼容 IE6+）

高阶技巧：用beforeSend拦截请求

beforeSend是一个钩子函数，在请求发送前执行，可修改jqXHR对象：

$.ajax({ url: "/api/upload", type: "POST", data: formData, // FormData 对象 processData: false, // 不处理数据 contentType: false, // 不设置 contentType，让浏览器自动设 beforeSend: function(xhr) { // 添加自定义请求头（如 token） xhr.setRequestHeader("Authorization", "Bearer " + getToken()); // 显示 loading $("#uploadBtn").prop("disabled", true).text("上传中..."); }, success: function(res) { alert("上传成功！"); }, complete: function() { // 无论成功失败都执行 $("#uploadBtn").prop("disabled", false).text("上传文件"); } });

complete是另一个重要钩子，常用于清理 UI 状态。

全局配置：$.ajaxSetup()的双刃剑

$.ajaxSetup()设置全局默认值，威力巨大，但也极易引发意外：

// ❌ 危险：全局设 POST，可能导致所有 get() 失败 $.ajaxSetup({ type: "POST" }); // ✅ 安全：只设通用项 $.ajaxSetup({ timeout: 10000, cache: false, headers: { "X-Requested-With": "XMLHttpRequest" } });

强烈建议：只用$.ajaxSetup()设置timeout、cache、headers等不影响业务逻辑的参数。type、url、data等必须在每个请求中显式指定。

4. 全局 Ajax 事件与辅助函数：让异步变得可感知、可管理

4.1 全局 Ajax 事件：给异步世界装上仪表盘

jQuery 的全局 Ajax 事件不是锦上添花，而是监控异步请求生命周期的基础设施。它们在$.ajax()内部被触发，只要global: true（默认），就会冒泡到document。

事件触发顺序与典型应用

假设你发起一个$.get("/api/data")请求，事件触发顺序如下：

1. ajaxStart：第一个 Ajax 请求开始时触发（可用于显示全局 loading）
2. ajaxSend：每个请求发送前触发（可用于添加 token、记录日志）
3. ajaxSuccess或ajaxError：请求成功或失败时触发（可用于埋点统计）
4. ajaxComplete：每个请求完成时触发（无论成功失败，可用于隐藏 loading）
5. ajaxStop：最后一个 Ajax 请求完成时触发（可用于刷新汇总数据）

// 全局 loading 控制（经典用法） $(document).ajaxStart(function() { $("#globalLoading").show(); }).ajaxStop(function() { $("#globalLoading").hide(); }); // 请求日志（开发环境） $(document).ajaxSend(function(event, xhr, settings) { console.log("Ajax 发送：", settings.type, settings.url); }).ajaxComplete(function(event, xhr, settings) { console.log("Ajax 完成：", settings.url, "状态：", xhr.status); }); // 统一错误处理 $(document).ajaxError(function(event, xhr, settings, thrownError) { if (xhr.status === 0) { alert("网络连接失败，请检查网络"); } else if (xhr.status === 401) { window.location.href = "/login"; } else { alert("请求失败：" + xhr.status + " " + thrownError); } });

注意：ajaxStart/ajaxStop是基于“请求数量”的。如果同时发起 5 个请求，ajaxStart只触发一次（第一个开始时），ajaxStop也只触发一次（最后一个结束时）。而ajaxSend/ajaxComplete每个请求都会触发。

global: false的妙用：隔离关键请求

有些请求你不希望触发全局事件，比如轮询心跳、上报错误日志：

// 心跳请求，不干扰用户界面的 loading 状态 $.ajax({ url: "/api/heartbeat", global: false, // 关键！禁用全局事件 success: function() { setTimeout(heartbeat, 30000); } });

这样，心跳请求的ajaxSend不会触发全局 loading，ajaxError也不会弹出错误框，真正做到“静默运行”。

4.2 辅助函数深度实战：serialize()与serializeArray()的艺术

serialize()：表单提交的终极简化

serialize()的规则极其简单：只序列化有name属性的、未被禁用的、非reset/button类型的表单控件。

<form id="userForm"> <input name="username" value="zhang" /> <input name="email" value="z@163.com" /> <select name="role"> <option value="admin">管理员</option> <option value="user" selected>普通用户</option> </select> <input type="checkbox" name="agree" value="1" checked /> <input type="radio" name="gender" value="m" />男 <input type="radio" name="gender" value="f" checked />女 <input type="file" name="avatar" /> <!-- 文件输入不被序列化 --> <input type="button" value="取消" /> <!-- button 类型不被序列化 --> </form>

$("#userForm").serialize()返回：
"username=zhang&email=z%40163.com&role=user&agree=1&gender=f"

避坑指南：

• ✅name属性是必须的，没有name的字段永远不会被提交；
• ✅value属性决定提交值，<input value="">提交空字符串，<input>（无 value）提交undefined；
• ❌<input type="file">不被序列化，需用FormData；
• ❌<textarea>的内容是其value属性，不是 innerHTML。

serializeArray()：结构化数据的起点

serializeArray()返回一个对象数组，每个对象有name和value属性：

var arr = $("#userForm").serializeArray(); // [ // {name: "username", value: "zhang"}, // {name: "email", value: "z@163.com"}, // {name: "role", value: "user"}, // {name: "agree", value: "1"}, // {name: "gender", value: "f"} // ]

这个数组是构建复杂数据结构的基石。例如，将多选框的多个值合并为一个数组：

// 表单中有多个 name="hobby" 的 checkbox // <input type="checkbox" name="hobby" value="reading" checked /> // <input type="checkbox" name="hobby" value="swimming" /> // <input type="checkbox" name="hobby" value="coding" checked /> var arr = $("#userForm").serializeArray(); // [{name: "hobby", value: "reading"}, {name: "hobby", value: "coding"}] // 转为对象：{hobby: ["reading", "coding"]} var obj = {}; $.each(arr, function(i, field) { if (obj[field.name]) { if (!$.isArray(obj[field.name])) { obj[field.name] = [obj[field.name]]; } obj[field.name].push(field.value); } else { obj[field.name] = field.value; } });

这就是serializeArray()的真正价值：它不提供最终答案，而是给你一个干净、规范的中间数据结构，让你自由发挥。

5. 真实战场复盘：那些年我们一起踩过的 jQuery Ajax 坑

5.1 缓存之坑：你以为的“新鲜数据”，其实是浏览器的“陈年库存”

现象：.load()或$.get()连续调用，返回的总是第一次的结果，F5 刷新才更新。

根因：GET 请求被浏览器或代理服务器缓存。jQuery 默认对 GET 启用缓存，$.ajaxSetup({ cache: true })。

解决方案：

• 全局方案（推荐）：$.ajaxSetup({ cache: false })。jQuery 会在所有 GET 请求 URL 后自动添加_=1234567890123时间戳参数。
• 局部方案：在单个请求中设置cache: false。
• 手动方案（不推荐）：url + "?_=" + Date.now()，但污染 URL，且在某些 CDN 配置下可能被忽略。

血泪教训：我在一个股票行情系统中，因忘记关缓存，导致用户看到的股价是 5 分钟前的。上线