js 爬虫抓取网页数据(应用宝应用搜索页面中的JS动态生成方法)

　　js 爬虫抓取网页数据(应用宝应用搜索页面中的JS动态生成方法)

　　1.1 Ajax异步加载生成网页内容

　　现在越来越多的网页使用Ajax异步加载方式，即网页中的一些内容是由前端JS动态生成的。由于网页上呈现的内容是由JS生成的，我们可以在浏览器上看到，但在HTML源代码中看不到。

　　例如应用宝的搜索应用页面显示如下：

　　从上面可以看出，搜索到的应用列表信息在id="J_SearchDefaultListBox"的DOM树下。

　　查看当前网页的源码（使用快捷键“Ctrl+U”）如下：

　　源码中发现元素id="J_SearchDefaultListBox"下的内容为空，没有应用列表信息。

　　从上面的分析可以看出，应用宝的应用搜索页面显示的应用列表是由JS动态生成和加载的。

　　在这种情况下，我们应该如何抓取网页内容呢？一般有两种方法：

　　（1）从网页响应中查找JS脚本返回的数据（多为json格式，也有xml格式）；

　　（2）使用 Selenium 模拟对网页的访问。

　　下面我们将介绍第一种方法。第二种方法可以在这里找到。

　　1.2 从网页响应中找到JS脚本返回的数据由于网页内容是由JS动态生成并加载的，那么JS需要先调用一个接口，然后根据返回的数据进行加载和渲染界面。那么我们可以先找到JS调用的数据接口，从数据接口中找到网页最后呈现的数据。下面以应用宝的搜索应用页面为例进行说明。

　　1.2.1 找到JS请求的数据接口

　　按着这些次序：

　　您将看到以下信息：

　　在这里，我们看到只有一个请求（其他页面可能有多个）。点击这个请求，然后选择“预览”，可以看到如下数据：

　　在上述数据中，我们找到了“微信”、“多开助手”等信息，这些信息就是搜索到的应用列表信息。

　　通过以上分析可知，搜索到的应用列表信息就是通过这个请求获得的。这个请求对应的URL是%E5%BE%AE%E4%BF%A1&pns=&sid=（获取方法：鼠标移到这个请求上->然后右键->复制->复制链接地址）。

　　在浏览器中打开上述 URL 将返回一串数据。它看起来很乱，但实际上是 JSON 格式的数据。

　　这样，我们就找到了JS请求的数据接口。

　　1.2.2 URL编码上面我们找到的JS请求的数据接口是%E5%BE%AE%E4%BF%A1&pns=&sid=，但是%E5%BE%AE%E4是什么%BF%A1 是什么意思？

　　实际上 %E5%BE%AE%E4%BF%A1 是中文微信的 URL 编码。在Python中，可以使用urllib.parse.quote()获取，即'%E5%BE%AE%E4%BF%A1' = urllib.parse.quote('WeChat')。

　　根据标准，URL 中只允许使用英文字母、数字和一些符号。其他字符（如中文）不符合 URL 标准。这时候需要进行 URL 编码。

　　1.2.3 代码实现

　　请按照以下 4 个步骤来实施：

　　(1）介绍相关库；

　　(2）请求JS请求的数据接口；