阿贾克斯对比：一次改造复盘
阿贾克斯对比最有价值的看法，不是拿概念硬碰概念，而是看同一个页面改造前后差在哪。这里用一个商品库存后台的真实型场景复盘：从整页刷新到 Ajax 局部更新，速度、错误处理、开发成本都不一样。
第1步：先看旧页面的问题
这个案例是一个常见库存管理页：运营输入 SKU，点查询，页面整页刷新后显示库存；修改数量后再点保存，又刷新一次。功能能用，但体验很笨。运营一天查几百个 SKU，每次刷新都要重新等页面、重新定位输入框，时间就这么被吃掉。
旧方案的优点也不是没有：逻辑直，表单提交到后端，后端渲染 HTML，浏览器展示结果。对小系统很省心。但一旦操作频率高，整页刷新就开始拖后腿。
第2步：拿Ajax方案做对比
改造时没有重写整个系统，只把查询和保存两个动作换成阿贾克斯请求。页面打开后保持不动，用户输入 SKU，前端发请求拿库存 JSON，再把结果填进表格。保存时也只提交当前行的数据。
对比最明显的是等待感。原来每次都白屏或闪一下，现在只是按钮转圈、行内更新。用户不用重新找位置。代码层面也更清晰：后端接口只负责数据，页面模板不再夹着一堆状态判断。
第3步：补上容易忽略的细节
第一次上线前，测试发现一个问题：运营连续切换 SKU，慢请求后返回，反而覆盖了新结果。这个坑很典型，不是 Ajax 特有，但 Ajax 页面更容易遇到。解决办法是给每次查询打上请求序号，只接受最后一次请求的结果。
保存按钮也做了限制：请求中禁用按钮，成功后显示保存时间，失败时保留用户刚输入的数量，不清空表单。这个细节很重要，失败后让用户重新填，是最招骂的设计之一。
第4步：算一笔实际账
改造后单次查询从“刷新整页加重新定位”变成“局部等待”。如果一个人每天查 300 次，每次少浪费 2 秒，就是 10 分钟。一个5人运营组，一个月按22个工作日算，省出来的不是理论数字，而是接近18小时的重复等待。
但阿贾克斯对比旧表单也有成本：要写前端状态，要处理接口异常，要和后端约定 JSON 格式。低频页面未必值得改，高频操作页才是优先对象。
第5步：复盘最终选择
最后这个项目没有把所有表单都 Ajax 化，只改了查询、保存、校验这三个高频动作。导出报表仍然走普通下载链接，批量导入也保留传统表单加进度页。这个取舍很实际：Ajax适合局部交互，不适合把每个动作都包装成异步。
所以谈阿贾克斯对比，别只问它先进不先进。要问：这个动作频率高吗？用户会不会连续操作？失败后是否需要保留现场？答案越偏向“是”，Ajax 越值得上。
常见问题
- 阿贾克斯和普通表单提交最大的区别是什么？
- 普通表单通常刷新整页，Ajax可以只更新页面局部。前者简单稳定，后者交互更顺，但需要额外处理状态和异常。
- 阿贾克斯对比fetch有什么区别？
- Ajax是一类异步请求思路，fetch是浏览器提供的具体API。你可以用fetch实现Ajax，也可以用axios或jQuery实现。
- 所有后台页面都适合改成Ajax吗？
- 不适合。高频查询、即时校验、局部保存更适合；低频提交、文件下载、简单静态页没必要硬改。