前端必知必会—HTTP协议

在上一篇介绍了HTTP/0.9-HTTP/2 协议的历史演变和设计思路，本章主要详细介绍http——前端必知必会的部分

一、什么是HTTP协议？

• 官方：从客户端到服务器端的请求消息。包括消息首行中，对资源的请求方法，资源的标识符及使用的协议

• 菜鸟：当你打开网页的时候，你所看到的文字，图片，多媒体等等，这一切内容，都是你从服务器获取的，每一个内容的获取，就是一个HTTP请求

1、消息的分类

• 请求消息：客户端发送给服务器的用于请求服务和资源的消息
• 响应消息：服务器对请求消息的应答
  一般来说，一个响应对应一个请求，不多也不少

2、特点

• 无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。

• 无状态：HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。另一方面，在服务器不需要先前信息时它的应答就较快

3、消息的基本格式

首行    //请求消息和响应消息中具体格式略有区别，下面介绍头部    //头部用来指出http消息的一些属性，它们有固定的格式正文    //传输的实际内容

• 发送的文本消息时常出现乱码的问题：
  解决 — 对于文本消息，约定UTF-8格式进行编码和解码

• 补充：http消息主要基于ASCII编码的消息实体，主要的意思是指首行和头部都是以ASCII编码，而正文部分的编码任意。

二、http消息的结构

1、请求消息的结构

Method(方法)| basic-path[?query-string](路径)| http/version number(http版本)-----------------------------------------------Header name1 : value...Header nameN : value----------------------------------------------------------------------------------------------request body(optional)

可以看出，http请求分为三个部分：请求行 、请求头部 、请求正文

请求行

1、http请求方法

GET 请求指定的页面信息，并返回实体主体 HEAD 类似于get请求，只不过返回的响应中没有具体的内容，用于获取报头 POST 向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。 PUT 从客户端向服务器传送的数据取代指定的文档的内容。 DELETE 请求服务器删除指定的页面。 CONNECT HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。 OPTIONS 允许客户端查看服务器的性能。 TRACE 回显服务器收到的请求，主要用于测试或诊断。

2、http请求路径

basic-path[?query-string]

    其中[]中的内容表示可选的。basic-path形式很像UNIX中绝对路径的样式，要以/打头。单独的/表示一种路径，/a 或 /a/b/c都是合理的路径表示。不推荐使用/a/ 这样/后面不跟任何其他内容的形式（/除外）。

    问号后面的部分就是query-string。它的格式是任意的，只要客户端和服务器约定好一定的形式即可。

    这个部分一般是请求参数的附加。之前说过，GET方法是不包含请求体的，所以GET方法的HTTP请求想要附加参数只能使用这种方式。当然其他方法也是可以使用这种方式附加参数，只要服务器同意就可以了。query-string的格式任意，但在客户端和服务器之间也有预先定好的约定，即键值对的形式。query-string可以表示成一系列键值对的集合，用以下方式表示：

basic-path?k1=v1&k2=v2&k3=&k4

重点补充：GET和POST的区别

1、GET请求是为了从服务器获取内容，在需要提交数据的情况下，提交的数据会作为querystring放在URL之后，以?分割URL和querystring，querystring也只是为了获取内容所发送的参数；POST请求是为了向服务器发送内容（比如表单），会把提交的数据放在HTTP包的request body中。2、GET提交的数据大小有限制（因为浏览器对URL的长度有限制），而POST方法提交的数据没有限制。3、在express框架中，对于GET请求的参数'?xxxx=',使用req.query.xxxxx方法获得；对于POST请求的参数，使用req.body.xxxxx方法获得4、GET方式提交数据，会带来安全问题，比如一个登录页面，通过GET方式提交数据时，用户名和密码将出现在URL上，如果页面可以被缓存或者其他人可以访问这台机器，就可以从历史记录获得该用户的账号和密码。

3、http之URL
    HTTP使用统一资源标识符（Uniform Resource Identifiers, URI）来传输数据和建立连接。统一资源定位符(UniformResourceLocator,URL)是一种特殊类型的URI，包含了用于查找某个资源的足够的信息,是互联网上用来标识某一处资源的地址。

栗子：

http://www.aspxfans.com:8080/news/index.asp?boardID=5&ID=24618&page=1#name

从上面的URL可以看出，一个完整的URL包括以下几部分：

• 协议部分：该URL的协议部分为“http：”，这代表网页使用的是HTTP协议。在Internet中可以使用多种协议，如HTTP，FTP等等本例中使用的是HTTP协议。在”HTTP”后面的“//”为分隔符

• 域名部分：该URL的域名部分为“www.aspxfans.com”。一个URL中，也可以使用IP地址作为域名使用

• 端口部分：跟在域名后面的是端口，域名和端口之间使用“:”作为分隔符。端口不是一个URL必须的部分，如果省略端口部分，将采用默认端口

• 虚拟目录部分：从域名后的第一个“/”开始到最后一个“/”为止，是虚拟目录部分。虚拟目录也不是一个URL必须的部分。本例中的虚拟目录是“/news/”

• 文件名部分：
  1、从域名后的最后一个“/”开始到“？”为止，是文件名部分，
  2、如果没有“?”,则是从域名后的最后一个“/”开始到“#”为止，是文件部分，
  3、如果没有“？”和“#”，那么从域名后的最后一个“/”开始到结束，都是文件名部分。
  本例中的文件名是“index.asp”。文件名部分也不是一个URL必须的部分，如果省略该部分，则使用默认的文件名

• 参数部分：从“？”开始到“#”为止之间的部分为参数部分，又称搜索部分、查询部分。本例中的参数部分为“boardID=5&ID=24618&page=1”。参数可以允许有多个参数，参数与参数之间用“&”作为分隔符。

• 锚部分：从“#”开始到最后，都是锚部分。本例中的锚部分是“name”。锚部分也不是一个URL必须的部分

想进一步学习URL的朋友可以看阮一峰老师的关于URL编码

请求头部

    HTTP请求头中，既包含预定义的头（如Content-Type、Content-Length等），也支持自定义头。下面同响应消息一起介绍重点的http消息头

想要总体了解一下的朋友，可以点击进去了解了解http消息头大全

请求正文

    当使用GET方法发送请求的时候，请求体是空的

2、响应消息的结构

http/version number | status code | message ----------------------------------------------- Header name 1: value header name 2: value ... ----------------------------------------------- -----------------------------------------------response body(optional)

可以看出，http响应分为三个部分 ：响应行 、 响应头部 、 响应正文

响应行

1、版本号
http版本目前有四个：HTTP0.9 、 HTTP1.0 、HTTP1.1 、 HTTP2

可以查阅上一篇博客：HTTP/0.9-2 协议的历史演变和设计思路

2、状态码
    HTTP状态码主要表示应答的状态。状态码由三位数字组成，第一个数字定义了响应的类别，后面两个数字表示该大状态的一个子状态。
HTTP/1.1中定义了5类状态码

1XX 提示信息类 - 表示请求已被成功接收，继续处理2XX 响应成功类 - 表示请求已被成功接收，理解，接受3XX 重定向类 - 要完成请求必须进行更进一步的处理4XX 客户端错误类 - 请求有语法错误或请求无法实现5XX 服务器端错误类 - 服务器未能实现合法的请求

状态码有很多，比较常见的如下：

200 ok： 最常见的就是成功响应状态码200了， 这表明该请求被成功地完成，所请求的资源发送回客户端。上面打开项目主页的实例中就是200304 not modified： 假如我们打开主页后在浏览器中刷新，就会看到响应的状态码变成了304，这代表之前响应的html文档已经被缓存了，服务器端相同的文档没有变化，可以继续使用缓存的文档，因此304响应没有response body部分302 found： 重定向，新的URL会在response header中的Location中返回，浏览器将会自动使用新的URL发出新的Request，假如我们在登录页提交登录表单发送一个POST请求进行登录，就会得到一个302响应并且重定向到/index路径下404 not found: 请求资源不存在（输错了URL，或者服务器端现在没有这个页面了）500 Internal Server Error： 服务器发生了不可预期的错误，这个一般在会在服务器的程序码出错时发生

若想大局了解下，点击链接 => HTTP状态码大全

3、状态文本

响应头部

由于header，request header和response header中有些域是有对应关系的，因此同请求头部放在这里列出重点一起讲：

– http缓存

1、If-Modified-Since和Last-Modified

//If-Modified-Since的值是浏览器端缓存内容的最后修改时间，属于请求头//Last-Modified的值是服务器端资源的最后修改时间，属于响应头If-Modified-Since: Fir, 02 Dec 2016 17:20:11 GMT & Last-Modified: Fir, 02 Dec 2016 17:20:11 GMT

    If-Modified-Since的值发送到服务器去，服务器会把这个时间与服务器上实际文件的Last-Modified的值进行对比。如果时间一致，那么返回304，客户端就直接使用本地缓存文件。如果时间不一致，就会返回200和新的文件内容。客户端接到之后，会丢弃旧文件，把新文件缓存起来，并显示在浏览器中。

2、If-None-Match和Etag

//Etag是服务器端对于某个资源的某个特定版本的一个标识符//If-None-Match:如果内容未改变返回304代码，参数为服务器先前发送的Etag，与服务器回应的Etag比较判断是否改变If-None-Match: W/"162c-1582aaed638" & Etag: W/"162c-1582aaed638"

    浏览器初次请求某个资源时，服务器http响应头中会添加一个Etag信息，当浏览器再次请求该资源时，会在request header中加入If-None-Match，其值就是之前收到的Etag值，如果服务器验证资源的ETag没有改变（该资源没有更新），将返回一个304状态告诉客户端使用本地缓存文件。否则将返回200状态和新的资源和Etag。

– 客户端相关
1、Accept

//Accept：请求头，规定请求可以接受的媒体类型Accept: text（大类）/html（子类） //代表可以接受的响应内容类型为html

2、Accept-Encoding和Content-Encoding

//Accept-Encoding表示接受的编码方法，通常指定压缩方法，是否支持压缩，支持什么压缩方法，是请求头//Content-Encoding表示WEB服务器表明自己使用了什么压缩方法（gzip，deflate）压缩响应体中的内容，属于响应头Accept-Encoding: gzip, deflate & Content-Encoding: gzip

3、Accept-Language和Content-Language

//Accept-Language 请求接受的语言//Content-Language 响应数据的语言Accept-Language: zh-CN & Content-Language： zh-CN

4、User-Agent

//User-Agent 用户代理，告诉HTTP服务器， 客户端使用的操作系统和浏览器的名称和版本Mozilla/5.0 (Windows NT 10.0; rv:49.0) Gecko/20100101 Firefox/49.0

– Entity头域
1、Content-Type和Content-Length：只用于响应头或者POST请求的请求头

//Content-Type表示请求体或者响应体内容的MIME类型（互联网媒体类型）//Content-Length则表示请求体或者响应体内容的长度，以字节为单位，每个字符都是一个字节。栗子：在这个项目里，输入用户名和密码，提交登录表单会发送一个请求体为用户名和密码的POST请求，服务器返回一个302 found的响应，页面跳转到/index路径下，在fiddler中看请求头和响应头的这两个域分别为://请求头：Content-Type中application代表POST请求体以二进制发送，x-www-form-urlencoded代表是使用HTTP的POST方法提交的表单Content-Type: application/x-www-form-urlencodedContent-Length: 28-----------------------------------------------//响应头Content-Type: text/html; charset=utf-8Content-Length: 56

– Miscellaneous 头域

1、Referer：请求头，提供了Request的上下文信息的服务器，告诉服务器我是从哪个链接过来的

栗子：比如上面登录后跳转到/index路径的请求头中Referer: http://demo-bootstrap-blog.herokuapp.com/。

2、Server：响应头，源服务器处理请求的软件的信息

Server: Cowboy  //Cowboy是Erlang编写的WebServer

3、X-Powered-By：响应头，表示网站是用什么技术开发的

X-Powered-By: Express

– Location头域
1、Location：响应头，指定一个url，重定向到这个url

栗子：还是以前面的登录跳转的302响应为例，Location: /index

– Transport 头域
1、Host：请求头，用于指定被请求资源所在服务器的域名(用于虚拟主机 )和端口号，Web上的一台主机可以存在多个域，有了Host这个请求头就避免了多个域名指向同一个IP地址产生的混淆，而且有了这个域名，在request line部分请求资源的路径就可以用相对路径了。

Host: demo-bootstrap-blog.herokuapp.com，此处使用缺省端口号80

– Cache头域
1、Date：响应头，此条消息被发送时的日期和时间

Date: Tue, 08 Nov 2016 12:44:35 GMT

2、Expires：响应头，指定一个日期/时间，超过该时间则认为此回应已经过期，浏览器会在指定过期时间内使用本地缓存

Expires: Sat, 05 Nov 2016 21:51:32 GMT

响应正文

HTTP协议示例

参考链接
https://bryantsai.com/http-caching/
http://www.imooc.com/article/14397
http://www.imooc.com/article/1851