Web 网页页面前后端数据交互接口的查找与解析（本文以 Chrome 浏览器为例）

摘要

大数据环境下，人人都会写爬虫。不夸张的说，程序猿十有八九都有过写爬虫的经历，不管用的是 Java 语言或 Python 语言；其中，Python 语言，刚推广时，更是以 “3行代码写爬虫”，作为其语言较其它语言简单明了的噱头。

会写爬虫，不一定知道业务所需的数据在哪个请求中；会写爬虫，不一定会采集数据。纵观网上的爬虫教程，十有八九都只是拿到百度（首页链接：“https://www.baidu.com/”）或知乎（首页链接：“https://www.zhihu.com/”）的首页源代码即可。

采集数据的基本步骤：获取采集任务 -> 抓取业务数据所在请求的网页源代码 -> 用正则或 Jsoup 等抽取工具从源码中提取出结构化的数据 -> 将数据根据业务需要（更多需要考虑容量、性能等方面的因素）存储到指定容器（Redis 、MySQL 或 ES 等） -> 生成衍生的采集任务（衍生任务，包含广度性质的任务，比如翻页等；和深度性质的任务，比如详情页等）。

本文将着重介绍如何查找业务数据所在请求并对请求进行解析。

业务数据所在请求的查找和解析

1、所见即所得

以中国人寿年报、半年报的信源版面（示例链接：https://www.e-chinalife.com/tzzgx/tzzgx/dqbg/nbbnb/）为例：

右键 “查看网页源代码”，即可看到数据：

定期变更的新闻或报告类的信源版面，一般都采用所见即所得；这类信源版面的通性是，对数据时效不敏感且用户翻页的可能性极低（翻页等广度操作，页面大部分请求都要重新加载、渲染；大量广度操作会严重影响服务端性能）。

2、简单 Ajax 加载

当使用第一种方法未找到数据时，请按下 “F12”，进入 “Network” 面板。面板截图如下：

如图所示，Chrome 的 “Network” 面板主要由5个部分组成，包括控制器、过滤器、概览、请求列表、概要等：

组成部分	功能
控制器	控制面板的外观与功能
过滤器	过滤请求列表中显示的资源
概览	显示HTTP请求、响应的时间轴
请求列表	默认时间排序，可选择显示列
概要	请求总数、总数据量、总花费时间等

以聚投诉搜索接口（示例链接：http://ts.21cn.com/home/search?keyword=%E4%BF%9D%E9%99%A9）为例。在请求列表中按 “Ctrl+F” 进入搜索模式，输入数据部分信息进行查询，面板会迅速定位到数据所在请求。

点击请求，可看到请求返回的数据正是我们所需要的。（如果响应数据是 Unicode 编码，此方法不再适用；只能依次点开请求列表中的各个请求去确认）

再看看客户端的请求信息，发现只是个简单的 Get 请求，Python 语言3行可轻松搞定。兄弟们，到此，是不是特别的开心，感觉离人人都会采数据又近了一步。

文章或社区的评论类信源版面，一般都采用 Ajax 加载。这类信源版面的数据时效敏感且访问量极大。

3、加密 Ajax 加载

特殊的网站为了避免大量的爬虫攻击，会对请求做一层加密。以消费保搜索接口（示例链接：https://www.xfb315.com/search/tousu?searchKey=%E4%BF%9D%E9%99%A9）为例：

请求参数如下：

如图，数据接口找到了，但请求里的参数让人很尴尬，一大堆的密文。

这个时候，就需要进入 Chrome 的 “Sources” 面板。

“Sources” 面板主要用于查看 web 站点的资源列表及 javascript 代码的 debug 。

此处省略 javascript 代码的 debug 的过程，最终找到了请求处理方式；将请求处理方式引入爬虫，即可获取数据所在的网页源代码。

结语

人人都会写爬虫，但不一定人人都会采数据；且采且珍惜。

最后，愿所有的技术人都能在大数据环境下找到适合自己的岗位，并被它温柔以待。