Ajax无刷新分页核心是不跳转页面、动态替换内容、维护页码状态、合理处理加载与错误反馈；需后端提供带page/limit参数的JSON分页接口，前端用fetch请求并管理状态，DOM更新避免直接innerHTML赋值，同时处理请求锁定、空数据、错误重试及URL同步。
用 Ajax 实现无刷新分页，核心是：不跳转页面、动态替换内容、维护页码状态、合理处理加载与错误反馈。
1. 后端需提供分页接口
后端必须支持按页码（page）和每页条数（limit）返回结构化数据，通常返回 JSON 格式，例如：
{
"data": [...],
"total": 125,
"page": 2,
"limit": 10
}
确保接口可被跨域访问（开发时配 CORS，生产走同源或反向代理）。
2. 前端用 fetch 或 XMLHttpRequest 发起请求
推荐使用 fetch（现代、简洁），配合 async/await 管理异步流程。关键点：
立即学习“Java免费学习笔记（深入）”；
- 每次点击“下一页”或滚动到底部时，更新 currentPage 变量
- 请求前显示加载状态（如 loading 按钮/文字），避免重复点击
- 成功后解析 data 字段，追加或替换列表容器的 innerHTML
- 根据 total 和 limit 计算总页数，禁用超出范围的翻页按钮
3. DOM 更新与用户体验优化
不要直接 innerHTML = 新内容（会丢失焦点、重置滚动、清空表单状态），建议：
- 用 document.createElement + appendChild 追加新项（适合无限滚动）
- 用 innerHTML += ... 或 insertAdjacentHTML（简单场景可用）
- 翻页时平滑滚动到列表顶部：
listContainer.scrollIntoView({ behavior: 'smooth' }) - 给新加载的内容加轻微动画（如淡入），提升感知流畅度
4. 处理边界情况
真实项目中容易忽略但必须处理的细节：
- 请求中状态锁定：设置 isFetching = true，防止快速连点触发多次请求
- 空数据提示：data 数组为空时显示“暂无内容”，而非留白
- 错误重试机制：网络失败后提供“重新加载”按钮，或自动重试 1 次
-
URL 同步（可选）：用
history.pushState()更新地址栏页码，支持浏览器前进/后退
不复杂但容易忽略。把页码变量、请求逻辑、DOM 更新三块串起来，再补上加载态和错误反馈，就能稳定运行。
