前端需要了解的HTTP协议

目录

• HTTP协议
  • HTTP概述
  • HTTP之URL
  • HTTP状态码
  • HTTP首部
    • HTTP首部字段
    • HTTP通用首部字段
    • HTTP请求首部字段
  • HTTP工作原理
  • HTTP报文内的HTTP信息
    • HTTP之请求消息Request
    • HTTP之响应Response
  • get请求和post请求
    • get请求
    • post请求
    • post和get请求的区别

HTTP协议

@

HTTP概述

• http协议是用来规定客户端和服务器间通信的报文的格式的；
• 客户端和服务器端通信的内容称为报文；
• 客户端和服务器间通信是基于请求和响应的模式的；客户端给服务器发送请求报文，服务器给客户端返回响应报文；
• 服务器：接收请求返回响应；
  • 请求 request
  • 响应 response
• http客户端和服务器端
  • 客户端发送给服务器的请求就相当于是客户端给服务器写信（请求报文）；
  • 服务器返回的相应就相当于服务器给客户端写回信（响应报文）；
  • http协议就是规定客户端和服务器端传输的协议；

HTTP之URL

• HTTP使用统一资源标识符（Uniform Resource Identifiers, URI）来传输数据和建立连接。URL是一种特殊类型的URI，包含了用于查找某个资源的足够的信息；

• URL,全称是UniformResourceLocator, 中文叫统一资源定位符,是互联网上用来标识某一处资源的地址。

• 以下面这个URL为例，介绍下普通URL的各部分组成：http://www.aspxfans.com:8080/news/index.asp?boardID=5&ID=24618&page=1#name
  • 从上面的URL可以看出，一个完整的URL包括以下几部分：
    • 1.协议部分：该URL的协议部分为“http：”，这代表网页使用的是HTTP协议。在Internet中可以使用多种协议，如HTTP，FTP等等本例中使用的是HTTP协议。在"HTTP"后面的“//”为分隔符;
    • 2.域名部分：该URL的域名部分为“www.aspxfans.com”。一个URL中，也可以使用IP地址作为域名使用;
    • 3.端口部分：跟在域名后面的是端口，域名和端口之间使用“:”作为分隔符。端口不是一个URL必须的部分，如果省略端口部分，将采用默认端口;
    • 4.虚拟目录部分：从域名后的第一个“/”开始到最后一个“/”为止，是虚拟目录部分。虚拟目录也不是一个URL必须的部分。本例中的虚拟目录是“/news/”;
    • 5.文件名部分：从域名后的最后一个“/”开始到“？”为止，是文件名部分，如果没有“?”,则是从域名后的最后一个“/”开始到“#”为止，是文件部分，如果没有“？”和“#”，那么从域名后的最后一个“/”开始到结束，都是文件名部分。本例中的文件名是“index.asp”。文件名部分也不是一个URL必须的部分，如果省略该部分，则使用默认的文件名;
    • 6.锚部分：从“#”开始到最后，都是锚部分。本例中的锚部分是“name”。锚部分也不是一个URL必须的部分;
    • 7.参数部分：从“？”开始到“#”为止之间的部分为参数部分，又称搜索部分、查询部分。本例中的参数部分为“boardID=5&ID=24618&page=1”。参数可以允许有多个参数，参数与参数之间用“&”作为分隔符。

HTTP状态码

• 状态代码有三位数字组成，第一个数字定义了响应的类别，共分五种类别:
  • 1xx：指示信息--表示请求已接收，继续处理
  • 2xx：成功--表示请求已被成功接收、理解、接受
  • 3xx：重定向--要完成请求必须进行更进一步的操作
  • 4xx：客户端错误--请求有语法错误或请求无法实现
  • 5xx：服务器端错误--服务器未能实现合法的请求
• 常见状态码：
  • 200 OK：//客户端请求成功；
  • 400 Bad Request：//客户端请求有语法错误，不能被服务器所理解；
  • 401 Unauthorized ：//请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用 ；
  • 403 Forbidden ： //服务器收到请求，但是拒绝提供服务；
  • 404 Not Found：//请求资源不存在，eg：输入了错误的URL；
  • 500 Internal Server Error ： //服务器发生不可预期的错误；
  • 503 Server Unavailable： //服务器当前不能处理客户端的请求，一段时间后可能恢复正常；

HTTP首部

HTTP首部字段

HTTP通用首部字段

HTTP请求首部字段

• 参考

Header	解释	示例
Accept	指定客户端能够接收的内容类型	Accept: text/plain, text/html
Accept-Charset	浏览器可以接受的字符编码集	Accept-Charset: iso-8859-5
Accept-Encoding	指定浏览器可以支持的web服务器返回内容压缩编码类型。	Accept-Encoding: compress, gzip
Accept-Language	浏览器可接受的语言	Accept-Language: en,zh
Accept-Ranges	可以请求网页实体的一个或者多个子范围字段	Accept-Ranges: bytes
Authorization	HTTP授权的授权证书	Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==
Cache-Control	指定请求和响应遵循的缓存机制	Cache-Control: no-cache
Connection	表示是否需要持久连接。（HTTP 1.1默认进行持久连接）	Connection: close
Cookie	HTTP请求发送时，会把保存在该请求域名下的所有cookie值一起发送给web服务器。	Cookie: $Version=1; Skin=new;
Content-Length	请求的内容长度	Content-Length: 348
Content-Type	请求的与实体对应的MIME信息	Content-Type: application/x-www-form-urlencoded
Date	请求发送的日期和时间	Date: Tue, 15 Nov 2010 08:12:31 GMT
Expect	请求的特定的服务器行为	Expect: 100-continue
From	发出请求的用户的Email	From: user@email.com
Host	指定请求的服务器的域名和端口号	Host: www.zcmhi.com
If-Match	只有请求内容与实体相匹配才有效	If-Match: “737060cd8c284d8af7ad3082f209582d”
If-Modified-Since	如果请求的部分在指定时间之后被修改则请求成功，未被修改则返回304代码	If-Modified-Since: Sat, 29 Oct 2010 19:43:31 GMT
If-None-Match	如果内容未改变返回304代码，参数为服务器先前发送的Etag，与服务器回应的Etag比较判断是否改变	If-None-Match: “737060cd8c284d8af7ad3082f209582d”
If-Range	如果实体未改变，服务器发送客户端丢失的部分，否则发送整个实体。参数也为Etag	If-Range: “737060cd8c284d8af7ad3082f209582d”
If-Unmodified-Since	只在实体在指定时间之后未被修改才请求成功	If-Unmodified-Since: Sat, 29 Oct 2010 19:43:31 GMT
Max-Forwards	限制信息通过代理和网关传送的时间	Max-Forwards: 10
Pragma	用来包含实现特定的指令	Pragma: no-cache
Proxy-Authorization	连接到代理的授权证书 Proxy-Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==
Range	只请求实体的一部分，指定范围	Range: bytes=500-999
Referer	先前网页的地址，当前请求网页紧随其后,即来路	Referer: http://www.zcmhi.com/archives/71.html
TE	客户端愿意接受的传输编码，并通知服务器接受接受尾加头信息	TE: trailers,deflate;q=0.5
Upgrade	向服务器指定某种传输协议以便服务器进行转换（如果支持）	Upgrade: HTTP/2.0, SHTTP/1.3, IRC/6.9, RTA/x11
User-Agent	User-Agent的内容包含发出请求的用户信息	User-Agent: Mozilla/5.0 (Linux; X11)
Via	通知中间网关或代理服务器地址，通信协议	Via: 1.0 fred, 1.1 nowhere.com (Apache/1.1)
Warning	关于消息实体的警告信息	Warn: 199 Miscellaneous warning

HTTP工作原理

• HTTP协议定义Web客户端如何从Web服务器请求Web页面，以及服务器如何把Web页面传送给客户端。

• HTTP协议采用了请求/响应模型。客户端向服务器发送一个请求报文，请求报文包含请求的方法、URL、协议版本、请求头部和请求数据。服务器以一个状态行作为响应，响应的内容包括协议的版本、成功或者错误代码、服务器信息、响应头部和响应数据。

• 以下是 HTTP 请求/响应的步骤：
  • 1、客户端连接到Web服务器：
    • 一个HTTP客户端，通常是浏览器，与Web服务器的HTTP端口（默认为80）建立一个TCP套接字连接。例如，http://www.oakcms.cn。
  • 2、发送HTTP请求：
    • 通过TCP套接字，客户端向Web服务器发送一个文本的请求报文，一个请求报文由请求行、请求头部、空行和请求数据4部分组成。
  • 3、服务器接受请求并返回HTTP响应
    • Web服务器解析请求，定位请求资源。服务器将资源复本写到TCP套接字，由客户端读取。一个响应由状态行、响应头部、空行和响应数据4部分组成。
  • 4、释放连接TCP连接
    • 若connection 模式为close，则服务器主动关闭TCP连接，客户端被动关闭连接，释放TCP连接;若connection 模式为keepalive，则该连接会保持一段时间，在该时间内可以继续接收请求;
  • 5、客户端浏览器解析HTML内容
    • 客户端浏览器首先解析状态行，查看表明请求是否成功的状态代码。然后解析每一个响应头，响应头告知以下为若干字节的HTML文档和文档的字符集。客户端浏览器读取响应数据HTML，根据HTML的语法对其进行格式化，并在浏览器窗口中显示。
• 例如：在浏览器地址栏键入URL，按下回车之后会经历以下流程：
  • 1、浏览器向 DNS 服务器请求解析该 URL 中的域名所对应的 IP 地址;
  • 2、解析出 IP 地址后，根据该 IP 地址和默认端口 80，和服务器建立TCP连接;
  • 3、浏览器发出读取文件(URL 中域名后面部分对应的文件)的HTTP 请求，该请求报文作为 TCP 三次握手的第三个报文的数据发送给服务器;
  • 4、服务器对浏览器请求作出响应，并把对应的 html 文本发送给浏览器;
  • 5、释放 TCP连接;
  • 6、浏览器将该 html 文本并显示内容;

HTTP报文内的HTTP信息

HTTP之请求消息Request

• 客户端发送一个HTTP请求到服务器的请求消息包括以下格式：
  • 请求行（request line）、请求头部（header）、空行和请求数据4个部分组成。
  • 请求行以一个方法符号开头，以空格分开，后面跟着请求的URI和协议的版本。
    
    

请求行

• 请求行由请求方法字段、url字段和HTTP协议版本字段三个字段组成，它们用空格分隔；

例如打开路径http://www.baidu.com/index.php，用火狐浏览器可以查看到请求报文为：
GET /index.php HTTP/1.1
因此用空格分隔之后得到的信息为
    (1)请求方法:  GET
    (2)URL信息:  /index.php
    (3)HTTP协议版本:  HTTP/1.1　　

• 请求方法类型：
  • Get：不适合传送私密的和大量的数据；
  • Post：常用于表单提交；
  • HEAD：查看某个页面的状态，用于测试当前服务器的状态。因为服务端接受到HEAD请求后只返回响应头，不会发送响应内容；
  • PUT：请求服务器存储一个资源，并用Request-URI作为其标识；
  • DELETE：请求服务器删除Request-URI所标识的资源；
  • TRACE：请求服务器回送收到的请求信息，主要用于测试或诊断；
  • CONNECT：保留将来使用；
  • OPTIONS：请求查询服务器的性能，或者查询与资源相关的选项和需求；

HTTP之响应Response

• 一般情况下，服务器接收并处理客户端发过来的请求后会返回一个HTTP的响应消息。
• HTTP响应也由四个部分组成，分别是：状态行、消息报头、空行和响应正文。
  

//响应报文的结构

//响应首行
HTTP/1.1 200 OK
//协议名/协议版本 响应状态码 响应状态码的描述

//响应头
    X-Powered-By: Express
    //服务器提供者;
    Accept-Ranges: bytes
    //允许的单位;
    Cache-Control: public, max-age=0
    //缓存的控制;
    Last-Modified: Fri, 21 Jul 2017 01:21:28 GMT
    //最后的修改时间
    ETag: W/"a6-15d62bc36d6"
    //网页的标识
    Content-Type: text/html; charset=UTF-8
    //响应体的类型;
    Content-Length: 166
    //响应体的大小（字节）;
    Date: Fri, 21 Jul 2017 02:21:47 GMT
    //响应时间;
    Connection: keep-alive
    //连接时间;

/* 空行: 空行用来分隔响应首部和响应体 */

//响应体：响应体就是服务器响应给客户端的主要内容
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>这是我的第一个网站</h1>

</body>
</html>

响应报文组成部分

• 第一部分：状态行，由HTTP协议版本号， 状态码， 状态消息 三部分组成。
• 第二部分：消息报头，用来说明客户端要使用的一些附加信息；
  • Content-Length：表示请求消息正文的长度。对于POST请求来说Content-Length必须出现。
  • Content-Type：表示内容类型，一般是指客户端存在的Content-Type。

  例如：Content-Type: text/html; charset='gb2312'

  • Content-Encoding：WEB服务器表明自己使用了什么压缩方法（gzip，deflate）压缩响应中的对象。

  例如：Content-Encoding：gzip

  • Content-Language：响应体的语言。
• 第三部分：空行，消息报头后面的空行是必须的；

• 第四部分：响应正文，服务器返回给客户端的文本信息。

• 常见的响应状态码：
  • 200响应成功，2开头的都和成功有关；
  • 302请求的重定向（请求的是一个网站，实际跳到了另一个网站），3开头的都和重定向相关；
  • 404页面未找到，4都是客户端的错；
  • 500服务器内部错误，5开头的都是服务器的错；
• HTTP响应体：如果请求的是HTML页面，那么返回的就是HTML代码。如果是JS就是JS代码。
• HTTP响应头：而设置Cookie，缓存等信息就是在响应头属性设置的。

• HTTP响应行：主要是设置响应状态等信息。

get请求和post请求

get请求

• get没有请求体，所以空行也没有意义；
• get请求的结构（没有请求体）
  • 第一部分：请求行，用来说明请求类型,要访
  • 问的资源以及所使用的HTTP版本；
  • 第二部分：请求头部，紧接着请求行（即第一行）之后的部分，用来说明服务器要使用的附加信息；
    • 从第二行起为请求头部，HOST将指出请求的目的地；
    • User-Agent,服务器端和客户端脚本都能访问它,它是浏览器类型检测逻辑的重要基础.该信息由你的浏览器来定义,并且在每个请求中自动发送等等；
  • 第三部分：空行，请求头部后面的空行是必须的；
  • 第四部分：请求数据也叫主体，可以添加任意的其他数据。

  //GET请求没有请求体，所以空行也没有意义
  //get请求的结构：
  GET /index.html?username=sunwukong&password=123123 HTTP/1.1
  /* 请求首行
  *   GET /index.html?username=sunwukong&password=123123 HTTP/1.1
  *   请求方式 资源路径?查询字符串 协议名/协议版本
  *       get请求通过查询字符串发送请求参数 */
  
  //请求头：通过观察发现，请求头实际上就是一个一个的名值对结构，名字和值之间使用:连接，有的是一个名字对应多个值，有的是一个名字对应一个值
      Accept: text/html, application/xhtml+xml, */*
      //客户端可以接受的数据格式：后边跟的都是一个一个的MIME值（数据类型/具体的格式） 
      // */*:表示任意数据
      X-HttpWatch-RID: 24713-10055
      Referer: http://localhost:3000/form.html
      //请求的来源：（广告、防盗链 。。。）
  
      Accept-Language: zh-CN,en-US;q=0.5
      //客户端允许的语言：zh-CN中文简体 zh-TW中文繁体
  
      User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko
      //用户代理（浏览器）：用户系统的信息 可以通过User-Agent来识别用户的系统和浏览器信息
  
      Accept-Encoding: gzip, deflate
      //允许的压缩格式；
  
      Host: localhost:3000
      //主机地址；
  
      DNT: 1
      Connection: Keep-Alive
      //连接时间：当前连接是一个长连接
      //客户端要向服务器发送请求，必须先和服务器建立连接
      Cookie: Webstorm-a34368aa=53546be1-ba52-410f-8e9f-3ed101260bbb  

post请求

• post请求报文的结构
• post和get请求的区别：
  • 1、表单的method属性设置post时发送的是post请求，其余都是get请求。
  • 2、get请求通过url地址发送请求参数；post请求通过请求体发送请求参数；
  • 3、get请求通过url地址发送请求参数，参数在地址栏可见，不太安全；post请求通过请求体发送请求参数，参数在地址栏不可见，相对安全。
  • 4、get请求，url地址的长度限制在255字节内，所以get请求不能发送过多的参数。post请求，长度没有限制。
  • 5、在提交表单时，一般情况下都是用post，不使用get。
• 在以下情况中，请使用 POST 请求：
  • 无法使用缓存文件（更新服务器上的文件或数据库）；
  • 向服务器发送大量数据（POST 没有数据量限制）；
  • 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

  //post请求报文的结构
  
  //请求首行
  POST /index.html HTTP/1.1
  //请求头
      Accept: text/html, application/xhtml+xml, */*
      Referer: http://localhost:3000/form.html
      Accept-Language: zh-CN,en-US;q=0.5
      User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko
      Content-Type: application/x-www-form-urlencoded
      //请求体的数据类型：application/x-www-form-urlencoded 表示请求体会被url编码;
      Accept-Encoding: gzip, deflate
      Host: localhost:3000
      Content-Length: 34
      //请求体的长度（字节）;
      Connection: Keep-Alive
      Cache-Control: no-cache
      //缓存的设置：no-cache不使用缓存;
  
  //请求体
  username=sunwukong&password=123123
  //请求参数，post请求是通过请求体发送请求参数的  
  

post和get请求的区别

基本区别

• 1.表单的method属性设置post时发送的是post请求，其余都是get请求（没有考虑AJAX）；
• 2.get请求通过url地址发送请求参数，post请求通过请求体发送请求参数；
• 3.get请求直接通过url地址发送请求参数，参数在地址栏可见，不太安全；post请求通过请求体发送请求参数，参数在地址栏不可见，相对安全；
• 4.get请求直接通过url地址发送请求参数，url地址的长度限制在255字节内，所以get请求不能发送过多的参数，post请求通过请求体发送参数，长度没有限制。
  • Get方法提交的数据大小长度并没有限制，而是IE浏览器本身对地址栏URL长度有最大长度限制：2048个字符。

• GET 的本质是「得」，而 POST 的本质是「给」。GET 的内容可以被浏览器缓存，而 POST 的数据不可以。

  高级区别

• 1.get产生一个TCP数据包；post产生两个TCP数据包；

• 2.在一次请求中，get一次性完成，post在部分浏览器（除了火狐）需要发送两次信息，所以get比post更快，更有效率。

来源：https://www.cnblogs.com/MTfangzi/p/10694102.html