冯诺依曼计算机结构与网络通信详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_52484354/article/details/117428258

一，冯诺依曼式计算机 --冯诺依曼(计算机之父)

1.运算器： CPU,GPU(显卡)
2.存储器：内存(断电数据清空，读写速度快)，硬盘(辅存)：数据可以持久化，读写速度，相对较慢
3.控制器：主板上的一些器件
4.输入设备：键盘，鼠标，麦克风，网口
5.输出设备：显示器，耳机，网口

二，IP地址

IP地址的格式
1.IP地址分为四个段：xxx.xxx.xxx.xxx，每个段0~255，每个段都是由8个0、1组成的
2.IP地址的分类
 2.1 一个IP地址分为两个部分：网络ID，主机ID
 A类：0.0.0.0~127.255.255.255
 B类：128.0.0.0~191.255.255.255
 C类：192.0.0.0~223.255.255.255
 D类：(多播地址)
 E类：

三，域名与DNS解析的过程

www.baidu.com域名
问：能通过域名直接访问到一台机器吗？
答：不可以的。
用域名和IP形成对应关系
1.首先，计算机是不知道域名对应的IP,问路由器，如果路由器认识这个域名，就返回一个IP，然后计算机访问这个IP
2.如果路由器不认识，他就问上一层路由器
  如果问到了城市这个级别的路由器的时候还不知道，一般在城市都有一台DNS服务器就问DNS服务器
  如果DNS服务器不认识这个域名，继续向上级DNS服务器查找

  互联网刚建立的时候，13台总的DNS服务器

四，当向浏览器地址栏中输入一个url回车之后，网络中会发生什么？

比如输入的是123.xyz
1.首先看浏览器的缓存
2.本机host -->C:windows/system32/divers/etc/host  127.0.0.1 -->代表的是自己当前的这台机器
 0.0.0.0代表不知道IP地址 --默认打到自己本机
3.家里的路由器
4.上级路由 或城市LDNS服务器   ->LNDS本地的
5.继续向上级的DNS服务器找
6.直到找到全局的gDNS服务器  -->他一定有
7.然后就会一层一层返回回来，这一层层都会把这个新的IP加域名进行缓存，下次在访问就可以在浏览器缓存里面找本机host是不缓存的(本机host是一个文件)，返回回来之后就知道访问的是那个IP地址了，然后在重新访问IP地址



输入url回车之后至少发出两个请求，通过域名找到IP然后在访问这个IP

五，五层网络模型 ---HTTP协议

五层网络模型
 5.应用层       HTTP协议 ，DNS协议
 4.运输层       TCP协议、UDP协议    (TCP比如传信他会告诉有没有传到，没传到会继续传，相对安全UDP传过去不管有没有收到就不管了)
 3.网络层       IP地址--IP协议(存的自己的地址，存的对方的地址)
 2.数据链路层   mac地址
 1.物理层
 由低到高

发出一个hello:一直到物理层TCP/IP协议(对方的IP，自己的 
IP，对方的端口)HTTP协议(请求头)hello          传完之后需要从物理层,层层解析才能解析出hello
总结：从应用层(浏览器)，层层加密到物理层，然后从物理层，层层解析到应用层(web服务器)
 
HTTP协议分为两个部分：                      
 请求：Request    -->分为请求头，数据体(比方说hello)
 请求头格式：请求方式 路径 协议版本
 GET/path?a=1&b=2 HTTP1.1   -->GET方式的特点，请求的参数都在url里
 Host:www.baidu.com
 connection:keep-alive 长连接
 User-Agent:用来标识自己是什么浏览器的，但是由于浏览器大战乱了
 请求方式：GET,POST
 响应：Response
 分为：响应头，数据体
 协议版本 状态码 message(信息)
 属性：值

六，get请求跟post请求

GET与POST请求方式的区别
1.是基于什么前提的? 如果什么前提都没有，不使用任何规范，只考虑语法和理论上的HTTP协议
  GET和POST几乎没有什么区别只有名字不一样
2.如果是基于RFC规范的
  1.理论上的(Specification):GET和POST具有相同语法的，但是有不同的语义。
    get是用来获取数据的，post是用来发送数据的，其他方面没有区别
  2.实现上的(Implementation):各种浏览器，就是这个规范的实现者
    常见的那些不同：
    1.GET的数据在URL是可见的，POST请求不显示在URL中。
    2.GET对长度是有限制的，POST长度是无限的
    3.GET请求的数据可以收藏为书签，post请求的数据不可收藏为书签
    4.GET请求后，按后退按钮、刷新按钮无影响，post数据会被重新提交
    5.GET编码类型：application/x-WWW-form-url,post的编码类型：有很多种，encodeapplication/x-WWW-from-urlencoded    multipart/from-data
    6.GET历史参数会被保留在浏览器里，post不会保存在浏览器中的
    7.GET只允许ASCLL post没有编码限制，允许发二进制的
    8.GET与POST相比，GET安全性较差，因为所发的数据是URL的一部分。

七，cookie与Session

Cookile与Session
1.如果我们用JS的变量来存储数据，那么在页面关闭的时候，数据就消失了。
2.保持登录状态是怎么做到的呢?
 按照正常的HTTP协议来说，是做不到的
 因为HTTP协议，又叫上下文无关协议。
3.所以说前端页面上，有可以持久化存储数据的东西，一旦登录成功，我们就记载在这个里面。
 Cookile是有限制的，比如百度的cookile只能在百度的域名下(自己只能往自己的域名下)
 Cookile是存在浏览器里的，不是存在某个页面上的，是可以长期存储的。Cookile即使是保存在浏览器里，也是存放在不同的域名下的。
 


登录过程
1.初始状态：没有登录
2.访问百度的登录，输入用户名，密码。
3.如果用户名和密码是正确的，百度的后端会向这个域名下，设置一个Cookile。写入用户的基本信息(加密的)。
4.以后每一次向百度发送请求，浏览器就会自动带上这些Cokkile.
5.服务端(后端)看到了带有ID的cookile，就可以解析这个加密的ID，来获取到这个用于本身的ID。
6.如果能获取到本身的ID，那么就证明这个用户已经登录过了所以后端可以继续保留用户的信息。
所以用cokkile可以实现自动登录，或保持登录状态
缺点：如果某个坏人，复制了我浏览器里的cookile，他就可以在他的电脑上登录我的账号了。

 

Cookile 是存在浏览器的，是可以被复制走的 Session是存在服务器的，很难被复制走
数据存在Session 上也有缺点，1.如果用户量非常大，上亿的用户。在用户量很大的时候，服务器端很耗资源的。
2.因为后端可能不止一台服务器，用户的登录信息，一般只存在一台服务器上。因为用用户的登录操作，在哪台机器上执行的，就一般存在哪台机器上。 需要通过反向代理。(轮询 IP哈希).

八，页面的正确打开方式

B/S结构：Browser/Server ---Browser只负责内容的展示，Server负责提供内容
C/S结构：Client/Server ---Client只负责内容的展示，Server负责提供内容
index.html
页面的本质是什么?页面的本质就是一个字符串。带有HTML格式的字符串
浏览器向服务器请求一个页面的本质是什么?
1.www.baidu.com
2.服务器收到这个请求后，服务器想要把这个页面的内容(HTML格式的字符串)返回给浏览器。
3.页面的字符串存在哪里呢? 存在HTML文件里.例如:index.html
4.服务器端要读取文件
5.将读取出来的内容返回给浏览器


最后返回的是一个字符串，这个字符串的来源可能是文件，可能是缓存，可能来源于数据库。



服务器：严格的说，服务器是一台计算机，这台计算机，只提供服务(不是用户用的)
但是，我们常说的这个服务器，指的是服务容器,不是服务器
服务容器:是一个程序,程序可以监听一个端口(www.baidu.com)，读取文件，并且返回.  (看想要的是什么类型的文件，然后读取给他返回.)
如果我们想通过访问服务器(服务容器)的方式，来访问我们自己写的页面.
我们就得装一个服务容器的程序.

九，发送网络请求

1.在浏览器中直接输入网址(无法用代码控制)
2.location.href="url",可以发出网络请求，但是页面会发生跳转(页面会跳转)
location.href="https://www.baidu.com";
3.带有src属性的标签，请求是可以发出的，服务端是可以处理也是可以返回的，但是返回之后，能否被应用，还要看浏览器.(页面无法返回处理结果)
<img src="http://www.baidu.com">
4.带有href属性的标签，请求是可以发出的，服务端可以处理也是可以返回的，但是返回之后，能否被应用，还要看浏览器.(页面无法返回处理结果)
<link href="http://www.baidu.com">
5.带有action属性的标签，例如form表单也可以向后端发出请求，但是form表单发出请求之后,也会页面跳转
<form action="http://www.baidu.com">


希望有一个方式页面可以由代码控制，页面也不会跳转，服务端返回的结果我可以用js处理


6.ajax
要素
1.请求方式:get，post
2.url
var xhr = null;
if(window.XMLHttpRequest){
 xhr = new XMLHttpRequest();   //IE6不支持这个方法
}else{
 xhr = new ActiveXOBject("Microsoft.XMLHttp");  IE6模式   
}
xhr.open("get","http:..www.baidu.com");
xhr.send();

十，跨域

跨域访问资源
哪些东西属于资源?
js文件算吗? js文件肯定是算资源的，但是js文件是允许被跨域请求的。
css文件，jpg,png等src属性的资源都是可以被跨域请求的。href资源大部分都是可以被跨域请求的。

哪些资源算跨域请求的资源?
1.后端接口的数据（比如百度的搜索，淘宝想用）
2.其他域的cookie
3.其他域的缓存

什么是其他的域?怎么样算跨域?
页面本身:有协议(http/https),域名，端口(默认80)
要请求的数据:http://www.baidu.com

协议，域名，端口这三个，有任意一个不一样就算跨域。

十一，跨域这个行为，发生在哪里？

跨域这个行为，发生在哪里?(浏览器接收的时候)
答案:
1.即使跨域了(协议，域名，端口号有不一样的),请求也可以发出.
2.服务器端也是可以接收的.
3.服务器端也是可以正常处理的.
4.服务器端也是可以正常返回数据
5.浏览器也能接受到这些数据
6.接收到之后，发现当前页面的域和请求的域不同，所以判定为跨域。
7.我们的代码在这等着结果呢，但是因为浏览器判定跨域了，不会把结果传递给我们的代码。

虽然跨域了，但是我们依然需要这个数据，怎么办?

解决跨域问题:
1.后端(别人家的)配合我们进行跨域
  1.JSONP(正常的情况，返回的数据都是JSONP格式，JSONP是一种特殊的格式。)
  2.后端设置Access-Control-Allow-Origin属性以支持跨域
2.后端不配合我们进行跨域
  3.iframe(只能显示，不能控制)  一个标签里面src写url
  4.通过后端代理(自己的后端)

十二，原生JS发送Ajax

<div id="test"></div>
    <script>
        var xhr = null;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();   IE6不兼容
        } else {
            xhr = new ActiveXObject("Microsft.XMLHttp");   IE6专用
        }
        console.log(xhr.readyState);(输出0  刚创建对象的时候为0)
        xhr.open("get", "http://developer.duyiedu.com/edu/testAjaxCrossOrigin", true); //-->true表示异步，false表示同步          //建立连接
        console.log(xhr.readyState); (输出1 建立连接后为1)
        //xhr.send();
        xhr.onreadystatechange = function() {
            //readyStare == 4表示请求已完成，已经接收到数据
            //status == 200 网络请求，结果都会有一个状态码，来表示这个请求是否正常
            //200表示请求成功
            //http状态码
            //2**表示成功
            //3**表示重定向
            //4**表示报错 比如404页面没找到
            //5**表示服务端错误
            if (xhr.readyState == 4 && xhr.status == 200) {
                  //这行没用是为了看返回结果
                document.getElementById("test").innerText = xhr.responseText;
                (如果有返回结果，返回值为xhr.responseText中)
                var data = JSON.parse(xhr.responseText); 转为json对象
                console.log(data);
            }
        }
        xhr.send(); //发出请求
        //防止网络太快，在上面的话可能onreadystatechange还没赋值完然后执行send他就不会触发
    </script>

十三，jsonp特性

$.ajax({
  url:"http://developer.duyiedu.com/edu/testJsonp",
  type:"post",
  dataType:"jsonp",
  success: function(data){
    console.log(data);
  }
});
jsonp格式哪里特殊?
发送的时候，会带上一个参数callback
返回的结果不是json
callback的名 + ( + json +);

//jsonp跨域，只能使用get方法，如果我们设置的是post方法，jquery会自动转换为get方法
//是不是在jsonp里面我只能使用get方法?是不是我设置的post方法都会转换为get方法呢?
答：不是
jqery会判断是否同源(不是同源也就是跨域了)：如果同源，那么设置的是get就是get，设置的post就是post
如果不是同源，无论设置的是什么，都改为get

十四 jsonp原理

jsonp原理
1.判断请求与当前页面的域，是否同源，如果同源则发送正常的ajax，就没有跨域的事情
2.如果不同源，生成一个script标签
3.生成一个随机的callback名字
4.设置script标签的src，设置为要请求的接口
5.将callback作为参数拼接在后面（参数就是一个定义好的全局函数）
---------------------------------以上为前端部分
6.后端接收的请求后，开始准备要返回的数据
7.后端拼接数据，将要返回的数据用callback的值和括号包裹起来
 例如：callback=asd123456,要返回的数据为{"a":1,"b":2};
 就要拼接为：asd123456({"a":1,"b":2});
8.将内容返回
---------------------------------以上为后端部分
9.浏览器接收到内容，会当作js代码来执行
10.从而执行名为asd123456的方法，这样我们就收到了后端返回给我们的对象
// 只能get请求(地址栏传参有大小限制) post请求不了

jsonp前端代码实现

 var $ = {
            ajax: function (options) {
                var url = options.url;
                var type = options.type;
                var dataType = options.dataType;
                //判断是否同源（协议，域名，端口号）
                //获取目标url的域
                var targetProtocol = "";//目标接口的协议
                var targetHost = "";//目标接口的host，host是包涵域名和端口的
                //如果url不带http，那么访问的一定是相对路径，相对路径一定是同源的。
                if (url.indexOf("http://") == 0 || url.indexOf("https://") == 0) {
                    var targetUrl = new URL(url);
                    targetProtocol = targetUrl.protocol;
                    targetHost = targetUrl.host;
                } else {
                    targetProtocol = location.protocol;
                    targetHost = location.host;
                }
                //首先判断是否为jsonp，因为不是jsonp不用做其他的判断，直接发送ajax
                if (dataType == "jsonp") {
                    //要看是否同源
                    if (location.protocol == targetProtocol && location.host == targetHost) {//表示同源
                        //此处省略。因为同源，jsonp会当做普通的ajax做请求
                    } else {//不同源，跨域
                        //随机生成一个callback
                        var callback = "cb" + Math.floor(Math.random() * 1000000);
                        //给window上添加一个方法
                        window[callback] = options.success;//没有这个的话请求发出去了，但是 
                        没有这个方法,所以在window上声明一个这个方法；               //cb22416({"status":"ok","msg":"Hello! There is DuYi education!"})没有cb22416方法，所以在window声明一个，里面这个为回调函数的参数
                        //生成script标签。
                        var script = document.createElement("script");
                        if (url.indexOf("?") > 0) {//表示已经有参数了
                            script.src = url + "&callback=" + callback;
                        } else {//表示没有参数
                            script.src = url + "?callback=" + callback;
                        }
                        script.id = callback;
                        document.head.appendChild(script);
                    }
                }
            }
        }

        //http://developer.duyiedu.com/edu/testJsonp?callback

        $.ajax({
            url: "http://developer.duyiedu.com/edu/testJsonp",
            type: "get",
            dataType: "jsonp",
            success: function (data) {
                console.log(data);
            }
        });

十四，网络直播课内容

1. **http 1.0**

http请求创建的时候同时创建了tcp连接,请求发送,服务器响应之后,tcp连接关闭

- **http 1.1**

通过声明的方式(keep alive),保持连接(**节省tcp连接开销**)

- **http 2.0**

http请求可以处理并发,只需要一个http连接就可以了

2. tcp中的标志位、序列号

- SYN(synchronous建立联机标志位)

- ACK(acknowledgement 联机确认标志位)

- Sequence number(顺序号码，数据包的序号)

- Acknowledge number(确认号码，响应数据包的序号)

- FIN(finish结束，终止链路标志位)
3.三次握手

1.第一次握手
   客户端协议栈向服务器端发送了 `SYN` 包，并告诉服务器端当前发送序列号 SYN = 1, seq=x，x为本次TCP通信的字节流的初始序号, 客户端 进入 SYNC_SENT 状态；
2. 第二次握手 
   服务器端的协议栈收到这个包之后，和客户端进行 `ACK `应答，应答的值为 `x+1`，表示 对 SYN 包 1的确认，同时服务器也发送一个 SYN 包，告诉客户端当前我的发送序列号 为 1，服务器端进入 `SYNC_RCVD` 状态；
3. 第三次握手  
   客户端协议栈收到 `ACK` 之后，还要向服务端发送一个确认报文段, 表示：服务端发来的连接同意应答已经成功收到，表示客户端到服务器端的单向连接建立成功，客户端发完这个报文段后便进入ESTABLISHED状态，此时连接的建立完成,该报文段的头部为：ACK=1，seq=x+1，ack=y+1, 这个时候服务器 端到客户端的单向连接也建立成功,服务端收到这个应答后进入ESTABLISHED状态

4.四次挥手

第一次挥手
  客户端数据发送完成，需要向服务端发送连接释放请求。请求只有报文头
第二次挥手
  服务端接收到释放请求，通知相应程序,客户端要进行关闭。此时服务端进入CLOSE-WAIT状态，并向客户端发送连接释放的应答
第三次挥手
  当服务端向客户端发送完所有数据后，开始向客户端发送连接释放请求,此时服务端进行LAST-ACK状态
第四次挥手
  客户端接收释放请求后，向服务端发送确认应答，客户端进入TIME-WAIT状态。该状态会持续2MSL时间，服务端没有后续数据发送，进入CLOSED状态，撤销TCB。服务端收到确认应答后，也便进入CLOSED状态，撤销TCB。

十五，跨域解决方案

Cross-origin resource sharing`跨域资源共享(vscode里面)

`特点`

后端返回的响应头会自动携带 **`Access-Control-Allow-Origin`**字段

cors的两种请求方式:
1.简单请求
只要同时满足以下两大条件，就属于简单请求
（1) 请求方法是以下三种方法之一：
 HEAD
 GET
 POST
（2）HTTP的头信息不超出以下几种字段：
 Accept
 Accept-Language
 Content-Language
 Last-Event-ID
 Content-Type：只限于三个值1.application/x-www-form-urlencoded  2.multipart/form-data 
 3.text/plain


2.非简单请求/复杂请求
	非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json
非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。
		浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的`XMLHttpRequest`请求，返回状态码204, 否则就报错,返回状态码405

2.jsonp

JSONP

JSONP是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，老式浏览器全部支持，服务器改造非常小
**实现原理**
网页通过添加一个`<script>`元素，向服务器请求JSON数据，利用src属性不受同源策略影响的特点；服务器收到请求后，将数据放在一个指定名字的回调函数里作为形参传回来,前端拿到这个形参,就是本次请求的结果.
**特点**
- 只接受GET请求的形式;
- 需要与后端进行请求参数的约定
- 有参数数据大小的限制
- 不是一个真正的ajax请求

3.proxy代理

proxy代理
**实现方法**
本地开启代理服务器，前端代码在代理环境下进行开发，请求由代理服务器进行转发，服务器与服务器之间不涉及到跨域问题
**常见的代理方式**
- liveServer => IDE的三方插件
- webpack devServer =>  前端工程化构建工具
- nginx  =>   nginx服务器代理
**liveServer代理服务配置方法**
1. visual studio code 安装live-server插件
2. 在设置中进行找到liveServer的配置项
3. 添加proxy代理设置
4. 选项信息: enable => 是否可使用代理，选择 true ;  baseUri =>  当前项目中的需要代理地址的基础路径   => proxyUri => 需要代理到哪一个服务器
5. 选择完成之后，重新启动liveServer  实现代理成功

4.iframe跨域（具体看vscode笔记）