前端需要了解的http协议

最新推荐文章于 2024-05-15 02:27:10 发布

木头房子的格子铺

最新推荐文章于 2024-05-15 02:27:10 发布

阅读量2.1k

点赞数 16

分类专栏：和前端相关IT知识文章标签： http协议 HTTP 前端工程师

本文链接：https://blog.csdn.net/mutouafangzi/article/details/89099119

版权

和前端相关IT知识专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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更快，更有效率。

木头房子的格子铺

关注

16
点赞
踩
44

收藏

觉得还不错? 一键收藏
0
评论
前端需要了解的http协议

HTTP协议HTTP概述http协议是用来规定客户端和服务器间通信的报文的格式的；客户端和服务器端通信的内容称为报文；客户端和服务器间通信是基于请求和响应的模式的；客户端给服务器发送请求报文，服务器给客户端返回响应报文；服务器：接收请求返回响应；请求 request响应 responsehttp客户端和服务器端客户端发送给服务器的请求就相当于是客户端给服务器写信（请求报...
复制链接

扫一扫