全棧 - 7 爬蟲 Http請求和Chrome

01-30

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

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

訪問一個鏈接

首先在瀏覽器中訪問一個網頁鏈接：高考分數線查詢_全國各地各批次高考分數線查詢_新浪教育，這是由新浪教育提供的一個高考信息查詢網站。

每個網頁鏈接，或者稱作url，通常包含以下幾個部分，協議://域名:埠/路由?參數。

協議：數據傳輸所使用的協議，例如 http ；
域名：所訪問伺服器的域名，例如 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.cnn

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

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

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 之後的內容去掉，在瀏覽器中訪問 http://kaoshi.edu.sina.com.cn/?p=college&s=api2015&a=getAllCollege，就會返回相應的json數據。可以將json文本全部複製，並粘貼到在線JSON校驗格式化工具（Be JSON）等在線json校驗格式化工具里，即可發現這是網頁中使用到的大學基本信息數據。

所以在寫爬蟲的時候，我們需要對目標網頁進行分析。一方面是直接把目標頁面請求下來，經過解析後獲取需要的欄位；另一方面是請求網頁所使用到的一些資源，或許能夠更方便地拿到豐富的格式化數據。

Http請求

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

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

GET 請求，顧名思義，是去拿數據。在GET請求中，可以包含或不包含參數。如果包含參數的話，參數直接寫在url中，因此是顯式可見的，即所訪問的服務 + 參數。例如之前提到的 http://kaoshi.edu.sina.com.cn/?p=college&s=api2015&a=getAllCollege 就是一個GET請求，參數指明了我們需要進行的操作是獲取全部大學的信息數據。

POST 請求一般包含參數，向伺服器提交url和參數，然後獲取相應的數據。在POST請求中，參數並不是直接寫在url中，而是在數據包內部提供，所以不是顯示可見的，相對GET請求而言更加安全。

在瀏覽器中訪問以下鏈接：陸金所官網數據檔案_網貸之家，這是網貸之家提供的關於陸金所的相關數據。當我們在網頁上訪問數據時，可以對應地在 Network 中找到這樣一項請求：http://shuju.wdzj.com/plat-info-target.html。從圖中可以看出請求的類型是POST，所提交的參數在Form Data中可以找到，一共指定了wdzjPlatId、type、target1、target2四個參數，分別對應P2P平台的Id、數據匯總類型、指標1、指標2。

如果我們直接在瀏覽器中訪問 http://shuju.wdzj.com/plat-info-target.html?wdzjPlatId=59&type=1&target1=19&target2=20，即將POST請求組裝成一個GET請求，把參數直接寫在url裡面訪問，伺服器將報錯，無法獲得正確的數據，從這個例子可以看出POST請求和GET請求的不同。

Url類型

回過頭來總結下之前訪問過的url。同樣是在瀏覽器中訪問，有的url返回的是經過渲染後的複雜頁面，有的url僅返回json文本數據。因此，可以將url分為以下兩大類：

Html：返回html結構化頁面，經瀏覽器渲染後呈現給用戶，通常是多個資源融合後的結果，例如高考分數線查詢_全國各地各批次高考分數線查詢_新浪教育；
API：Application Programming Interfaces，即應用編程介面。請求後完成某些功能，可以是返回指定的數據，例如 http://kaoshi.edu.sina.com.cn/?p=college&s=api2015&a=getAllCollege。

對於以上兩大類url，在寫爬蟲時我們會採取不同的處理方法。能找到所需的API最好，因為格式化數據更便於處理。如果只有Html，就需要對渲染後的頁面進行分析，通過一些解析工具提取出想要的欄位。

視頻鏈接：Http請求和Chrome