网络通信&数据交互原理

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情

OSI

介绍

OSI（Open System Interconnect），即开放式系统互联。 一般都叫OSI参考模型，是ISO（国际标准化组织）组织在1985年研究的网络互联模型。该体系结构标准定义了网络互连的七层框架（物理层、数据链路层、网络层、传输层、会话层、表示层和应用层），即ISO开放系统互连参考模型。在这一框架下进一步详细规定了每一层的功能，以实现开放系统环境中的互连性、互操作性和应用的可移植性。

七层参考模型

1. 物理层-通信工程 电子、电路
2. 链路层-内网寻址 ARP、ICMP
3. 网络层-外网寻址 IP
4. 传输层-通信稳定性 TCP
5. 表现层-统一各个网络结构(x)
6. 会话层-记录状态(x)
7. 应用层-应用细节 HTTP、FTP、SMTP、POP3

五层模型

1. 物理层
2. 链路层
3. 网络层
4. 传输层
5. 应用层

TCP

传输控制协议

1. 保证到达-面向连接(三次握手-浏览器和服务器的发送与接收)
2. 保证质量-可靠性
3. 保证顺序-面向字节流

场景：文件下载，聊天

UDP

用户数据报协议

1. 不保证到达
2. 不保证质量
3. 不保证顺序
4. 保证低延迟

场景：IP电话、视频直播

XHR

简介：XMLHttpRequest用于与服务器交互数据

GET

1. 容量小(32k)
2. 可视（表单）
3. 有缓存

场景：带id分享，收藏

//创建实例
const xhr = new XMLHttpRequest();
//连接
xhr.open('GET','/url/xxx',true);//是否异步
//发送
xhr.send();
//接收
xhr.onreadystatechange = function(){
    if(xhr.readyState===4){
        if(xhr.status>=200&&xhr.status<300||xhr.status===304){
            console.log(`成功:${xhr.responseText}`)
        }else{
            console.log('失败')
        }
    }
}

POST

1. 容量大(1G)
2. 不可视
3. 无缓存

//创建实例
const xhr = new XMLHttpRequest();
//连接
xhr.open('POST','/url/xxx',true);//是否异步
//发送
xhr.setRequestHeader('content-type','application/xxx')
xhr.send('a=1&b=2');
//接收
xhr.onreadystatechange = function(){
    if(xhr.readyState===4){
        if(xhr.status>=200&&xhr.status<300||xhr.status===304){
            console.log(`成功:${xhr.responseText}`)
        }else{
            console.log('失败')
        }
    }
}

get和post安全性本质上是一样的，只有HTTPS才是安全的

readyState

0. 初始化-创建
1. 已连接
2. 已发送
3. 已接收-头
4. 已接收-body