2019-01-17動態(tài)網(wǎng)頁

?動態(tài)網(wǎng)頁指幾種可能:

1)需要用戶交互,如常見的登錄操作;

2)網(wǎng)頁通過JS/ AJAX動態(tài)生成,如一個html里有<div id="test"></div>,通過JS生成<div id="test"><span>aaa</span></div>;

3)點擊輸入關(guān)鍵字后進行查詢,而瀏覽器url地址不變

?本篇文章不借助任何外部工具,實例操作如何以觀察網(wǎng)絡(luò)通信的方法解析動態(tài)網(wǎng)頁。

?環(huán)境:Win10 , python2.7,scrapy 1.4.0,Chrome瀏覽器,F(xiàn)irefox瀏覽器


1、觀察是否為動態(tài)網(wǎng)頁

以華盛頓郵報為例,搜索關(guān)鍵詞 French ,搜索到的結(jié)果如下:

該網(wǎng)頁的url 為https://www.washingtonpost.com/newssearch/?datefilter=All%20Since%202005&query=French&sort=Relevance&utm_term=.3570cb8c6dcf

?F12打開控制臺,在Element下找到想要獲得的搜索列表數(shù)據(jù)所在的section標(biāo)簽”main-content”

然后轉(zhuǎn)到Network的Doc標(biāo)簽,重新加載當(dāng)前網(wǎng)頁,在Name下點擊第一個文件,在右邊的Preview下尋找相應(yīng)的section id 為 “main-content”的元素,發(fā)現(xiàn)沒有數(shù)據(jù):

說明該內(nèi)容為動態(tài)加載


2、獲得JS點擊動作發(fā)出的請求url

在JS標(biāo)簽下尋找真正存放數(shù)據(jù)的網(wǎng)頁,點擊Name下的文件觀察右側(cè)的Preview有沒有數(shù)據(jù),存放數(shù)據(jù)的網(wǎng)頁才是我們真正需要爬取的網(wǎng)頁:

一個小技巧:一般動態(tài)加載的數(shù)據(jù)都以json形式存儲,在Filter里填json過濾,可以更加快速地尋找到想要的文件,但不是所有的網(wǎng)站都適用,還是需要在JS或XHR里手動尋找所需文件。

復(fù)制當(dāng)前文件的鏈接,得到一個很長的url:

https://sitesearchapp.washingtonpost.com/sitesearch-api/v2/search.json?count=20&datefilter=displaydatetime:%5B*+TO+NOW%2FDAY%2B1DAY%5D&facets.fields=%7B!ex%3Dinclude%7Dcontenttype,%7B!ex%3Dinclude%7Dname&highlight.fields=headline,body&highlight.on=true&highlight.snippets=1&query=French&sort=&callback=angular.callbacks._0

在瀏覽器中打開這個地址,發(fā)現(xiàn)這是一個json文件,但是該url太過冗長,我們可以根據(jù)需要適當(dāng)?shù)貏h減一些參數(shù),這些參數(shù)可以在Headers下得到:

選擇保留count,datefilter,query三個參數(shù),注意,必須保證刪減參數(shù)后的網(wǎng)頁與原url獲得的json數(shù)據(jù)一樣,精簡后的url為:

https://sitesearchapp.washingtonpost.com/sitesearch-api/v2/search.json?count=20&datefilter=displaydatetime:[*+TO+NOW%2FDAY%2B1DAY]&query=French

在火狐瀏覽器中打開該url(選擇火狐瀏覽器打開是因為json數(shù)據(jù)顯示友好),獲得的頁面如下:


3、提取json數(shù)據(jù)

根據(jù)以上json文件的結(jié)構(gòu),我們可以用json.loads函數(shù)進一步提取想要的數(shù)據(jù):


4、翻頁機制

在網(wǎng)頁上進行操作,觀察url的參數(shù)變化規(guī)律:

第一頁:

第二頁:

第三頁:

發(fā)現(xiàn)每一頁的url變化都是由多出來的startat這個參數(shù)導(dǎo)致的,解析下一頁只需要每次讓startat的值增加20,在url后添加該參數(shù)即可,如第二頁:

https://sitesearchapp.washingtonpost.com/sitesearch-api/v2/search.json?count=20&datefilter=displaydatetime:[*+TO+NOW%2FDAY%2B1DAY]&query=French&startat=20

最后根據(jù)新聞總數(shù)來計算出最后一頁的startat值即可


5、解析以表單形式提交參數(shù)的動態(tài)網(wǎng)頁

有的網(wǎng)站輸入關(guān)鍵字后進行查詢,而瀏覽器url地址不變,有可能是以表單形式提交Request參數(shù)。

以蘋果日報為例,關(guān)鍵字搜索“法國”,url中卻沒有類似“?q=法國”的參數(shù)

再次加載該url,發(fā)現(xiàn)其定位在一個單獨的搜索頁面:

分析搜索的結(jié)果,發(fā)現(xiàn)該參數(shù)是以表單的方式提交的:

根據(jù)input 的參數(shù)填充FormRequest:

返回的response就可以用xpath正常解析網(wǎng)頁了:

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 28,826評論 1 45
  • 關(guān)于Mongodb的全面總結(jié) MongoDB的內(nèi)部構(gòu)造《MongoDB The Definitive Guide》...
    中v中閱讀 32,311評論 2 89
  • Swift1> Swift和OC的區(qū)別1.1> Swift沒有地址/指針的概念1.2> 泛型1.3> 類型嚴(yán)謹(jǐn) 對...
    cosWriter閱讀 11,673評論 1 32
  • 點擊查看原文 Web SDK 開發(fā)手冊 SDK 概述 網(wǎng)易云信 SDK 為 Web 應(yīng)用提供一個完善的 IM 系統(tǒng)...
    layjoy閱讀 14,316評論 0 15
  • 今天的我請了假,在家中休息。然后我表妹來看我。 期間我們在談?wù)撟罱ぷ髟趺礃?。我們各自在自己的工作崗位上待了有兩?..
    憲子閱讀 264評論 0 0

友情鏈接更多精彩內(nèi)容