这是我参与「第五届青训营 」伴学笔记创作活动的第4天
前言
前端所有的静态资源加载和数据都是通过HTTP协议进行开发的，例如：输入URL打开网页、AJAX获取数据、img标签加载图片等。在前端工作中，日常开发中经常会用到cookie、浏览器的缓存机制、各种形式的网络连接（websocket），这些网络请求相关场景都跟HTTP协议有密切的关系。所以，对于前端开发者来说，了解HTTP协议是必需的。
什么是HTTP协议
协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则，超文本传输协议(HTTP)是一种通信协议，它允许将超文本标记语言(HTML)文档从Web服务器传送到客户端的浏览器，属于应用层协议。
HTTP怎么工作
在日常生活中，人们在地址栏输入URL，之后就可以看到网页，那么这其中都发生了什么？ 实际上在我们输入URL后，浏览器会给Web服务器发送一个Request，服务器接到Request之后进行处理，并生成相应的Response发给浏览器，浏览器解析Response中的HTML，这样我们就看到了相应的网页(有些Request和Response可能会经过代理服务器，代理服务器具有缓存功能，可以提高访问速度)。
URL详解
URL(Uniform Resource Locator)统一资源定位符，是互联网标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。 它的基本格式是schema://host[port#]/path/.../[url-params][?query-string][#anchor]
- schema(协议): 它告诉浏览器如何处理将要打开的文件。最常用的协议是http，用于访问网络。其他协议有：ftp、mailto、ldap、file...
- host: HTTP服务器的IP地址或者域名
- port#: HTTP服务器的端口，默认是80，默认时端口号可以省略。
- path: 访问资源的路径
- url-params: url参数
- query-string: 发送给http服务器的数据
- anchor: 锚链接
HTTP报文分析
Request和Response内容相似，大致分为三个部分，第一部分是start-line(网上也有人说叫作‘请求行’),第二部分是HTTP headers，第三部分是body。下面是一个实例：
先看Request报文结构：
（图片来源于网络）
先说说第一行，其中第一个Method是请求方法，有很多种:
| 类型 | 作用 |
|---|---|
| GET | 请求一个指定资源的表示形式(查询) |
| POST | 用于将实体提交到指定的资源(更新) |
| PUT | 用请求有效载荷替换目标资源的所有当前表示(增加) |
| DELETE | 删除指定的资源(删除) |
| HEAD | 请求一个与GET请求的响应相同的响应，但没有响应(不常用) |
| CONNECT | 建立一个到由目标资源标识的服务器的隧道 |
| OPTIONS | 用于描述目标资源的通信选项 |
| TRACE | 沿着到目标资源的路径执行一个消息环回测试 |
| PATCH | 用于对资源应用部分修改 |
再看Response报文结构：
（图片来自于网络）
HTTP/version-number表示HTTP协议的版本号，和Request报文第一行最后一个参数相同，status code表示状态码，message表示状态消息。
状态码
状态码可以告诉HTTP客户端：HTTP服务器是否产生了预期的Response. HTTP/1.1中定义了5类状态码，由三位数字组成，第一个数字定义了响应的类别
| 状态码 | 响应内容 |
|---|---|
| 1XX | 提示信息 - 表示请求已被成功接收，继续处理 |
| 2XX | 成功 - 表示请求已被成功接收，理解，接受 |
| 3XX | 重定向 - 要完成请求必须进行更进一步的操作 |
| 4XX | 客户端错误 - 请求有语法错误或请求无法实现 |
| 5XX | 服务器端错误 - 服务器未能实现合法的请求 |
例如：
- 200 OK -- 客户端请求成功
- 301- 资源 (网页等) 被永久转移到其它 URL
- 302- 临时跳转401 Unauthorized - 请求未经授权
- 404 - 请求资源不存在，可能是输入了错误的 URL
- 500- 服务器内部发生了不可预期的错误
- 504 Gateway Timeout-网关或者代理的服务器无法在规定的时间内获得想要的响应
请求头 Request Header
常用请求头
响应头 Response Header
常用响应头
本文参考学习前端必知的--HTTP协议详解，点击链接观看原文可深入学习。
