這是全棧資料工程師養成攻略系列教程的第七期：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請求實現的。
- 瀏覽器向所訪問的伺服器請求指定的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 之後的內容去掉，在瀏覽器中訪問 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、target1、target2四個引數，分別對應P2P平臺的Id、資料彙總型別、指標1、指標2。
如果我們直接在瀏覽器中訪問 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