全栈 - 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

若是以为文章不错，不妨点一下左下方的喜欢～