js 抓取网页内容(什么是HTML静态生成的内容？如何对网页进行爬取呢？)

　　js 抓取网页内容(什么是HTML静态生成的内容？如何对网页进行爬取呢？)

　　我们之前爬取的大部分网页都是从 HTML 静态生成的内容，而我们看到的数据和内容可以直接从 HTML 源代码中找到。然而，并不是所有的网页都是这样的。

　　网站的部分内容是由前端JS动态生成的。由于网页上显示的内容是JS生成的，所以我们在浏览器上可以看到，但是在HTML源代码中是找不到的。例如今日头条：

　　浏览器渲染的网页是这样的：

　　看源码，是这样的：

　　网页的新闻在 HTML 源代码中是找不到的，都是 JS 动态生成和加载的。

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

　　1、从网页响应中找到JS脚本返回的JSON数据；2、使用Selenium模拟访问网页

　　这里只介绍第一种方法。有一篇专门的文章介绍了 Selenium 的使用。

　　一、从网页响应中查找JS脚本返回的JSON数据

　　即使网页内容是由JS动态生成和加载的，JS仍然需要调用一个接口，然后根据接口返回的JSON数据进行加载和渲染。

　　所以我们可以找到JS调用的数据接口，从数据接口中找到网页中最后渲染的数据。

　　以今日头条为例来说明：

　　1、来自JS请求的数据接口

　　F12 打开网页调试工具

　　选择“网络”选项卡后，有很多响应，所以让我们过滤并仅查看 XHR 响应。

　　（XHR 是 Ajax 中的一个概念，意思是 XMLHTTPrequest）

　　然后我们发现少了很多链接，点一个就可以看到了：

　　我们选择city，预览中有一串json数据：

　　让我们再次点击查看：

　　原来是一个城市列表，应该是用来加载区域新闻的。

　　现在你大概明白如何找到 JS 请求的接口了吧？但是刚才我们没有找到想要的消息，我们再看一遍：

　　有一个焦点，我们点击它看看：

　　首页图片新闻呈现的数据是一样的，所以数据应该是有的。

　　查看其他链接：

　　这应该是热搜关键词

　　返回一堆乱码，但查看响应是正常的编码数据：

　　有了对应的数据接口，我们就可以模仿前面的方法请求数据接口并得到响应

　　2、请求和解析数据接口数据

　　先完整代码：

　　# 编码：utf-8

　　导入请求

　　导入json

　　网址 = '#39;

　　wbdata = requests.get(url).text

　　数据 = json.loads(wbdata)

　　新闻=数据['数据']['pc_feed_focus']

　　对于新闻中的 n：

　　标题 = n['标题']

　　img_url = n['image_url']

　　url = n['media_url']

　　打印（网址，标题，img_url）

　　返回的结果如下：

　　像往常一样，对代码做一点解释：

　　代码分为四部分，

　　第 1 部分：介绍相关库

　　# 编码：utf-8

　　导入请求

　　导入json

　　第 2 部分：向数据接口发出 http 请求

　　网址 = '#39;

　　wbdata = requests.get(url).text