全棧 - 7 爬蟲 Http請求和Chrome

這是全棧數據工程師養成攻略系列教程的第七期：7 爬蟲 Http請求和Chrome。

咱們在瀏覽網頁時，網頁上顯示的文字和圖片等數據從何而來？爲了弄清這一點，須要首先了解下什麼是Http請求。

訪問一個連接

首先在瀏覽器中訪問一個網頁連接：kaoshi.edu.sina.com.cn/college/sco…，這是由新浪教育提供的一個高考信息查詢網站。

每一個網頁連接，或者稱做url，一般包含如下幾個部分，協議://域名:端口/路由?參數。

• 協議：數據傳輸所使用的協議，例如 http ；
• 域名：所訪問服務器的域名，例如 kaoshi.edu.sina.com.cn ，若是沒有域名則爲服務器IP；
• 端口：連接所使用的端口，Http請求的默認端口是80，能夠省略；
• 路由：不一樣的路由會請求到不一樣的功能，例如 college/scorelist 請求的是查看大學的分數線列表這一功能；
• 參數：請求數據時所提供的參數，參數的 key 和 value 由 = 鏈接，參數之間以 &分隔，例如 tab=batch&wl=1&local=2&batch=&syear=2013 指定了返回2013年的數據。

能夠在終端或CMD中使用 ping 訪問某一個url，測試是否能正常鏈接，而且查看域名所對應的IP。

ping kaoshi.edu.sina.com.cn複製代碼

在瀏覽器中訪問一個url，咱們就能看到對應網頁上的文字和圖片等內容，這一過程主要包括如下幾個步驟，其中的數據傳輸大可能是基於Http請求實現的。

1. 瀏覽器向所訪問的服務器請求指定的url；
2. 服務器根據url返回相應的數據；
3. 瀏覽器加載所返回的數據，經渲染後以網頁的形式呈現給用戶。

Chrome瀏覽器

在正式開始介紹Http請求以前，咱們來了解一下Chrome瀏覽器，以熟悉一些必須的背景知識。

Chrome是一款優秀的瀏覽器，渲染效果和調試功能都很是強大。在Chrome瀏覽器中訪問網頁後，在頁面上右擊鼠標，能夠找到「顯示網頁源代碼（View Source）」和「檢查（Inspect）」兩項功能。前者能夠查看網頁的靜態源代碼，然後者提供了至關強大的調試功能。

以以前訪問的新浪教育網頁爲例，在網頁的某一個元素，例如頁面頂部的 新浪首頁 上，右鍵並點擊「檢查」以後將會出現如下界面，即Chrome提供的「開發者工具（Developer Tools）」。默認顯示在 Elements 標籤頁上，而且高亮右鍵點擊元素所對應的代碼。

開發者工具

開發者工具包括 Elements 、 Console 、 Sources 、 Network 等多個標籤頁，分別提供瞭如下功能：

• Elements：顯示網頁通過渲染以後的結構，能夠任意調整和修改網頁元素，並即時顯示修改結果；
• Console：打印變量信息，用於代碼調試，網頁運行過程當中產生的警告和報錯也會出如今這裏；
• Sources：查看網頁所使用到的所有資源文件；
• Network：查看網頁所請求的各種資源文件及其對應的請求時間。

Network 標籤頁會記錄網頁在渲染過程當中所請求的各種資源文件及其對應的請求時間。大多數網頁只在一開始加載的時候請求各種資源文件，加載完畢後再也不請求；也有一些網頁在加載完畢後仍定時請求一些資源，用於動態更新頁面上的內容。所訪問的網頁使用了哪些資源？用戶瀏覽的過程當中網頁作了哪些事情？這些均可以在 Network 標籤頁中找到答案。

Network 標籤頁中的資源文件主要分爲如下幾大類：

• All：不加篩選條件，所請求的所有資源文件；
• XHR：異步請求的數據；
• JS：js代碼文件；
• CSS：css樣式文件；
• Img：jpg、png等圖片文件；
• Media：媒體資源文件；
• Font：字體文件；
• Doc：靜態html文檔。

咱們的目的是寫爬蟲，因此主要關注 XHR 、 JS 和 Doc 等資源類型，能夠找到網頁所使用到的一些數據。舉例來講，仍是以前訪問的新浪教育網頁，能夠在 XHR 中找到這樣的一個連接，http://kaoshi.edu.sina.com.cn/?p=college&s=api2015&a=getAllCollege&callback=jQuery1112090237577418465011485309859918&=1485309859919。將 callback 以後的內容去掉，在瀏覽器中訪問 kaoshi.edu.sina.com.cn/?p=college&…，就會返回相應的json數據。能夠將json文本所有複製，並粘貼到 www.bejson.com/ 等在線json校驗格式化工具裏，便可發現這是網頁中使用到的大學基本信息數據。

因此在寫爬蟲的時候，咱們須要對目標網頁進行分析。一方面是直接把目標頁面請求下來，通過解析後獲取須要的字段；另外一方面是請求網頁所使用到的一些資源，或許可以更方便地拿到豐富的格式化數據。

Http請求

掌握了和Chrome瀏覽器相關的內容，咱們再來介紹下Http請求，由於以上所請求的大多數資源都是基於Http協議獲取的。

Http是目前最通用的Web傳輸協議。不管是用電腦看網站，仍是用手機玩遊戲，客戶端和服務端之間的數據傳輸大多都是基於Http協議。Http請求中最多見的兩類分別是 GET 和 POST。

GET 請求，顧名思義，是去拿數據。在GET請求中，能夠包含或不包含參數。若是包含參數的話，參數直接寫在url中，所以是顯式可見的，即 所訪問的服務 + 參數。例如以前提到的 kaoshi.edu.sina.com.cn/?p=college&… 就是一個GET請求，參數指明瞭咱們須要進行的操做是獲取所有大學的信息數據。

POST 請求通常包含參數，向服務器提交url和參數，而後獲取相應的數據。在POST請求中，參數並非直接寫在url中，而是在數據包內部提供，因此不是顯示可見的，相對GET請求而言更加安全。

在瀏覽器中訪問如下連接：shuju.wdzj.com/plat-info-5…，這是 網貸之家 提供的關於陸金所的相關數據。當咱們在網頁上訪問數據時，能夠對應地在 Network 中找到這樣一項請求：shuju.wdzj.com/plat-info-t…。從圖中能夠看出請求的類型是POST，所提交的參數在Form Data中能夠找到，一共指定了wdzjPlatId、type、target一、target2四個參數，分別對應P2P平臺的Id、數據彙總類型、指標一、指標2。

POST請求

若是咱們直接在瀏覽器中訪問 shuju.wdzj.com/plat-info-t…，即將POST請求組裝成一個GET請求，把參數直接寫在url裏面訪問，服務器將報錯，沒法得到正確的數據，從這個例子能夠看出POST請求和GET請求的不一樣。

Url類型

回過頭來總結下以前訪問過的url。一樣是在瀏覽器中訪問，有的url返回的是通過渲染後的複雜頁面，有的url僅返回json文本數據。所以，能夠將url分爲如下兩大類：

• Html：返回html結構化頁面，經瀏覽器渲染後呈現給用戶，一般是多個資源融合後的結果，例如 kaoshi.edu.sina.com.cn/college/sco…；
• API：Application Programming Interfaces，即應用編程接口。請求後完成某些功能，能夠是返回指定的數據，例如 kaoshi.edu.sina.com.cn/?p=college&…。

對於以上兩大類url，在寫爬蟲時咱們會採起不一樣的處理方法。能找到所需的API最好，由於格式化數據更便於處理。若是隻有Html，就須要對渲染後的頁面進行分析，經過一些解析工具提取出想要的字段。

視頻連接：Http請求和Chrome

若是以爲文章不錯，不妨點一下左下方的喜歡～