之前我們爬取的網頁，多是HTML靜態(tài)生成的內容，直接從HTML源碼中就能找到看到的數(shù)據和內容，然而并不是所有的網頁都是這樣的。

有一些網站的內容由前端的JS動態(tài)生成，由于呈現(xiàn)在網頁上的內容是由JS生成而來，我們能夠在瀏覽器上看得到，但是在HTML源碼中卻發(fā)現(xiàn)不了。比如今日頭條：

瀏覽器呈現(xiàn)的網頁是這樣的：

查看源碼，卻是這樣的：

網頁的新聞在HTML源碼中一條都找不到，全是由JS動態(tài)生成加載。

遇到這種情況，我們應該如何對網頁進行爬取呢？有兩種方法：

1、從網頁響應中找到JS腳本返回的JSON數(shù)據；2、使用Selenium對網頁進行模擬訪問

在此只對第一種方法作介紹，關于Selenium的使用，后面有專門的一篇。

一、從網頁響應中找到JS腳本返回的JSON數(shù)據

即使網頁內容是由JS動態(tài)生成加載的，JS也需要對某個接口進行調用，并根據接口返回的JSON數(shù)據再進行加載和渲染。

所以我們可以找到JS調用的數(shù)據接口，從數(shù)據接口中找到網頁中最后呈現(xiàn)的數(shù)據。

就以今日頭條為例來演示：

1、從找到JS請求的數(shù)據接口

F12打開網頁調試工具

網頁調試工具

選擇“網絡”選項卡后，發(fā)現(xiàn)有很多響應，我們篩選一下，只看XHR響應。

（XHR是Ajax中的概念，表示XMLHTTPrequest）

然后我們發(fā)現(xiàn)少了很多鏈接，隨便點開一個看看：

我們選擇city，預覽中有一串json數(shù)據：

我們再點開看看：

原來全都是城市的列表，應該是加載地區(qū)新聞之用的。

現(xiàn)在大概了解了怎么找JS請求的接口的吧？但是剛剛我們并沒有發(fā)現(xiàn)想要的新聞，再找找看：

有一個focus，我們點開看看：

與首頁的圖片新聞呈現(xiàn)的數(shù)據是一樣的，那么數(shù)據應該就在這里面了。

看看其他的鏈接：

這應該是熱搜關鍵詞

這個就是圖片新聞下面的新聞了。

我們打開一個接口鏈接看看:

返回一串亂碼，但從響應中查看的是正常的編碼數(shù)據：

有了對應的數(shù)據接口，我們就可以仿照之前的方法對數(shù)據接口進行請求和獲取響應了

2、請求和解析數(shù)據接口數(shù)據

先上完整代碼：

# coding：utf-8

import requests

import json

url = 'http://www.toutiao.com/api/pc/focus/'

wbdata = requests.get(url).text

data = json.loads(wbdata)

news = data['data']['pc_feed_focus']

for n in news:

title = n['title']

img_url = n['image_url']

url = n['media_url']

print(url,title,img_url)

返回出來的結果如下：

照例，稍微講解一下代碼：

代碼分為四部分，

第一部分：引入相關的庫

# coding：utf-8

import requests

import json

第二部分：對數(shù)據接口進行http請求

url = 'http://www.toutiao.com/api/pc/focus/'

wbdata = requests.get(url).text

第三部分：對HTTP響應的數(shù)據JSON化，并索引到新聞數(shù)據的位置

data = json.loads(wbdata)

news = data['data']['pc_feed_focus']

第四部分：對索引出來的JSON數(shù)據進行遍歷和提取

for n in news:

title = n['title']

img_url = n['image_url']

url = n['media_url']

print(url,title,img_url)

如此，就完成了從JS網頁中爬取數(shù)據。

之前我們爬取的網頁，多是HTML靜態(tài)生成的內容，直接從HTML源碼中就能找到看到的數(shù)據和內容，然而并不是所有的網頁都是這樣的。

有一些網站的內容由前端的JS動態(tài)生成，由于呈現(xiàn)在網頁上的內容是由JS生成而來，我們能夠在瀏覽器上看得到，但是在HTML源碼中卻發(fā)現(xiàn)不了。比如今日頭條：

瀏覽器呈現(xiàn)的網頁是這樣的：

查看源碼，卻是這樣的：

網頁的新聞在HTML源碼中一條都找不到，全是由JS動態(tài)生成加載。

遇到這種情況，我們應該如何對網頁進行爬取呢？有兩種方法：

1、從網頁響應中找到JS腳本返回的JSON數(shù)據；2、使用Selenium對網頁進行模擬訪問

在此只對第一種方法作介紹，關于Selenium的使用，后面有專門的一篇。

一、從網頁響應中找到JS腳本返回的JSON數(shù)據

即使網頁內容是由JS動態(tài)生成加載的，JS也需要對某個接口進行調用，并根據接口返回的JSON數(shù)據再進行加載和渲染。

所以我們可以找到JS調用的數(shù)據接口，從數(shù)據接口中找到網頁中最后呈現(xiàn)的數(shù)據。

就以今日頭條為例來演示：

1、從找到JS請求的數(shù)據接口

F12打開網頁調試工具

網頁調試工具

選擇“網絡”選項卡后，發(fā)現(xiàn)有很多響應，我們篩選一下，只看XHR響應。

（XHR是Ajax中的概念，表示XMLHTTPrequest）

然后我們發(fā)現(xiàn)少了很多鏈接，隨便點開一個看看：

我們選擇city，預覽中有一串json數(shù)據：

我們再點開看看：

原來全都是城市的列表，應該是加載地區(qū)新聞之用的。

現(xiàn)在大概了解了怎么找JS請求的接口的吧？但是剛剛我們并沒有發(fā)現(xiàn)想要的新聞，再找找看：

有一個focus，我們點開看看：

與首頁的圖片新聞呈現(xiàn)的數(shù)據是一樣的，那么數(shù)據應該就在這里面了。

看看其他的鏈接：

這應該是熱搜關鍵詞

這個就是圖片新聞下面的新聞了。

我們打開一個接口鏈接看看:

返回一串亂碼，但從響應中查看的是正常的編碼數(shù)據：

有了對應的數(shù)據接口，我們就可以仿照之前的方法對數(shù)據接口進行請求和獲取響應了

2、請求和解析數(shù)據接口數(shù)據

先上完整代碼：

# coding：utf-8

import requests

import json

url = 'http://www.toutiao.com/api/pc/focus/'

wbdata = requests.get(url).text

data = json.loads(wbdata)

news = data['data']['pc_feed_focus']

for n in news:

title = n['title']

img_url = n['image_url']

url = n['media_url']

print(url,title,img_url)

返回出來的結果如下：

照例，稍微講解一下代碼：

代碼分為四部分，

第一部分：引入相關的庫

# coding：utf-8

import requests

import json

第二部分：對數(shù)據接口進行http請求

url = 'http://www.toutiao.com/api/pc/focus/'

wbdata = requests.get(url).text

第三部分：對HTTP響應的數(shù)據JSON化，并索引到新聞數(shù)據的位置

data = json.loads(wbdata)

news = data['data']['pc_feed_focus']

第四部分：對索引出來的JSON數(shù)據進行遍歷和提取

for n in news:

title = n['title']

img_url = n['image_url']

url = n['media_url']

print(url,title,img_url)

如此，就完成了從JS網頁中爬取數(shù)據。