原生 AJAX 的结果
尚未查询
点上面的「用原生 AJAX 查询」按钮
…，接口在
… / …，
属于 跨域（CORS）。两个接口都以
POST + JSON 方式调用，浏览器会先发一个
OPTIONS 预检，确认源站允许之后才发出真正的查询请求。
两个按钮打的是不同的接口，返回的也是不同的班次数据 —— 点完之后对比左右两块面板，就能看出结果分别来自谁。
fetch 的结果
尚未查询
点上面的「用 fetch 查询」按钮
这个 demo 在演示什么
- 两种写法的差异：XHR 的四步范式（
new → open → 回调 → send， 请求头还要单独setRequestHeader）与 fetch 的await fetch(url, init) → 检查 res.ok → await res.json()——方法、头、请求体在 fetch 里收在一个init对象里，一次给全。 两者耗时几乎相同，差别在代码组织方式与错误处理。 - HTTP 错误不算失败：XHR 里 4xx/5xx 仍会走
onload， 必须自己判xhr.status；fetch 里同样必须自己判res.ok。 - 跨域（CORS）与预检：页面与接口不同域，响应必须带
Access-Control-Allow-Origin。又因为请求是POST且带Content-Type: application/json（不在 CORS 安全清单里），浏览器会先发 OPTIONS 预检， 源站必须回Allow-Methods: POST与Allow-Headers: Content-Type，否则真正的请求根本不会发出。 打开开发者工具的网络面板，每次点击都能看到 OPTIONS + POST 两条记录。 - 参数在请求体里：查询条件放在 JSON body 而非 URL 上， 所以地址栏、access log 里都看不到 from/to。 源站也是因此改用 OpenResty 的 Lua 解析 body （nginx 内置指令只能读 query string）。
- 不缓存：两个接口都下发
Cache-Control: no-store， 保证每次点按钮都真实回源，便于观察链路。 - mock 数据是静态的：按航线命中不同 JSON 文件
（路由表在
conf/lua/mock_dispatch.lua）， 未配置的航线走default.json兜底。 日期只用于页面展示，不影响返回结果。
试试点「广州 → 成都」或「深圳 → 杭州」，能看到 mock 里另外两套班次； 用别的城市组合则会命中 default 兜底（面板上会标出来）。