Ajax分析方法

这里还以之前的微博为例，我们知道下拉刷新的网页内容由 Ajax 加载而得，而且页面的链接没有发生变化，那么应该到哪里去查看这些 Ajax 请求呢？

分析案例

此处还需要借助浏览器的开发者工具，下面以 Chrome 浏览器为例来介绍。

首先，用 Chrome 浏览器打开微博链接 https://m.weibo.cn/u/2830678474 ，然后在页面中单击鼠标右键，从弹出的快捷菜单中选择 “检查” 选项，此时便会弹出开发者工具，如图 5-2 所示。

Figure 1. 图 5-2 开发者工具

前面也提到过，这里展示的就是页面加载过程中，浏览器与服务器之间发送请求和接收响应的所有记录。

事实上，Ajax 有其特殊的请求类型，叫作 xhr。在图 5-3 中，我们可以发现一个名称以 getIndex 开头的请求，其 Type 就为 xhr，意味着这就是一个 Ajax 请求。用鼠标单击这个请求，可以查看其详细信息。

从图 5-3 的右侧可以观察这个 Ajax 请求的 Request Headers、URL 和 Response Headers 等信息。其中 Request Headers 中有一个信息为 X-Requested-With:XMLHttpRequest，这就标记了此请求是 Ajax 请求，如图 5-4 所示。

Figure 2. 图 5-3 个 Ajax 请求的详细信息

图 5-4 X-Requested-With:XMLHttpRequest 标记

随后单击一下 Preview，就能看到响应的内容，如图 5-5 所示。这些内容是 JSON 格式的，这里 Chrome 为我们自动做了解析，单击左侧箭头即可展开和收起相应内容。

Figure 3. 图 5-5 响应的内容

经过观察可以发现，这里的返回结果是我的个人信息，如昵称、简介、头像等，这也是渲染个人主页所使用的数据。JavaScript 接收到这些数据之后，再执行相应的谊染方法，整个页面就谊染出来了。

另外，也可以切换到 Response 选项卡，从中观察真实的返回数据，如图 5-6 所示：

Figure 4. 图 5-6 真实的返回数据

接下来，切回第一个请求，观察一下它的 Response 是什么，如图 5-7 所示。

图5-7 第一个请求的 Response

这是最原始的链接 https:/m.weibo.cn/u/2830678474 返回的结果，其代码只有不到 50 行，结构也非常简单，只是执行了一些 JavaScript 语句。

所以说，微博页面呈现给我们的真实数据并不是最原始的页面返回的，而是执行 JavaScript 后再次向后台发送 Ajax 请求，浏览器拿到服务器返回的数据后进一步染得到的。

过滤请求

利用 Chrome 开发者工具的筛选功能能够筛选出所有 Ajax 请求。在请求的上方有一层筛选栏，直接单击 XHR，之后下方显示的所有请求便都是 Ajax 请求了，如图 5-8 所示。

Figure 5. 图 5-8 所有 Ajax 请求

接下来，不断向上滑动微博页面，可以看到页面底部有一条条新的微博被刷出，开发者工具下方也出现了一个个新的 Ajax 请求，这样我们就可以捕获所有的 Ajax 请求了。

随意点开其中一个条目，都可以清楚地看到其 RequestURL、RequestHeaders、ResponseHeaders ResponseBody 等内容，此时想要模拟 Ajax 请求的发送和数据的提取就非常简单了。

图 5-9 展示的内容便是我的某一页微博的列表信息。

Figure 6. 图 5-9 某一个 Ajax 请求的具体内容

到现在为止，我们已经可以得到 Ajax 请求的详细信息了，接下来只需要用程序模拟这些 Ajax 请求，就可以轻松提取我们所需的信息。