前端面试——讲讲HTTP?

Bertha 。 2022-11-14 14:49 148阅读 0赞

> 回答要有逻辑侧重点，避免八股文背书！

####  ####

本文内容概要：
    	1：什么是HTTP?  
    	2：HTTP怎样进行传输？
    	3：HTTP请求报文格式？
    	4：HTTP响应报文格式？
    	5：HTTP请求方法？
    	6：HTTP响应状态码？
    	7：扩展：URL结构基本认识以及各部分的的含义..
    	8：常用表格汇总：HTTP响应状态码大全、HTTP请求头信息大全、HTTP响应头参数大全...

**1. 什么是HTTP?**

1:HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写
    2:字面意思理解：就是服务器传输超文本到本地浏览器的一种传送协议。
    3:HTTP是一个基于TCP/IP通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）。

> **总结性的一句话**：HTTP 是基于 TCP/IP 协议的**应用层**协议。它不涉及数据包（packet）传输，主要规定了**客户端和服务器**之间的通信格式，默认使用80端口。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70]

**2. 怎样的传输方式？**

1:浏览器作为客户端，通过URL向web服务器发送请求，再响应客户端。
    2：HTTP使用统一资源标识符（Uniform Resource Identifiers, URI）来传输数据和建立连接。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 1]  
3. HTTP**请求报文**格式?

> 客户端发送一个HTTP请求到服务器的请求消息包括以下格式：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 2]

1：请求行：
    	1：通常会放请求方法、url地址、http版本
    2：请求头：
    	总：报文头包含若干个属性，格式为“属性名:属性值”，服务端据此获取客户端的信息。
    	1:请求头用于说明是谁或什么在发送请求、请求源于何处，或者客户端的喜好及能力。
    	2:服务器可以根据请求头部给出的客户端信息，试着为客户端提供更好的响应。
    	3:请求头域可能包含下列字段Accept、Accept-Charset、Accept- Encoding、Accept-Language等。
    	4：对请求头域的扩展要求通讯双方都支持，如果存在不支持的请求头域，一般将会作为实体头域处理。
    3：请求数据（请求体）
    	1：也称报文体，它将一个页面表单中的组件值通过param1=value1&param2=value2的键值对形式编码成一个格式化串，它承载多个请求参数的数据。
    	2：不但报文体可以传递请求参数，请求URL也可以通过类似于“/chapter15/user.html? param1=value1&param2=value2”的方式传递请求参数。
    	参考链接：https://www.jianshu.com/p/eb3e5ec98a66

> HTTP请求报文格式示例如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 3]

> 对于请求方法：  
> 根据 HTTP 标准，HTTP 请求可以使用多种请求方法。  
> HTTP1.0 定义了三种请求方法： GET, POST 和 HEAD方法。  
> HTTP1.1 新增了六种请求方法：OPTIONS、PUT、PATCH、DELETE、TRACE 和 CONNECT 方法。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 4]

1.  HTTP**响应报文**格式?

1：响应行
    	存放协议以及版本、状态码以及状态描述
    2：响应头（了解知道几个关键的即可，例如content-type）
    	1：响应头向客户端提供一些额外信息，比如谁在发送响应、响应者的功能，甚至与响应相关的一些特殊指令。
    	2：这些头部有助于客户端处理响应，并在将来发起更好的请求。
    	3：响应头域包含Age、Location、Proxy-Authenticate、Public、Retry- After、Server等
    	4：对响应头域的扩展要求通讯双方都支持，如果存在不支持的响应头域，一般将会作为实体头域处理。
    3：响应空行
    4：响应体：
    	1：即我们十分关注的信息。
    	2：放置了一些服务器返回的JSON数据等等，供前端获取然后进行相应的渲染操作！

[关于HTTP响应头信息的详细属性链接：https://www.runoob.com/http/http-header-fields.html][HTTP_https_www.runoob.com_http_http-header-fields.html]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 5]  
HTTP响应报文格式示例如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 6]  
4. 响应状态码：

###  ###

> 和请求报文相比，响应报文多了一个“响应状态码”，它以“清晰明确”的语言告诉客户端本次请求的处理结果。

1xx 消息，一般是告诉客户端，请求已经收到了，正在处理，别急...
    2xx 处理成功，一般表示：请求收悉、我明白你要的、请求已受理、已经处理完成等信息.
    3xx 重定向到其它地方。它让客户端再发起一个请求以完成整个处理。
    4xx 处理发生错误，责任在客户端，如客户端的请求一个不存在的资源，客户端未被授权，禁止访问等。
    5xx 处理发生错误，责任在服务端，如服务端抛出异常，路由出错，HTTP版本不支持等。

[具体的状态码请查看：http://tools.jb51.net/table/http\_status\_code][http_tools.jb51.net_table_http_status_code]

小扩展：url的组成以及参数含义：**URL用于互联网上的文档或者其他资源进行寻址。**

<span style="font-size:16px;">scheme://host.domain:port/path/filename</span>
    
    url中各部分的含义解析：
    1：scheme：指定因特网服务的类型。最流行的类型是HTTP。
    2：domain：指定因特网域名，比如：crazyit.org、fkjava.org等。
    3：host：指定此域中的主机。如果被省略，HTTP的默认主机是www。
    4：port：指定主机的端口号。端口号通常可以被省略，HTTP服务的默认端口号是80。
    5：path：指定远程服务器上的路径，该路径也可以被省略，省略该路径则默认被定位到网站的根目录。
    6：filename：指定远程文档的名称。如果省略该文件名，通常会定位到index.html、index.htm等文件，或定位到WEB服务器设置的其他文件。
    原文链接：https://blog.csdn.net/sujin_/article/details/79306486

结合实际链接给个小例子演示：

一个标准的 URL 地址由 protocol、hostname、port、path、parameters、query 几部分组成。
    示例：http://news.qq.com/a/20160209/012154,htm?a=1&b=2&c=3
    1：protocol
    	指 http:// 部分，是协议的意思。协议就是一套规则，定义了数据的封装、打包、拆包和解释的规则，http:// 即表示只能通过 HTTP 这套规
    	则访问这个页面资源。
    2:hostname
    	hostname 称为主机名，在本例的 URL 中，news.qq.com 就是 Hostname。
    3:port
    	1:port 称为端口号，一般 HTTP 的端口号为 80，HTTPS 的为 443，可以理解为计算机有很多个提供服务的点，比如可以用默认的 80 端口来提
    	供服务，也可以用 81 端口来提供服务。
    	2:以 http://news.qq.com:8080/a/20160209/012154.htm?a=1&b=2&c=3#p=1 为例，这 个 URL 指定了从 8080 这个端口号（即从这个门）访
    	问资源，这个网页服务器必须先 在这个端口部署服务，才能供用户访问（先把门打开，才能提供服务）。
    4: path
    	接下来是 /a/20160209/012154.htm/。hostname 后面的一长串全部称为 path，是“路 径”的意思，即最终文件所在的路径和文件名，只不过
    	此地址的文件存储在腾讯的服 务器上，即 news.qq.com 这个域名下的若干台机器上。
    5:parameters
    	?a=1&b=2&c=3 这一部分称为参数（parameters ），也叫查询。它的目的是在 URL 中带上一些本地的信息传给服务器.这些 KeyValue 的
    	键值对标识了一些特定的意义，最终要由服务器进行判断处理。

**小扩展2：url链接中的 \# ？ & 的作用是什么？**

> **1：\#，井号**：表示网页中的一个位置，被称之为锚点，常用于某个网页间不同位置的跳转，简单的说就是在一个网页中，URL 不变的情况下，通过添加“\#buy”的字符在 URL 最后可以跳转到当前网页中已经定义好的锚点（id=“buy”）位置；同样\#的改变也会增加浏览器的历史记录，也就是说我们可以通过“后退”按钮回到上一个位置，而熟悉网页开发的朋友们可能也会用于 ajax 的一些操作中，以此来实现不同的访问状态和改变页面访问内容，从而也可以实现那种无刷新载入的效果。

例如：https://zhan.leiue.com/fanly-mip.html\#buy （访问该链接就可以直接跳转到 Fanly MIP 主题页面的购买位置）

> **2：?，问号**：常用于动态网站，实现不同的参数值而生成不同的页面或者返回不同的结果，例如 WordPress 的动态链接就是/?p=ID，其中的 p 就表示 post 文章，ID 就表示文章的 ID，从而可以通过文章的 ID 来访问不同的文章。当然我们还常用的就是通过问号+任意参数来实现页面的刷新，从而获得最新的页面或者缓存的刷新。

例如：https://i.leiue.com/avatar/?size=100 （访问该链接就可以获得泪雪用户中心默认的用户头像，并且其 size 就是图像像素大小，所以就会是一个 100px 的头像显示）

> **3：&，连接符**：既然被叫做是链接符号，那就是连接的作用，也可以说是不同参数的间隔符，一般与问号结合使用，一个动态 URL 链接中以问号开始第一个参数，同&连接符来串联多个参数和值。

参考文章链接：
    https://blog.csdn.net/diaoyoxun8287/article/details/101478914?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&dist_request_id=1328741.49244.16170707654196301&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control

**总结：下面放了HTTP请求头、响应头的详细参数以及所有的状态码的信息方便查询！**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 7]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 8]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 9]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 10]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70]: /images/20221022/fd518193f78a4418a9923960e72c90ee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 1]: /images/20221022/bed1adc915804c7b883a955db0df8a8d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 2]: /images/20221022/2deebf7d10214c729f4843cfa63f0510.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 3]: /images/20221022/3c21716fb32b41e28377066138e0575b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 4]: /images/20221022/12256792cd124261aa8c5f4ac7e158d8.png
[HTTP_https_www.runoob.com_http_http-header-fields.html]: https://www.runoob.com/http/http-header-fields.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 5]: /images/20221022/ee12ad3112fe4a6182d601acd430897c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 6]: /images/20221022/4b03ac6448fa42f99ad48aa5bed96268.png
[http_tools.jb51.net_table_http_status_code]: http://tools.jb51.net/table/http_status_code
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 7]: /images/20221022/9344c2c7c36c4839a8bf8812b220a8b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 8]: /images/20221022/51796c5af266422f99049086319174cd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 9]: /images/20221022/666b8c7d53634c7fa41d7a4928581295.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 10]: /images/20221022/c554e1063db04c37aac4d768e9f29e07.png