Python爬虫实战：利用Chrome开发者工具抓取Ajax动态加载数据

定位Ajax动态加载内容

继续以之前的微博页面为例，我们知道拖动刷新时加载的内容是通过Ajax技术实现的，且页面URL并未发生变化。那么，我们应该如何定位并查看这些Ajax请求呢？

1. 查看请求

这一步需要借助浏览器的开发者工具，下文将以Chrome浏览器为例进行具体介绍。

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

此时在Elements选项卡中，我们可以观察到网页的源代码结构，右侧则显示了对应节点的CSS样式信息。

但这并非我们要寻找的目标内容。切换到Network选项卡，随后重新刷新页面，可以发现列表中出现非常多的网络请求条目，如图6-3所示。

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

Ajax请求具有特殊的类型标识，即xhr。在图6-3中，我们可以发现一个名称以getIndex开头的请求，其Type字段显示为xhr，这正是我们要找的Ajax请求。用鼠标点击该请求，即可查看其详细信息，如图6-4所示。

在右侧面板中可以观察到Request Headers、URL和Response Headers等关键信息。其中，Request Headers里包含一条名为X-Requested-With:XMLHttpRequest的信息，这明确标记了该请求为Ajax请求，如图6-5所示。

随后点击一下Preview标签页，即可看到服务器返回的具体内容，其格式为JSON。Chrome浏览器会自动对JSON数据进行解析，点击箭头图标即可展开或收起相应的数据层级，如图6-6所示。

观察返回结果可以发现，这里包含我的个人信息，如昵称、简介、头像等，这些数据正是用于渲染个人主页的核心数据。JavaScript接收到这些数据后，执行相应的渲染方法，整个页面便呈现出来。

另外，也可以切换到Response选项卡，从中观察到未经解析的真实原始返回数据，如图6-7所示。

接下来，切回到第一个初始请求，观察一下它的Response字段是什么，如图6-8所示。

这是最原始链接https://m.weibo.cn/u/2830678474直接返回的结果，其HTML代码只有不到50行，结构非常简单，主要包含一些JavaScript脚本。

由此可见，我们看到的微博页面真实数据并非由最原始的页面直接返回，而是后续执行JavaScript代码后，再次向后台发送Ajax请求，浏览器获取数据后再进行二次渲染生成的。

利用开发者工具过滤请求

2. 过滤请求

接下来，利用Chrome开发者工具的筛选功能，专门筛选出所有的Ajax请求。在请求列表上方有一层筛选栏，直接点击“XHR”按钮，此时在下方显示的所有请求便都是Ajax请求了，如图6-9所示。

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

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

图6-10所示的内容便是我的某一页微博的列表详细信息。

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

在下一节中，我们将使用Python实现Ajax请求的模拟，从而完成数据的抓取工作。

以上就是Python3爬虫中关于Ajax分析方法的总结的详细内容，更多关于Python3爬虫里Ajax分析方法的资料请关注本站其它相关文章！