[前端必知 ]HTTP or TCP/IP 基础

海军 等级 746 0 0

[前端必知 ]HTTP or TCP/IP 基础

写在前面的话

网上已经有很多不错 有关HTTP 文章, 此文为记录学习HTTP

最近在项目开发中,对于HTTP 这块比较懵,来补补基础吧!

学习HTTP的同时,有必要了解下TCP/IP协议族。

通常使用的网络都是在TCP / IP 协议族的基础上运作,而且HTTP 属于TCP/IP的一个子集。

TCP / IP

TCP/IP 协议族

不同硬件与操作系统之间通信有需要有一定规则来约束,这样可以统一沟通的条件。T

TCP / IP 是互联网相关各协议族的总称,它不只是 单纯的 指 TCPIP协议,

它有 FTP , SNMP , HTTP , PPPoE........ 组成的 协议族。

TCP/ IP 分层

TCP / IP 协议族 按层次分为 4 层: 应用层 , 传输层 , 网络层, 数据链路层

应用层

作用: 应用层决定了向用户提供应用服务时通信的活动。

TCP / IP 协议族内预存了各类通用的应用服务。

例如: FTP(文件传输协议) DNS(域名系统)HTTP

传输层

作用: 两台计算机之间的数据传输,服务于应用层。

在传输层有两个性质不同的协议: TCP(传输控制协议) UDP(用户数据协议)

网路层

作用: 用来处理在网络上流动的数据包,以何种方式传递给对方。

数据包是网络传输的最小数据单位。

网络层 决定了 通过什么样的方式把数据包传递给对方。

网络层 最重要的功能是: 路由数据包。它会根据网络上路由IP, 网络拥塞情况,选择一条最合适的路由路线,以最快的速度将数据包传递给对方。

数据链路层

作用: 用来处理连接网络的硬件部分。

硬件上的范畴均在链路层的作用范围之内

[前端必知 ]HTTP or TCP/IP 基础

TCP / IP 通信传输流

采用 TCP / IP 协议进行网络通信时, 客户端(发送端) 会从应用层 往下走, 一层 一层的传输, 每进入一层,被被打上标记序号以及端口号, 当客户端 走完 自己的 4 层时, 会进入 服务端(接收端) ,它是按 链路层 然后 一层一层 往上走, 每进入一层, 取消一个 标记序号, 直到顶层(应用层),这时, 服务端才接收到了 客户端服务端

发送的请求。

服务端客户端 发送请求,和之前的顺序相反。

服务端(应用层----------> 数据链路层)

客户端(数据链路层 ---------------> 应用层)

[前端必知 ]HTTP or TCP/IP 基础

HTTP 相关的协议

负责传输的IP协议

IP : 它是网际协议,它位于网络层。

作用: 把各种数据包传递给对方。

要保证可以 把数据包准确的传递给对方,有两个条件:

IP 地址: 它标明了要传递到对方的 ip 地址。

MAC 地址: 它是指网卡的固定地址。

IP 和 MAC 是验证 一个身份的 关键

IP 地址 可以 和 MAC 地址 进行匹配,IP 地址可以更换,但MAC 地址基本不会更换。

计算机于计算机之间通信时,它不会直接查找到对方IP的,中间过程会经历 设备中转,在进行中转的同时,它 会 采用 ARP 协议 来 推出 IP 地址的 MAC 地址,经过多次中转最终找到对方的 MAC 地址, MAC 地址 于 IP 地址匹配, 成功的建立了连接。


ARP : 它是一用来解析地址的协议。根据对方IP地址可以反查出对应的MAC 地址

[前端必知 ]HTTP or TCP/IP 基础
确保可靠性TCP 协议

TCP 位于传输层, 提供可靠的字节流服务。

字节流服务 : 为了方便传输,它会将大块数据分割成 以报文段为单位的数据进行管理。

为了可靠的安全的可以传递给对方数据, TCP 采用 三次握手策略,

SYN 同步序列编号 ACK 确认字符

第一次握手 : 发送端会发送一个带有 SYN 标志的数据包给对方。

第二次握手 : 对方(接收端)收到发送端 发送过来的 SYN 包, 回传一个带有 SYN / ACK 标志的包 来标识接收成功。

第三次握手 : 发送端 回传一个 ACK 包 表示 握手接收

TCP 为何要三次握手呢?

第一次握手: 客户端 向 服务端 发送请求

第二次握手 : 服务端 接收 客户端发来的请求,进行处理。

前 两次握手 已经实现 请求处理过程,那么为什么还是需要 建立第三次握手呢?

如果不进行 第三次握手 , 假如,第一次握手 , 客户端由于网络原因,请求延迟发送, 你以为 这样就结束了请求,但网络节点正常后,它还会发送这个请求,这是一个早已失效的报文;第二次握手,服务端 接收到 客户端发送过来的 延迟请求,但此时客户端没有发送任何数据,而服务端还在等候 客户端, 造成了资源浪费。


第三次握手是为了防止已经失效的连接请求报文段突然又传到服务端,因而产生错误。

[前端必知 ]HTTP or TCP/IP 基础
让三次握握手 更生动

在恋爱关系中,就是 确定 一下, A 是否 为 单相思,

如果不三次握手, B 早已和别的男朋友........ 而 A 还在 苦苦 等待 B 的接受。

干嘛不三次握手嘛

A 向 B 表白了;

B 收到 A 的 表白了, B 要回应 A ,我不喜欢你

A 收到 了 B 回应, 让他 脱离了 单相思

[前端必知 ]HTTP or TCP/IP 基础
负责域名解析DNS 服务

DNS 服务 和HTTP 协议 都位于应用层协议。

作用 : 提供域名IP 地址解析服务。

DNS 协议提供通过域名查找IP 地址, 也可以通过IP 地址反查 域名

HTTP 与 各种协议之间的关系

HTTP 与上面各个协议之间 串联起来 理解各个协议个作用。

[前端必知 ]HTTP or TCP/IP 基础
图片来源 HTTP图解

URI 与 URL

什么是URI URL

URI 统一资源标识符。

URI 是 Uniform Resource Identifier 的缩写

Uniform 统一格式

Resource 可标识资源

Idetifier 可标识对象,标识符

URI 用字符串 标识 互联网资源, 而URL 表示资源地点。


URL 统一资源定位符, 这个相信大家已经很了解了。

URI 格式
[前端必知 ]HTTP or TCP/IP 基础

​ 到现在,我们了解了TCP / IP 协议族 的组成以及分层,还有最重要的 三次握手,做一个不再 单相思的小男孩;还有有关HTTP 相关知识。

这只是刚开始,路漫漫其修远兮吾将上下而求索.

写此文,为记录学习 HTTP, 大手请手下留情。

原创不易,觉得不错分享点赞👍

[前端必知 ]HTTP or TCP/IP 基础

收藏
评论区

相关推荐

[前端必知 ]HTTP or TCP/IP 基础
<section id"nice" datatool"mdnice编辑器" datawebsite"https://www.mdnice.com" style"fontsize: 16px; padding: 0 10px; wordspacing: 0px; wordbreak: breakword; wordwrap: break
2021前端技术面试必备Vue:(一)基础快速学习篇
由于疫情的影响,相信很多小伙伴都在家里待着。中小公司由于运营困难会出现裁员, 我们也面临着 '失业',你是否感到了焦虑.最近做了个调研: '现在的你找到工作了吗 ?<br/1.大部分的回复: 求职平台都是 ‘已回复’,然后没有下文,你遇到了吗?<br/2.各个公司对技术的要求增高<br/3.有人说开始搞副业<br/ 在我来看,这一年已经过去了四分
2021前端技术面试必备Vue:(四)Vuex状态管理
前三章陆续已经更新了Vue基本使用 和Vue Router的基本使用,如果你读了前三篇文章的话,并且掌握差不多,那么你现在可以开发简单的应用了,例如Blog,电商网站........唯一不足的是,随着你的业务需求不断增加,页面中的状态数据也不断庞大,维护起来就特别困难了,Vue 提供了一种状态管理 解决办法 Vuex,它的思想和React 的R
Webpack 打包资源篇
<section datatools"新媒体排版" dataid"13439" datastyletype"9" style"visibility: visible;"<p style"maxwidth: 100%; visibility: visible;"<br mpafromtpl"t" style"visibility
C++面向对象实现封装线程池
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gray; border-width: 2px
HTML5中新增的布局标签
1.1.1   盒子模型层次 盒子模型的层次遵循以下顺序: 内容+padding à 边框 à background-image à background-color à margin![](https://oscimg.oschina.net/oscnet/722909c8dcfd273c73b0c6534e20f8d9bd4.gif) ![](ht
.clear 万能清除浮动
html body div.clear, html body span.clear { background: none; border: 0; clear: both; display: block; float: none;
QQ空间说说生成器
index.html <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <style> body { margin: 0; padding:
LINUX中文件描述符传递
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; border-width: 2px 0
LINUX打开文件
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; border-width: 2px 0
MySQL特异功能之:Impossible WHERE noticed after reading const tables
<div class="htmledit\_views"> <div class="bct fc05 fc11 nbw-blog ztag" style="line-height:28px;font-size:16px;margin:15px 0px;padding:5px 0px;overflow:hidden;font-family:'Hiragino
ASMSupport教程4.2
<h2>4.2 生成Return操作</h2> <p>这一节我们将讲述如何生成return操作,我们将生成如下代码:</p> <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; pa
AVR 嵌入式单片机芯片的中断系统介绍
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gray; border-width: 2px
Boost(1.69.0) windows入门(译)
<head> <title>缩进2字符</title> <style type="text/css"> .yindent, .yblock{ padding: 1em 1em 0 1em; margin-right:0; } .yindent{ margin:0.7em 2em; border:medium outset; } .yblock{ margin
NetBeans Weekly News
body { margin:5px 15px 5px 15px; font-size: 11px; font-family: Verdana, "Verdana CE", Arial, "Arial CE", "Lucida Grande CE", lucida, "Helvetica CE", sans-serif; background-colo