为何不使用Ajax的JavaScript应用会触发页面重载？

1. 不使用Ajax获取数据，页面一定会重载吗？ #

不是的，只有**传统的浏览器原生请求方式（比如表单提交、直接跳转链接）**才会触发页面重载。比如你写一个纯HTML表单，点击提交按钮后，浏览器会把请求发送到服务器，然后加载服务器返回的新页面（或刷新当前页面）：

<!-- 传统表单提交，点击后页面会重载 -->
<form action="/get-users" method="GET">
  <button type="submit">加载用户数据</button>
</form>

但如果是在JS里用同步XMLHttpRequest（非Ajax），本身不会触发页面重载，但会阻塞浏览器主线程，导致页面在请求期间完全无法响应任何交互，看起来像“假死”。

2. 同步请求为什么会和页面重载挂钩？ #

你混淆了两种场景：

• 早期的服务器端渲染：页面加载时同步从后端获取数据，这是服务器先组装好完整页面再返回给浏览器，用户看到的是直接加载完成的页面，不存在“重载”，因为页面还没渲染出来。
• 已加载完成的页面中发起同步请求：此时浏览器主线程被同步请求占用，所有UI渲染、用户交互都会暂停，直到请求完成。这种情况不会触发页面刷新，但会让页面暂时失去响应，和“重载”是完全不同的行为。

3. 为什么React里修改XMLHttpRequest的同步/异步参数没差异？ #

原因有这几点：

• React的更新机制：你是在componentDidMount里发起请求，不管同步还是异步，最终都是通过setState更新组件状态，React会局部更新DOM，不会触发整个页面的重载，所以页面表现上都是局部刷新用户列表。
• 同步请求的阻塞效果不明显：你测试的API响应速度太快，同步请求的阻塞时间极短，你感觉不到页面卡顿。可以用浏览器调试工具模拟慢网络（比如Chrome Network面板选择Slow 3G），再改成同步请求，就能看到页面在请求期间无法滚动、点击的情况。
• 浏览器的限制：现代浏览器已经禁止在主线程的某些场景下发起同步XMLHttpRequest（比如异步回调、组件生命周期钩子），可能你的同步请求实际上并没有被执行，或者被浏览器自动转为异步，所以你看不到差异。

另外补充：Ajax的核心就是异步请求+局部DOM更新，不管用fetch还是XMLHttpRequest（异步模式），本质都是Ajax。同步XMLHttpRequest不属于Ajax的范畴，而且因为会阻塞主线程，现在已经不推荐使用了。

内容的提问来源于stack exchange，提问作者elvis