爬虫之Ajax分析方法

一 查看请求

1 Chrome浏览器打开开发工具，然后访问https://cuiqingcai.com/5597.html

2 在Elements选项卡中便会观察到网页的源代码，右侧便是节点的样式。如下所示：

3 但这不是我们想要寻找的内容。切换到Network选项卡，随后重新刷新页面，可以发现这里出现了非常多的条目，如下图所示：

这其实就是在页面加载过程中浏览器与服务器之间发送请求和接收响应的所有记录。

4 Ajax请求类型。

Ajax其实有其特殊的请求类型，它叫作xhr。在下图，我们可以发现一个名称以getIndex开头的请求，其Type为xhr，这就是一个Ajax请求。用鼠标点击这个请求，可以查看这个请求的详细信息。

在右侧可以观察到其Request Headers、Request URL和Response Headers等信息。其中Request Headers中有一个信息为X-Requested-With:XMLHttpRequest，这就标记了此请求是Ajax请求。

5 Preview页签看数据

随后点击一下Preview，即可看到响应的内容，它是JSON格式的。这里Chrome为我们自动做了解析，点击箭头即可展开和收起相应内容，内容如下：

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

6 Response页签看数据

也可以切换到Response选项卡，从中观察到真实的返回数据，如下图：

7 分析第一个请求

切回到第一个请求，观察一下它的Response是什么。

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

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

二 过滤请求

再利用Chrome开发者工具的筛选功能筛选出所有的Ajax请求。在请求的上方有一层筛选栏，直接点击XHR，此时在下方显示的所有请求便都是Ajax请求了。

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

随意点开一个条目，都可以清楚地看到其Request URL、Request Headers、Response Headers、Response Body等内容，此时想要模拟请求和提取就非常简单了。

下图内容便是某一页微博的列表信息。