浏览器不刷新页面情况下异步获取数据ajax

Posted on Views:

Ajax（Asynchronous JavaScript and XML）本质上是浏览器在不刷新页面的情况下，通过异步HTTP请求向后端获取数据的机制。

在爬虫、安全测试、前后端调试、接口逆向中，Ajax 数据获取是高频场景，尤其在：

  • 分页列表
  • 无限下拉加载（scroll loading）
  • 搜索联想
  • 商品详情动态加载
  • 用户行为触发接口（点击、切换Tab）
  • SPA（Vue / React / Angular）单页应用

中非常常见。

核心目标是：

找到真正返回数据的接口（API），直接请求接口，而不是解析HTML页面。

1.Ajax工作原理

1.1 页面加载流程

传统页面：

1
浏览器 → 请求HTML → 服务端返回完整HTML → 浏览器渲染

Ajax页面：

1
2
3
4
5
6
7
8
9
浏览器 → 请求HTML骨架
        ↓
JavaScript执行(.js)
        ↓
异步请求API接口
        ↓
服务端返回JSON/XML数据
        ↓
JS动态渲染DOM

所以：

真正有价值的数据，往往不在HTML源码里，而在XHR / Fetch请求里。

2.如何发现Ajax接口

2.1 浏览器开发者工具（最核心）

打开：

1
F12 → Network → XHR / Fetch

重点关注：

  • 请求URL
  • Request Method（GET/POST）
  • Query Params
  • Form Data
  • Request Headers
  • Cookie
  • Authorization
  • Response JSON