前端要了解的HTTP知识

悠悠 2021-12-04 01:39 337阅读 0赞

## 网络协议 ##

在互联网中任何的数据传输都是基于协议传输的，网络协议是为计算机网络中进行数据交换而建立的规则、标准或约定的集合。  
常用的划分网络模型的方式：

*  OSI七层模型
 *  TCP/IP四层模型  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70]

## HTTP ##

http是一个应用层协议，它的底层是基于TCP实现的,前端的日常工作中最常接触之一的就是http协议。  
HTTP也叫作超文本传输协议，全称：Hyper Transfer Protocol。最初HTTP只能传输HTML文件，慢慢的现在可以传输文字、图像、视频和各种流文件。

*  无状态的协议，无状态就是客户端的每次请求都没有关系，它们是独立的。
 *  只能是客户端发起请求，服务器响应。服务器不能主动向客户端传递消息。

客户端和服务器端通信的内容称为报文，http协议是规定了客户端和服务器间通信的报文的格式的  
![在这里插入图片描述][20190719143116589.jpg]

#### 1、请求报文 ####

一个HTTP请求报文由四个部分组成：请求行、请求头部、空行、请求数据。

##### 1.1、请求行 request line #####

请求行包含了请求方法、请求资源路径、HTTP协议版本

*  [请求方法（Request Method）][Request Method]：GET，POST，HEAD，PUT，DELETE，CONNECT，OPTIONS，TRACE。常用GET,POST
 *  请求资源路径（request URL）:  
    HTTP使用统一资源标识符（Uniform Resource Identifiers, URI）来传输数据和建立连接。URL统一资源定位符（）是一种特殊类型的URI，用来标识互联网上某一处资源的地址，它包含协议、域名、端口，可能包含虚拟目录、文件名、锚、参数。其中协议，域名，端口一部分不一样，就是[跨域][Link 1]，基于安全考虑，默认情况下浏览器不容许跨域请求。
 *  HTTP协议版本  
    HTTP协议版本有两种：HTTP1.0和HTTP1.1  
    HTTP1.0对于每个连接都只能传送一个请求和响应，请求就会关闭，HTTP1.0没有Host字段;而HTTP1.1在同一个连接中可以传送多个请求和响应，多个请求可以重叠和同时进行，HTTP1.1必须有Host字段。

##### 1.2、请求头部 #####

客户端（如浏览器）向服务器发送请求的时候用请求头来向服务器说明要使用的附加信息。  
大多数请求头并不是必需的，但POST请求必须包含Content-type，Content-type用于说明客户端发送的实体数据的数据类型。

*  **application/x-www-form-urlencoded** POST请求中普通的表单提交默认是通过这种方式。form表单数据被编码为key/value格式发送到服务器。
 *  **application/json** POST请求中用来告诉服务端消息主体是序列化后的 JSON 字符串
 *  **text/xml** POST请求中用来告诉服务端消息主体是xml数据
 *  **multipart/form-data** POST请求中用以支持向服务器发送二进制数据，以便可以在 POST 请求中实现文件上传等功能

下面用google浏览器请求一个html页，通过network来看一下http请求头  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70 1]  
[HTTP请求头与响应头详解][HTTP]

##### 1.3、请求体（请求正文） body #####

请求头和请求正文之间是一个空行，表示请求头已经结束，接下来的是请求体。请求体中可以包含客户提交的查询字符串信息：  
请求体也叫请求正文、请求数据、请求参数，通常来说GET方法的查询字符串（名称/值对）是在 GET 请求的 URL 中发送的，不能携带body。

var xhr=new XMLHttpRequest();
    xhr.open("POST","http://192.168.1.178:8081/1.php",true);
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");   // 用post提交数据,必须指定“Content-Type”头
    xhr.send("id=1&title='标题'");

![在这里插入图片描述][20190718150507520.jpg]  
具体传递什么格式的数据，要看前后端的约定。

#### 2、响应报文 ####

HTTP响应报文也由三部分组成：状态行（响应行）、响应头、响应体

###### 2.1 状态行 ######

![在这里插入图片描述][20190720104829878.jpg]  
状态行也由三部分组成：服务器HTTP协议版本，响应状态码，状态码的文本描述  
状态码：由3位数字组成，第一个数字定义了响应的类别

*  1xx：指示信息，表示请求已接收，继续处理
 *  2xx：成功，表示请求已被成功接受，处理。
 *  3xx：重定向
 *  4xx：客户端错误
 *  5xx：服务器端错误，服务器未能实现合法的请求。

[HTTP状态码详解][HTTP 1]

###### 2.2 响应头 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70 2]  
**常见的HTTP响应头**

<table> 
 <thead> 
  <tr> 
   <th>响应头</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Server</td> 
   <td>使用的服务器名称，如Server:Apache/1.3.6(Unix)</td> 
  </tr> 
  <tr> 
   <td>Content-Type</td> 
   <td>用来指明发送给接收者的实体正文的媒体类型，如Content-Type:text/html;charset=GBK</td> 
  </tr> 
  <tr> 
   <td>Content-Encoding</td> 
   <td>与请求报头Accept-Encoding对应，告诉浏览器服务端采用的是什么压缩编码</td> 
  </tr> 
  <tr> 
   <td>Content-Language</td> 
   <td>描述了资源使用的自然语言，与Accept-Language对应</td> 
  </tr> 
  <tr> 
   <td>Content-Length</td> 
   <td>指明实体正文的长度，用以字节方式存储的十进制数字来表示</td> 
  </tr> 
  <tr> 
   <td>Keep-Alive</td> 
   <td>保持连接的时间，如Keep-Alive:timerout=5,max=120</td> 
  </tr> 
  <tr> 
   <td>Location</td> 
   <td>指明浏览器跳到哪里</td> 
  </tr> 
  <tr> 
   <td>Refresh</td> 
   <td>指明浏览器定时刷新</td> 
  </tr> 
  <tr> 
   <td>Transfer-Encoding</td> 
   <td>告诉浏览器数据是以分块方式回送的</td> 
  </tr> 
  <tr> 
   <td>Expires</td> 
   <td>服务器通过这个头告诉浏览器把回送的资源缓存多长时间 -1 控制浏览器不要缓存</td> 
  </tr> 
  <tr> 
   <td>Cache-Control</td> 
   <td>no-cache,告知浏览器是不会缓存的</td> 
  </tr> 
 </tbody> 
</table>

HTTP请求头与响应头详解

###### 2.1 响应体（响应数据） ######

响应体的内容就是我们要得到的数据，把响应数据传送到浏览器上的时候，浏览器必须启动适当的应用程序来处理这个输出文档。这可以通过多种类型MIME（多功能网际邮件扩充协议）来完成。

[MIME类型是什么？包含哪些类型？][MIME]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70]: /images/20211203/6e8611a628b54ebebb40791da55f4cba.png
[20190719143116589.jpg]: /images/20211203/426e152d1e2f4b26ad82edfb35a3d603.png
[Request Method]: https://blog.csdn.net/dreamingbaobei3/article/details/95938517
[Link 1]: https://blog.csdn.net/dreamingbaobei3/article/details/96289941
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70 1]: /images/20211203/277f45d8adac4dcc83a411aee285f57b.png
[HTTP]: https://blog.csdn.net/dreamingbaobei3/article/details/96291465
[20190718150507520.jpg]: /images/20211203/8b03dcca225b42eeb11b7765b7d441fb.png
[20190720104829878.jpg]: /images/20211203/e7f417b0fcd745708c0518886e6430d9.png
[HTTP 1]: https://blog.csdn.net/dreamingbaobei3/article/details/96571336
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70 2]: /images/20211203/6b4ca9f10750414689b5b1270329336c.png
[MIME]: https://blog.csdn.net/dreamingbaobei3/article/details/96484022