【计算机网络之HTTP篇】HTTP协议详解

港控/mmm° 2023-09-28 00:18 112阅读 0赞

**目录**

一、HTTP协议概念

二、HTTP 协议格式

三、HTTP请求详解

认识URL

认识HTTP方法

GET

POST

Host

Content-Length

Content-Type

User-Agent (简称 UA)

Referer

四、HTTP 响应详解

状态码

200 OK

404 Not Found

403 Forbidden

500 Internal Server Error

504 Gateway Timeout

302 Move temporarily

301 Moved Permanently

HTTP状态码总结

报头

通过 form 表单构造 HTTP 请求

--------------------

## 一、HTTP协议概念 ##

HTTP协议是应用层上的协议，HTTP协议叫做超文本传输协议。

> 所谓  " 超文本 "  的含义 ,  就是传输的内容不仅仅是文本 ( 比如  html, css  这个就是文本 ),  还可以是一些 其他的资源,  比如图片 ,  视频 ,  音频等二进制的数据

我们在输入网站在浏览网页时，就是使用HTTP协议来进行数据传输的。

当我们在浏览器中输入一个 " 网址 " (URL)  时 ,  浏览器就给服务器发送了一个  HTTP  请求,  服务器返回了一个  HTTP  响应 . 这个响应结果被浏览器解析之后,  就展示成我们看到的页面内容 . ( 这个过程中浏览器可能会给服务器发多个 HTTP  请求 ,  服务器会对应返回多个响应 ,  这些响应里就包含了页面  HTML, CSS, JavaScript,  图片 , 字体等信息).

当我们在浏览器界面输入一个URL到浏览器界面加载画面这期间具体发生了细节可以参考我的这篇文章：[输入网址url到网页显示，期间发生了什么？][url]

## **二、HTTP 协议格式** ##

HTTP 是一个文本格式的协议. 可以通过Fiddler 抓包工具来分析 HTTP 请求/响应的细节

Fiddler 抓包工具的原理就相当于一个"代理"，当我们在浏览器中输入一个网址时，会生成HTTP请求发送给代理，然后代理再把这个HTTP请求发送给服务器，服务器在收到请求后会生成一个HTTP响应，代理收到响应后再发送给浏览器。

![c7b7c7d4533d41c9b7b86bdd7b365898.png][]

**Fiddler 抓包工具下载地址：[https://www.telerik.com/fiddler][https_www.telerik.com_fiddler]**

![91904bfe17c54e598431fc880133d11d.png][]

首次使用，需要开启 https（当前网络上主要的协议是 https，很少直接使用 http）

![90551374139944879001418c6c509729.png][]![d57c50e5f17e4543a7cd33bb9559125f.png][]

接下来就使用Fiddler来进行抓包使用

![6c0f6f089f0746b69209cd51720c8ca1.png][]

![3869fed42ee043fa8f3e6dd4e5654313.png][]

**协议格式总结**

![efb08f56893d4c01a43aafd854352656.png][]

> 因为  HTTP  协议并没有规定报头部分的键值对有多少个 .  空行就相当于是  " 报头的结束标记 ",  或者是 " 报头和正文之间的分隔符 "。

**HTTP请求协议格式：**

> **请求行：**
> 
> 1）Method:HTTP的方法，大部分是GET和POST方法，获取资源和传输主体
> 
> 2）URL：输入的网址
> 
> 3）Version:使用的http协议的版本号，如HTTP/ 1.1
> 
> **请求报头(header)**
> 
> key:value 为键值对，键值对的个数不限制
> 
> **空行**
> 
> 空行为请求报头的结束标志
> 
> **请求正文(body)**
> 
> 空行后面的内容都是Body. Body 允许为空字符串 .  如果 Body 存在 ,  则在 Header 中会有一个Content-Length 属性来标识 Body 的长度 ;  如果服务器返回了一个 html 页面 ,  那么 html 页面内容就是在body 中 .

![32f1dc036183460d86c5eac31897fc5b.png][]

**HTTP响应协议格式：**

> **状态行：**
> 
> 1）Version:使用的HTTP协议的版本号，如HTTP/ 1.1
> 
> 2）状态码：**200 OK** 这是一个最常见的状态码, 表示访问成功，还有其他状态码：
> 
> **404 Not Found、403 Forbidden** （访问被拒绝）等等
> 
> **响应报头**
> 
> key:value 为键值对，键值对的个数不限制
> 
> **空行**
> 
> 空行为请求报头的结束标志
> 
> **请求正文**
> 
> 空行后面的内容都是body.就是服务器返回给客户端的具体数据。内容可能有各种格式，最常见的就是 HTML。

**HTTP请求的抓包如下：**

![7f715623541640c790c64f22dcc83092.png][]

**HTTP响应的抓包如下：**

![9d3d12b395124c0bbc0c7db0fc877dbb.png][]

## 三、HTTP请求详解 ##

### 认识URL ###

我们在浏览器中输入的网址就相当于是一个URL，URL的组成如下：

![bd43a6325a2342b79bcaf47b593595f0.png][]

###  ###

### 认识HTTP方法 ###

![78be8cbc37644ead98a236584612d113.png][]

### GET ###

GET是HTTP协议最常用的方法，用于获取服务器上的资源，在浏览器中直接输入 URL, 此时浏览器就会发送出一个 GET 请求。

### POST ###

POST  方法也是一种常见的方法 .  多用于提交用户输入的数据给服务器 ( 例如登陆页面 ). 通过 HTML  中的  form  标签可以构造  POST  请求 ,  或者使用  JavaScript  的  ajax  也可以构造  POST  请求 .

> **经典面试题：GET和POST的区别**
> 
> 1) **GET一般用于获取服务器的某一资源**(也就是进行查询操作)，**POST一般适用于提交数据给服务器**（进行修改、删除和更新操作）
> 
> 2) **GET 和 POST 的参数传递也是不同的，GET 请求是将参数拼加到 URL 上进行参数传递的，而 POST 是将参数写入到请求正文中传递的**
> 
> 3）GET 请求一般是幂等的, POST 请求一般是不幂等的. (如果多次请求得到的结果一样, 就视为请求是幂等的).
> 
> 4）GET可以被本地缓存，而POST不能被本地缓存
> 
> 5) GET 请求的参数会保存在历史记录中，而 POST 请求的参数不会保留到历史记录中。

### **Host**  ###

表示浏览器这个请求要访问的**服务器的地址和端口**

![d60ef733ca8248719f664ae7942bbb2d.png][]

大多数情况下，Host 中的值和 URL 中的域名是一致的；但是如果当我们访问的服务器不是直接访问，而是通过”代理“来访问的，此时 Host 和 URL 可能就不一致了（相当于 Host 是最终目标，URL是当前目标）。因此在这里 Host写一遍去确认访问的服务器是什么

###  ###

### **Content-Length** ###

表示body的长度：空格后面都是body部分

![f41386b3b81b4423ad4424bc5362a6bb.png][]

###  ###

### **Content-Type**  ###

表示请求的  body  中的数据格式 .

![a0108d46fb4e44d4a78cfdd226eb1edc.png][]

### **User-Agent (****简称** **UA)**  ###

表示当前的设备是电脑还是手机

![d72ffe4cd8bb4573ad41ae36c148da9c.png][]

###  ###

### **Referer**  ###

表示当前页面是从哪个页面跳转过来的。如果直接在浏览器中输入 URL,  或者直接通过收藏夹访问页面时是没有  Referer  的 .

![f86b823cd4ec46798747d78fc4d5c49e.png][]

### Cookie ###

Cookie 中存储了一个字符串, 这个数据可能是客户端(网页)自行通过 JS 写入的, 也可能来自于服务器(服务器在 HTTP 响应的 header 中通过 Set-Cookie 字段给浏览器返回数据)。往往可以通过这个字段实现 "身份标识" 的功能。

Cookie是当浏览器第一次访问服务器时，服务器返回响应给浏览器的同时也附带cookie给浏览器。这样浏览器下一次再访问服务器时，带着这个cookie，此时服务器就会自动识别浏览器的身份。 Cookie一般是保存在浏览器本地上。在服务器上会保存着Session。

## **四、HTTP** **响应详解** ##

###  ###

### 状态码 ###

状态码表示访问一个页面的结果 . ( 是访问成功 ,  还是失败 ,  还是其他的一些情况 ...).

以下为常见的状态码

#### **200 OK**  ####

这是一个最常见的状态码 ,  表示访问成功

#### **404 Not Found**  ####

找不到资源，当在浏览器输入一个 URL, 目的就是为了访问对方服务器上的一个资源. 如果这个 URL 标识的资源不存在, 那么就会出现 404

#### **403 Forbidden** ####

表示访问被拒绝，即没有权限访问服务器的某一个资源

#### **500 Internal Server Error**  ####

服务器出现内部错误。 一般是服务器的代码执行过程中遇到了一些特殊情况 ( 服务器异常崩溃 ) 会产生这个状态码

#### **504 Gateway Timeout**  ####

服务器响应超时。

#### **302 Move temporarily** ####

临时重定向。

> 就相当于手机号码中的  " 呼叫转移 "  功能 . 
> 
> 比如我本来的手机号是  186-1234-5678,  后来换了个新号码  135-1234-5678,  那么不需要让我的朋友知道新号码, 只要我去办理一个呼叫转移业务,  其他人拨打  186-1234-5678 ,  就会自动转移到  135-1234-5678 上.

在登陆页面中经常会见到  302.  用于实现登陆成功后自动跳转到主页 .

#### **301 Moved Permanently**  ####

永久重定向 .  当浏览器收到这种响应时 ,  后续的请求都会被自动改成新的地址 .

### HTTP状态码总结 ###

> **高频面试题：**
> 
> **五大类THHP常见状态码**
> 
> <table style="width:600px;"> 
>  <tbody> 
>   <tr> 
>    <td style="width:88px;">1xx</td> 
>    <td style="width:371px;">提示信息，接收请求正在处理</td> 
>    <td></td> 
>   </tr> 
>   <tr> 
>    <td style="width:88px;"><span style="color:#511b78;"><strong>2xx</strong></span></td> 
>    <td style="width:371px;"><span style="color:#fe2c24;">成功，报文已经收到并被正确处理</span></td> 
>    <td><span style="color:#fe2c24;">200、204、206</span></td> 
>   </tr> 
>   <tr> 
>    <td style="width:88px;"><span style="color:#511b78;"><strong>3xx</strong></span></td> 
>    <td style="width:371px;"><span style="color:#fe2c24;">重定向，资源位置发生变动，需要客户端重新发送请求</span></td> 
>    <td><span style="color:#fe2c24;">301、302、304</span></td> 
>   </tr> 
>   <tr> 
>    <td style="width:88px;"><span style="color:#511b78;"><strong>4xx</strong></span></td> 
>    <td style="width:371px;"><span style="color:#fe2c24;">客户端错误，请求报文有误，服务器无法处理</span></td> 
>    <td><span style="color:#fe2c24;">400、403、404</span></td> 
>   </tr> 
>   <tr> 
>    <td style="width:88px;"><span style="color:#511b78;"><strong>5xx</strong></span></td> 
>    <td style="width:371px;"><span style="color:#fe2c24;">服务器错误，服务器在处理请求时内部发生了错误</span></td> 
>    <td><span style="color:#fe2c24;">500、501、502、503</span></td> 
>   </tr> 
>  </tbody> 
> </table>

### 报头 ###

响应报头的格式和请求报头的格式基本一致。像 Content-Type , Content-Length 等属性的含义也和请求中的含义一致。不过响应的 Content-Type 常见取值有这几种：

1.  text/html : body 数据格式是 HTML
2.  text/css : body 数据格式是 CSS
3.  application/javascript : body 数据格式是 JavaScript
4.  application/json : body 数据格式是 JSON

###  ###

### **通过** **form** **表单构造** **HTTP** **请求** ###

form (表单) 是 HTML 中的一个常用标签. 可以用于给服务器发送 GET 或者 POST 请求.

> form  的重要参数 : 
> 
> action:  构造的  HTTP  请求的  URL  是什么 . 
> 
> method:  构造的  HTTP  请求的 方法 是  GET  还是  POST (form  只支持  GET  和  POST). 
> 
> input  的重要参数 : 
> 
> type:  表示输入框的类型 . text  表示文本 , password  表示密码 , submit  表示提交按钮 . 
> 
> name:  表示构造的  HTTP  请求的  query string  的  key. query string  的  value  是输入框用户的
> 
> 输入的内容 . 
> 
> value: input  标签的值 .  对于  type  为  submit  类型来说 , value  就对应了按钮上显示的文本 .

![87e77375b2ca4b6398d82356a7864881.png][]

![6f9f6dc5e043486a86c5496c766064cb.png][]

抓包如下：

![9b0830c37671437e86ff38014f518ddc.png][]

> **form** **代码和** **HTTP** **请求之间的对应关系** 
> 
>  *  form 的 action 属性对应 HTTP 请求的 URL 
>  *  form 的 method 属性对应 HTTP 请求的方法 
>  *  input 的 name 属性对应 query string 的 key 
>  *  input 的 内容 对应 query string 的 value

[url]: https://blog.csdn.net/qq_73471456/article/details/130365326?spm=1001.2014.3001.5501
[c7b7c7d4533d41c9b7b86bdd7b365898.png]: https://img-blog.csdnimg.cn/c7b7c7d4533d41c9b7b86bdd7b365898.png
[https_www.telerik.com_fiddler]: https://www.telerik.com/fiddler
[91904bfe17c54e598431fc880133d11d.png]: https://img-blog.csdnimg.cn/91904bfe17c54e598431fc880133d11d.png
[90551374139944879001418c6c509729.png]: https://img-blog.csdnimg.cn/90551374139944879001418c6c509729.png
[d57c50e5f17e4543a7cd33bb9559125f.png]: https://img-blog.csdnimg.cn/d57c50e5f17e4543a7cd33bb9559125f.png
[6c0f6f089f0746b69209cd51720c8ca1.png]: https://img-blog.csdnimg.cn/6c0f6f089f0746b69209cd51720c8ca1.png
[3869fed42ee043fa8f3e6dd4e5654313.png]: https://img-blog.csdnimg.cn/3869fed42ee043fa8f3e6dd4e5654313.png
[efb08f56893d4c01a43aafd854352656.png]: https://img-blog.csdnimg.cn/efb08f56893d4c01a43aafd854352656.png
[32f1dc036183460d86c5eac31897fc5b.png]: https://img-blog.csdnimg.cn/32f1dc036183460d86c5eac31897fc5b.png
[7f715623541640c790c64f22dcc83092.png]: https://img-blog.csdnimg.cn/7f715623541640c790c64f22dcc83092.png
[9d3d12b395124c0bbc0c7db0fc877dbb.png]: https://img-blog.csdnimg.cn/9d3d12b395124c0bbc0c7db0fc877dbb.png
[bd43a6325a2342b79bcaf47b593595f0.png]: https://img-blog.csdnimg.cn/bd43a6325a2342b79bcaf47b593595f0.png
[78be8cbc37644ead98a236584612d113.png]: https://img-blog.csdnimg.cn/78be8cbc37644ead98a236584612d113.png
[d60ef733ca8248719f664ae7942bbb2d.png]: https://img-blog.csdnimg.cn/d60ef733ca8248719f664ae7942bbb2d.png
[f41386b3b81b4423ad4424bc5362a6bb.png]: https://img-blog.csdnimg.cn/f41386b3b81b4423ad4424bc5362a6bb.png
[a0108d46fb4e44d4a78cfdd226eb1edc.png]: https://img-blog.csdnimg.cn/a0108d46fb4e44d4a78cfdd226eb1edc.png
[d72ffe4cd8bb4573ad41ae36c148da9c.png]: https://img-blog.csdnimg.cn/d72ffe4cd8bb4573ad41ae36c148da9c.png
[f86b823cd4ec46798747d78fc4d5c49e.png]: https://img-blog.csdnimg.cn/f86b823cd4ec46798747d78fc4d5c49e.png
[87e77375b2ca4b6398d82356a7864881.png]: https://img-blog.csdnimg.cn/87e77375b2ca4b6398d82356a7864881.png
[6f9f6dc5e043486a86c5496c766064cb.png]: https://img-blog.csdnimg.cn/6f9f6dc5e043486a86c5496c766064cb.png
[9b0830c37671437e86ff38014f518ddc.png]: https://img-blog.csdnimg.cn/9b0830c37671437e86ff38014f518ddc.png