0
0

前端网络之【网络分层模型和应用协议】

在这里插入图片描述

目录

**在互联的的世界中，

网络

是一切发展的根基，影响着我们每个人的方方面面，但是网络这一块的知识体系异常的庞大，所以作为前端开发这一点出发，对网络这一块的知识触及不用过于深究。本文也将分享从前端开发的角度出发去认识与学习网络，其中主要围绕

网络的分层模型

和

应用协议展开

。**

分层模型

TCP / IP 四层网络模型（早期标准）

#mermaid-svg-euXNRd3TbrXNqzbL {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-euXNRd3TbrXNqzbL .error-icon{fill:#552222;}#mermaid-svg-euXNRd3TbrXNqzbL .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-euXNRd3TbrXNqzbL .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-euXNRd3TbrXNqzbL .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-euXNRd3TbrXNqzbL .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-euXNRd3TbrXNqzbL .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-euXNRd3TbrXNqzbL .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-euXNRd3TbrXNqzbL .marker{fill:#333333;stroke:#333333;}#mermaid-svg-euXNRd3TbrXNqzbL .marker.cross{stroke:#333333;}#mermaid-svg-euXNRd3TbrXNqzbL svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-euXNRd3TbrXNqzbL .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-euXNRd3TbrXNqzbL .cluster-label text{fill:#333;}#mermaid-svg-euXNRd3TbrXNqzbL .cluster-label span{color:#333;}#mermaid-svg-euXNRd3TbrXNqzbL .label text,#mermaid-svg-euXNRd3TbrXNqzbL span{fill:#333;color:#333;}#mermaid-svg-euXNRd3TbrXNqzbL .node rect,#mermaid-svg-euXNRd3TbrXNqzbL .node circle,#mermaid-svg-euXNRd3TbrXNqzbL .node ellipse,#mermaid-svg-euXNRd3TbrXNqzbL .node polygon,#mermaid-svg-euXNRd3TbrXNqzbL .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-euXNRd3TbrXNqzbL .node .label{text-align:center;}#mermaid-svg-euXNRd3TbrXNqzbL .node.clickable{cursor:pointer;}#mermaid-svg-euXNRd3TbrXNqzbL .arrowheadPath{fill:#333333;}#mermaid-svg-euXNRd3TbrXNqzbL .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-euXNRd3TbrXNqzbL .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-euXNRd3TbrXNqzbL .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-euXNRd3TbrXNqzbL .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-euXNRd3TbrXNqzbL .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-euXNRd3TbrXNqzbL .cluster text{fill:#333;}#mermaid-svg-euXNRd3TbrXNqzbL .cluster span{color:#333;}#mermaid-svg-euXNRd3TbrXNqzbL div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-euXNRd3TbrXNqzbL :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

       应用层 
     

       传输层 
     

       网络层 
     

       物理链路层

**OSI 七层网络模型（

官方书面

标准）**

#mermaid-svg-QT1fTGpL9XLRfe6h {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-QT1fTGpL9XLRfe6h .error-icon{fill:#552222;}#mermaid-svg-QT1fTGpL9XLRfe6h .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-QT1fTGpL9XLRfe6h .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-QT1fTGpL9XLRfe6h .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-QT1fTGpL9XLRfe6h .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-QT1fTGpL9XLRfe6h .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-QT1fTGpL9XLRfe6h .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-QT1fTGpL9XLRfe6h .marker{fill:#333333;stroke:#333333;}#mermaid-svg-QT1fTGpL9XLRfe6h .marker.cross{stroke:#333333;}#mermaid-svg-QT1fTGpL9XLRfe6h svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-QT1fTGpL9XLRfe6h .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-QT1fTGpL9XLRfe6h .cluster-label text{fill:#333;}#mermaid-svg-QT1fTGpL9XLRfe6h .cluster-label span{color:#333;}#mermaid-svg-QT1fTGpL9XLRfe6h .label text,#mermaid-svg-QT1fTGpL9XLRfe6h span{fill:#333;color:#333;}#mermaid-svg-QT1fTGpL9XLRfe6h .node rect,#mermaid-svg-QT1fTGpL9XLRfe6h .node circle,#mermaid-svg-QT1fTGpL9XLRfe6h .node ellipse,#mermaid-svg-QT1fTGpL9XLRfe6h .node polygon,#mermaid-svg-QT1fTGpL9XLRfe6h .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-QT1fTGpL9XLRfe6h .node .label{text-align:center;}#mermaid-svg-QT1fTGpL9XLRfe6h .node.clickable{cursor:pointer;}#mermaid-svg-QT1fTGpL9XLRfe6h .arrowheadPath{fill:#333333;}#mermaid-svg-QT1fTGpL9XLRfe6h .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-QT1fTGpL9XLRfe6h .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-QT1fTGpL9XLRfe6h .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-QT1fTGpL9XLRfe6h .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-QT1fTGpL9XLRfe6h .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-QT1fTGpL9XLRfe6h .cluster text{fill:#333;}#mermaid-svg-QT1fTGpL9XLRfe6h .cluster span{color:#333;}#mermaid-svg-QT1fTGpL9XLRfe6h div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-QT1fTGpL9XLRfe6h :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

       应用层 
     

       表示层 
     

       会话层 
     

       传输层 
     

       网络层 
     

       数据链路层 
     

       物理层

**TCP / IP 

五层

网络模型（

主流标准

）**

#mermaid-svg-me6J2jsWaAeFW2Na {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-me6J2jsWaAeFW2Na .error-icon{fill:#552222;}#mermaid-svg-me6J2jsWaAeFW2Na .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-me6J2jsWaAeFW2Na .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-me6J2jsWaAeFW2Na .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-me6J2jsWaAeFW2Na .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-me6J2jsWaAeFW2Na .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-me6J2jsWaAeFW2Na .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-me6J2jsWaAeFW2Na .marker{fill:#333333;stroke:#333333;}#mermaid-svg-me6J2jsWaAeFW2Na .marker.cross{stroke:#333333;}#mermaid-svg-me6J2jsWaAeFW2Na svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-me6J2jsWaAeFW2Na .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-me6J2jsWaAeFW2Na .cluster-label text{fill:#333;}#mermaid-svg-me6J2jsWaAeFW2Na .cluster-label span{color:#333;}#mermaid-svg-me6J2jsWaAeFW2Na .label text,#mermaid-svg-me6J2jsWaAeFW2Na span{fill:#333;color:#333;}#mermaid-svg-me6J2jsWaAeFW2Na .node rect,#mermaid-svg-me6J2jsWaAeFW2Na .node circle,#mermaid-svg-me6J2jsWaAeFW2Na .node ellipse,#mermaid-svg-me6J2jsWaAeFW2Na .node polygon,#mermaid-svg-me6J2jsWaAeFW2Na .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-me6J2jsWaAeFW2Na .node .label{text-align:center;}#mermaid-svg-me6J2jsWaAeFW2Na .node.clickable{cursor:pointer;}#mermaid-svg-me6J2jsWaAeFW2Na .arrowheadPath{fill:#333333;}#mermaid-svg-me6J2jsWaAeFW2Na .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-me6J2jsWaAeFW2Na .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-me6J2jsWaAeFW2Na .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-me6J2jsWaAeFW2Na .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-me6J2jsWaAeFW2Na .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-me6J2jsWaAeFW2Na .cluster text{fill:#333;}#mermaid-svg-me6J2jsWaAeFW2Na .cluster span{color:#333;}#mermaid-svg-me6J2jsWaAeFW2Na div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-me6J2jsWaAeFW2Na :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

       应用层 
     

       传输层 
     

       网络层 
     

       数据链路层 
     

       物理层

**以上的几种不同分类学说的分层模型，在其各个发展阶段中被其认为是当时的标准，其中

官方

认证的是

OSI 七层网络模型

,比较

书面化的标准

,而在实际开发中，

大多数领域都普遍认可

的是

TCP / IP 五层网络模型

。各个分层模型各司其职又相互联动配合，在各自的领域专注于实现自己的功能。共同支撑起了现在网络发展的基础。**

各层级模型功能示意图：

在这里插入图片描述

在这里插入图片描述

应用层协议

**在了解了上面的网络分层模型之后，我们其实最主要的关注重心点是在

应用层协议

这一块，而应用层面，首先要了解的是

http请求协议

，所以这也是我们下面要首先学习的。在这之前我们先来看看一下完整的

网络请求路径格式符

**

  • URL (uniform resource locator)

**统一

资源定位符

,用于定位网络服务**

在这里插入图片描述

**URL是一个

固定格式的字符串

**

在这里插入图片描述

**上图中表示在互联网络中查找

哪台计算机（主机名）

中的

哪个程序（端口）

的

哪个服务（路径）

并标注了获取服务的

具体细节（查询字符串）

**

  • 当协议是http端口为80时，端口可以省略
  • 当协议是https端口为443时，端口可以省略
  • 协议、主机名、路径是必填的，其他的根据具体的要求填写

HTTP

**

超文本传输协议

（Hyper Text Transfer Protocol，HTTP）是一个广泛运用于互联网的

应用层协议

。99%的情况下，前端开发者接触的都是HTTP协议。该协议规定了两个方面的内容：**

  • 传递消息的模式
  • 传递消息的格式

传递消息的模式：

在这里插入图片描述

**HTTP使用了一种极为简单的消息传递模式，请求→响应 模式

发起请求的称之为客户端

，接收请求并完成

响应的称之为服务器

。请求→响应完成后，一次交互结束。**

传递消息的格式：

在这里插入图片描述

请求行：

在这里插入图片描述

**

请求方法：

**

注明

：**在HTTP协议中，请求方法

仅有语义的区别

,本质上都是一样的**

请求方法描述**

GET

****表示

请求指定资源

。使用 

GET 的请求应该只用于请求数据

，而不应该包含数据。****

POST

****表示

发送数据给服务器

PUT

****表示创建一个新的资源或用请求的有效载荷替换目标资源，

常用来做修改数据请求用

PATCH

****表示对资源进行

部分修改

，和 

PATCH 和 PUT区别?

后者是

全部覆盖式的修改

模式，前者是

局部替换式的修改

模式****

DELETE

****表示

用于删除指定的资源

****HEAD / CONNECT / OPTIONS / TRACE (

不常用

)点击查看请求方法官方文档
HTTP 响应状态码：
状态码描述(100–199)信息响应(200–299)成功响应(300–399)重定向(400–499)客户端错误响应(500–599)**服务端错误响应
在这里插入图片描述

🚵‍♂️ 博主座右铭：向阳而生，我还在路上！
——————————————————————————————
🚴博主想说：将持续性为社区输出自己的资源，同时也见证自己的进步！
——————————————————————————————
🤼‍♂️ 如果都看到这了，博主希望留下你的足迹！【📂收藏！👍点赞！✍️评论！】
——————————————————————————————

标签： 前端 网络 网络协议
本文转载自: https://blog.csdn.net/qq_60961397/article/details/143928255
版权归原作者 旧梦星轨 所有， 如有侵权，请联系我们删除。
登录后发布评论

“前端网络之【网络分层模型和应用协议】”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航