网络请求HTTP协议

小灰灰 2023-09-28 13:41 26阅读 0赞

#### 文章目录 ####

*   *  1.前后端分离优势
     *  2.HTTP协议的解析
     *   *  2.1 HTTP的介绍
         *  2.2 HTTP的组成
         *  2.3 HTTP的版本
         *  2.4 HTTP请求方式
         *  2.5 HTTP请求头字段
         *  2.6 HTTP响应状态码
         *  2.7 HTTP响应头

### 1.前后端分离优势 ###

**早期的网页都是通过后端渲染来完成的：服务器端渲染（SSR，server side render）**：

*  客户端发出请求 -> 服务端接收请求并返回相应HTML文档 -> 页面刷新，客户端加载新的HTML文档；

**服务器端渲染的缺点：**

*  当用户点击页面中的某个按钮向服务器发送请求时，页面本质上只是一些数据发生了变化，而此时服务器却要将重绘的整个页面再返回给浏览器加载，这显然有悖于程序员的“DRY（ Don‘t repeat yourself ）”原则；
 *  而且明明只是一些数据的变化却迫使服务器要返回整个HTML文档，这本身也会给网络带宽带来不必要的开销。

**有没有办法在页面数据变动时，只向服务器请求新的数据，并且在阻止页面刷新的情况下，动态的替换页面中展示的数据呢？**

*  答案正是“AJAX”。

**AJAX是“Asynchronous JavaScript And XML”的缩写(异步的JavaScript和XML)，是一种实现无页面刷新获取服务器数据的技术。**

*  AJAX最吸引人的就是它的“异步”特性，也就是说它可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。

**你可以使用AJAX最主要的两个特性做下列事** :

*  在不重新加载页面的情况下发送请求给服务器；
 *  接受并使用从服务器发来的数据。

**这里有两幅图给大家理解一下**:

1.  **服务器端渲染**

![在这里插入图片描述][9141e6df1dfa429aa6a61bb88f50237f.png_pic_center]

1.  **前后端分离**

![在这里插入图片描述][7ce6f89cf42b40acaea89b0ea8a52360.png_pic_center]

### 2.HTTP协议的解析 ###

#### 2.1 HTTP的介绍 ####

**什么是HTTP呢？我们来看一下维基百科的解释**：

*  超文本传输协议（英语：HyperText Transfer Protocol，缩写：HTTP）是一种用于分布式、协作式和超媒体信息系统的应用层协议；
 *  HTTP是万维网的数据通信的基础，设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法；
 *  通过HTTP或者HTTPS协议请求的资源由统一资源标识符（Uniform Resource Identifiers，URI）来标识；

**HTTP是一个客户端（用户）和服务端（网站）之间请求和响应的标准**。

通过使用网页浏览器、网络爬虫或者其它的工具，客户端发起一个HTTP请求到服务器上指定端口（默认端口为80）；

*  我们称这个客户端为用户代理程序（user agent）；

响应的服务器上存储着一些资源，比如HTML文件和图像。

*  我们也称这个响应服务器为源服务器（origin server）；

**我们网页中的资源通常是被放在Web资源服务器中，由浏览器自动发送HTTP请求来获取、解析、展示的。**

**目前我们页面中很多数据是动态展示的**：

*  比如页面中的数据展示、搜索数据、表单验证等等，也是通过在JavaScript中发送HTTP请求获取的；

#### 2.2 HTTP的组成 ####

**一次HTTP请求主要包括：请求（Request）和响应（Response）**(如下图所示)

![在这里插入图片描述][7944064f366d410cb77098ba1d913c39.png_pic_center]

**请求又包含请求行、请求头、请求体** (如下图所示)

![在这里插入图片描述][c475c41a3831484d9e9742dc61723f7f.png_pic_center]

**响应也包含响应行、响应头、响应体** (如下图所示)

![在这里插入图片描述][28abf4a72bd84d8584122e7c7d379547.png_pic_center]

#### 2.3 HTTP的版本 ####

**HTTP/0.9**

*  发布于1991年；
 *  只支持GET请求方法获取文本数据，当时主要是为了获取HTML页面内容；

**HTTP/1.0**

*  发布于1996年；
 *  支持POST、HEAD等请求方法，支持请求头、响应头等，支持更多种数据类型(不再局限于文本数据) ；
 *  但是浏览器的每次请求都需要与服务器建立一个TCP连接，请求处理完成后立即断开TCP连接，每次建立连接增加了性能损耗；

**HTTP/1.1(目前使用最广泛的版本)**

*  发布于1997年；
 *  增加了PUT、DELETE等请求方法；
 *  采用持久连接(Connection: keep-alive)，多个请求可以共用同一个TCP连接；

**HTTP/2.0, 2015年**

**HTTP/3.0, 2018年**

#### 2.4 HTTP请求方式 ####

**在RFC中定义了一组请求方式，来表示要对给定资源执行的操作**：

*  GET：GET 方法请求一个指定资源的表示形式，使用 GET 的请求应该只被用于获取数据。
 *  HEAD：HEAD 方法请求一个与 GET 请求的响应相同的响应，但没有响应体。
    
    比如在准备下载一个文件前，先获取文件的大小，再决定是否进行下载；
 *  POST：POST 方法用于将实体提交到指定的资源。
 *  PUT：PUT 方法用请求有效载荷（payload）替换目标资源的所有当前表示；
 *  DELETE：DELETE 方法删除指定的资源；
 *  PATCH：PATCH 方法用于对资源应部分修改；
 *  CONNECT：CONNECT 方法建立一个到目标资源标识的服务器的隧道，通常用在代理服务器，网页开发很少用到。
 *  TRACE：TRACE 方法沿着到目标资源的路径执行一个消息环回测试。

**在开发中使用最多的是GET、POST请求**；

*  **在后续的后台管理项目中，我们也会使用PATCH、DELETE请求**；

#### 2.5 HTTP请求头字段 ####

**在request对象的header中也包含很多有用的信息，客户端会默认传递过来一些信息(如下)** :

![在这里插入图片描述][16f3b779061a4eb490d2271e7497eef8.png_pic_center]

**content-type: 这次请求携带的数据的类型**

*  application/x-www-form-urlencoded：表示数据被编码成以 ‘&’ 分隔的键 - 值对，同时以 ‘=’ 分隔键和值
 *  application/json：表示是一个json类型；
 *  text/plain：表示是文本类型；
 *  application/xml：表示是xml类型；
 *  multipart/form-data：表示是上传文件；

**content-length：文件的大小长度**

**keep-alive** :

*  http是基于TCP协议的，但是通常在进行一次请求和响应结束后会立刻中断；
 *  在http1.0中，如果想要继续保持连接：
    
     *  浏览器需要在请求头中添加 connection: keep-alive；
     *  服务器需要在响应头中添加 connection:keey-alive；
     *  当客户端再次放请求时，就会使用同一个连接，直接一方中断连接；
 *  在http1.1中，所有连接默认是 connection: keep-alive的；
    
     *  不同的Web服务器会有不同的保持 keep-alive的时间；
     *  Node中默认是5s中；

**accept-encoding：告知服务器，客户端支持的文件压缩格式，比如js文件可以使用gzip编码，对应 .gz文件；**

**accept：告知服务器，客户端可接受文件的格式类型；**

**user-agent：客户端相关的信息；**

#### 2.6 HTTP响应状态码 ####

**Http状态码（Http Status Code）是用来表示Http响应状态的数字代码**：

*  Http状态码非常多，可以根据不同的情况，给客户端返回不同的状态码；

<table> 
 <thead> 
  <tr> 
   <th>常见HTTP状态码</th> 
   <th>状态描述</th> 
   <th>信息说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>200</td> 
   <td>OK</td> 
   <td>客户端请求成功</td> 
  </tr> 
  <tr> 
   <td>201</td> 
   <td>Created</td> 
   <td>POST请求，创建新的资源</td> 
  </tr> 
  <tr> 
   <td>301</td> 
   <td>Moved Permanently</td> 
   <td>请求资源的URL已经修改，响应中会给出新的URL</td> 
  </tr> 
  <tr> 
   <td>400</td> 
   <td>Bad Request</td> 
   <td>客户端的错误，服务器无法或者不进行处理</td> 
  </tr> 
  <tr> 
   <td>401</td> 
   <td>Unauthorized</td> 
   <td>未授权的错误，必须携带请求的身份信息</td> 
  </tr> 
  <tr> 
   <td>403</td> 
   <td>Forbidden</td> 
   <td>客户端没有权限访问，被拒接</td> 
  </tr> 
  <tr> 
   <td>404</td> 
   <td>Not Found</td> 
   <td>服务器找不到请求的资源。</td> 
  </tr> 
  <tr> 
   <td>500</td> 
   <td>Internal Server Error</td> 
   <td>服务器遇到了不知道如何处理的情况。</td> 
  </tr> 
  <tr> 
   <td>503</td> 
   <td>Service Unavailable</td> 
   <td>服务器不可用，可能处理维护或者重载状态，暂时无法访问</td> 
  </tr> 
 </tbody> 
</table>

更多响应码介绍在MDN文档上, 链接给到大家: [MDN上响应码文档][MDN]: https://developer.mozilla.org/zh-CN/docs/web/http/status

#### 2.7 HTTP响应头 ####

**响应的header中包括一些服务器给客户端的信息**：

![在这里插入图片描述][ed8d6cbf48cb48bfac3357a9348a5f4d.png_pic_center]

[9141e6df1dfa429aa6a61bb88f50237f.png_pic_center]: https://img-blog.csdnimg.cn/9141e6df1dfa429aa6a61bb88f50237f.png#pic_center
[7ce6f89cf42b40acaea89b0ea8a52360.png_pic_center]: https://img-blog.csdnimg.cn/7ce6f89cf42b40acaea89b0ea8a52360.png#pic_center
[7944064f366d410cb77098ba1d913c39.png_pic_center]: https://img-blog.csdnimg.cn/7944064f366d410cb77098ba1d913c39.png#pic_center
[c475c41a3831484d9e9742dc61723f7f.png_pic_center]: https://img-blog.csdnimg.cn/c475c41a3831484d9e9742dc61723f7f.png#pic_center
[28abf4a72bd84d8584122e7c7d379547.png_pic_center]: https://img-blog.csdnimg.cn/28abf4a72bd84d8584122e7c7d379547.png#pic_center
[16f3b779061a4eb490d2271e7497eef8.png_pic_center]: https://img-blog.csdnimg.cn/16f3b779061a4eb490d2271e7497eef8.png#pic_center
[MDN]: https://developer.mozilla.org/zh-CN/docs/web/http/status
[ed8d6cbf48cb48bfac3357a9348a5f4d.png_pic_center]: https://img-blog.csdnimg.cn/ed8d6cbf48cb48bfac3357a9348a5f4d.png#pic_center