前端网络基础-阿里云开发者社区

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习网络</title>
    <script src="../common//jquery-3.4.1.js"></script>
</head>
<body>
    <!-- 
一.网络的基础应用：网络的起源
网络起源于1969年，加利福尼亚洛杉矶分校，斯坦福大学，加利福尼亚大学，犹他州大学 信息共享 形成互联网的雏形
互联网—— Internet（音译：因特网，英特网），网际网路
1989年 欧洲粒子物理研究生——协议（格式）WWW (world wide web) 万维网
普及： 1991年 
二、计算机的连接方式：
计算机A    ——— 网线———计算机B
计算机两两通过网线连接，实现计算机之间的通讯
冯诺依曼(计算机之父)式计算机
运算器： CPU, GPU(显卡)
存储器： 内存（断电数据清空，读写数据块）
               硬盘（辅存）：（数据可以持久化，读写速度相对较慢）
控制器： 主板上的一些器件
输入设备： 键盘，鼠标，麦克风，网口
输出设备：显示器，耳机，网口
三：网络，
1.局域网： 简单说是在同一路由器下面的设备，
2.广域网：用于连接局域网
IP地址
IP地址的格式： 分为4段： xxx.xxx.xxx.xxx每一段从0 - 255 2的8次方，每个段都是由8个0或者8个1组成的。分为两个部分，网络ID,主机ID
IP地址的分类：A,B,C,D,E类,
A类：0.0.0.0 ~ 127.255.255.255（一个网络有1600万台主机）
B类：128.0.0.0 ~ 191.255.255.255 172.16.0.0 ~ 172.31.255.255 阿里云的范围
C类：192.0.0.0 ~ 223.255.255.255 （192.168.xxx.xxx）
D类：（多播地址）
E类：保留给未来使用
如果你想单间一个服务器，让别人能够访问到，必须有一个公网的ip
四，域名与DNS解析：
如：www.baidu.com ->域名  
问： 能通过域名访问到一台机器么？
答：不可以的，需要用ip地址才可以访问到机器
用域名和IP形成对应的关系，使用dns解析。
首先 计算机不知道域名不知道对应的IP的。
问路由器，域名和IP的映射表。如果路由器认知这个域名，就会返回一个IP，如果计算机不认识，他就会问上一层的路由器。如果问道了城市级别的路由器的时候，还不知道IP的时候，然后就会问dns服务器。
如果DNS不认识这个域名，就会向上一级的DNS服务器查找。如果找到会进行域名和IP的映射关系的缓存。
在互联网建立的时候，13台总的DNS服务器。只要有一台DNS服务器在运行，中国的网络就可以使用。
问：当像浏览器的地址中输入一个url按回车之后，网络中会发生什么;
答： 比如输入123.xy, 首先看浏览器的缓存，浏览器不认识在看本机host.windows 在 C:windows/system32/drivers/ect/host 文件中 会有一个 127.0.0.1  localhost， 然后是家里的路由器有没有缓存。
简答  浏览器缓存 —— 本机host文件 —— 家里路由器 —— 上级路由、城市的DNS服务器， 直到找到gDNS服务器。 然后每一个地方就会对你输入的域名进行缓存。找到IP进行访问IP
0.0.0.0 是不知道IP地址
五、五层网络模型
物理层 —— 数据链路层 —— 网络层 —— 运输层 ——应用层
0101010   0是低电平  1是高电平
物理层： 使用 光纤，铜 等介质来传输数据 如01010
数据链路层： mac地址 物理上的，主要用来传输
网络层： IP地址，—— IP协议
运输层： TCP协议（传输可靠，反复传送），UDP协议
应用层：软件会用到的协议，HTTP 协议 DNS协议
HTTP协议必须伴随着TCP协议，IP协议，分为两个部分： 请求，request， 响应：response 
发送hello协议    TCP/IP协议（对方的IP，自己的IP，对方的端口）HTTP协议（请求头）
Request: 请求头 包含，请求方式，路径，协议版本 请求方式： get post 
加密是自上而下（应用层 -》物理层） 解密是从自下而上（物理层 -》 应用层）
六、HTTP协议
请求： Request
请求头： 请求方式（get,post，head，put,delete）， url协议版本 
 数据体 
响应; Response
协议本版，状态码，信息，属性值 
问：get与post的区别
答： get请求的参数都在url里面，get发送的参数也可以不在url里面（明文协议），基本外部环境的HTTP网络协议里面，所以get的参数就在url里面。 post用来发送文件信息。
七： Get与post请求的区别
1.基于什么前提的？如果什么前提都没有，是不是用任何规范，只考虑语法和只理论上的HTTP协议。
GET与POST几乎没有什么区别，只有名字不一样
2.如果基于RFC规范的。
 (1)理论上的(speciation)： get和post具有相同语法的，但是又不同的语义。get是用来获取数据的，post是用来发送数据的，其他方面没有区别。
实际上的（implementation）：各种浏览器，就是这个规范的实现者，
常见的哪些不同： 
    1)get的请求数据在url上是可见的。post请求不显示在url上；
   2）get对长度是有限制的，post的长度无限制
   3）个体请求的数据可以收藏为书签，post请求不可以收藏
   4） get请求后，按后退按钮，刷新按钮无影响，post数据会被重新提交.
   5) get编码类型： application/x-wwwpform-url post编码类型：有很多种，如 encodeapplication/x-www-form-urlencoded      multipart/form-data 
   6) get历史参数会被保留在浏览器里，post不会保存在浏览器中
   7）get只允许ASCII编码  post 没有编码限制，允许发送二进制
    8）get 与post 相比，get安全性相对较差，因为所发的数据是url的一部分。
八、cookie与session的区别：
1.如果我们用js变量来存储数据，那么在页面关闭的时候，数据就消失了。自动登录
2.保持登录状态， 
按照正常的HTTP协议，是做不到的。因为HTTP协议，上下文无关协议
3.所以说前端页面上，有可以持久化数据的东西。一旦登录成功，我就记载这个页面
Cookie是有限制的，是存在浏览器的，不是存在页面上的。是可以长期存储的。不会因为页面关了而消息的。Cookie即使是保存在浏览器里面，也是存放在不同的域名下面。
1.初始状态： 没有登录
2.访问百度的登录，输入用户名，密码
3.如果用户名与密码是正确的。百度的后团会向这个域名下面设置一个Cookie.写入用户的基本信息（需加密）
4.以后每一次向百度发送请求，浏览器都会自动带上cookie
5.服务段（后端）看到了带有id的cookie，就可以解析这个加密额ID，来回切到这个用户本身的ID
6.如果能获取到本身的ID，那么就证明这个用户已经登录过了，所以后端就可以继续使用用户的信息
缺点： 如果某个坏人，复制了我浏览器的cookie,那么就可以在他的电脑里面登录我的账号。
session的信息是存在服务器中的。安全。
缺点： 如果用户量非常大，上亿的用户。存在服务器的内存里，在用户量很大的时候，服务器很消耗资源的。
因为后端可以不止一台服务器，如果用户的登录信息，一般只存在一台服务器，因为用户的登录操作在哪台服务器上执行的，那就存在哪台机器上。需要通过反向代理（轮询，IP哈希）
xss注入攻击。获取的就是cookie
八、B/S 结构     C/S结构
Client/Server-- Client只负责内容的展示，Service负责提供内容
Brower/Server--Brower只负责内容的展示，Service负责提供内容
index.html 页面的本质就是字符串。带有HTML格式的字符串    后缀名只是告诉操作系统尽量用啥软件打开
问：浏览器 向服务器请求一个页面的本质是什么？
答：1.输入www.baidu.com  
2. 服务器接收到这个请求后，服务器把这个页面的内容（HTML格式的字符串返回浏览器），
3.页面字符串存在哪里呢？ 存在HTML文件里。例如：index.html
4.服务器读取文件。
5.将读取的内容返回给浏览器
最后返回的是一个字符串，字符串的来源可能是文件，可能是缓存，可能来之数据库。
什么是服务器：严格说，服务器是一台计算机，只提供服务。（不是给用户用的），但是我们常说的这个服务器，指的是服务容器，不是服务器。
什么是服务容器： 是一个程序。程序可以监听一个端口。读取文件，并且返回。
如果我们通过访问服务器的方式，来访问我们自己写的页面。我们就得装一个服务器容器的程序。
九、有哪些方式发送web请求
1.在浏览器直接输入网址 (无法用代码控制)
2.location.href 可以发出请求，但是页面会发生跳转  保留请求在f12勾上，prevent log 
3. 带有src属性的标签，列如：img script  等，请求一定可以发出，服务端是可以处理的，也是可以返回的，返回能不能应用到要看浏览器
4.带有href属性的标签 例如：link 请求是可以发出的，服务端是可以处理的，也是可以返回的，但是能不能被应用，还是要看浏览器
5.带有action属性的标签，列如：form表单  也可以像后端发出请求，但是form表单发出请求之后，页面会跳转。
// 希望有一种方式，可以用代码控制，页面不会跳转，服务端返回的结果，页面也不会跳转 那就是ajax
简单实现ajax
// 要素 请求方式 get post  
// 请求方式
var xhr = null;
if(window.XMLHttpRequest){
 xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject(MICROSOFT.XMLHttp);
}
xhr.open('get','http:www.baidu.com');
xhr.send();
十: 跨域
 跨域访问资源, 
 问:哪些东西属于资源?
 js文件算么? js文件肯定算是资源的,但是js文件是允许跨域请求的
 css文件,jpg,png,所有src属性的资源都是允许跨域请求的.href资源大部分都是可以跨域请求的
 问:哪些资源算跨域请求的资源?
 1.后端接口的数据
 2.其他域的cookie
 3.其他域的缓存
  问:什么是其他的域?怎么样算跨域
  页面本身:有协议(http/https) ,域名,端口
  要请求的数据: http://www.baidu.com:80 默认端口号为80
  协议,端口号,域名 三者有任意一个不同就会产生跨域
  问:跨域的这个行为发生在哪里? 发生在浏览器中
  答案: 1.即使跨域了(域名,端口号,协议有不一样的),请求也可以发出
        2.服务端也是可以接受的
        3. 服务端也是可以正常处理的
        4. 服务端也可以正常返回数据
        5. 浏览器也能接受到这些数据
        6.接受到之后,发现当前页面的域和请求的域不同,所以判断为跨域
        7.我们的代发在这等着结果,但是浏览器判定跨域了,不会把结果返还给我们的代码
   问:怎么解决跨域问题?
   1.后端是否配合我们进行跨域.
    pan.baidu.com ------访问--- zhidao.baidu.com
    解决方法: 1).jsonp (json and padding 正常情况下,返回的数据都是json格式,jsonp是一种特殊的数据结构)
              2).后端设置Access-Control-Allow-Origin属性
   2.后端不配合我们进行跨域
              3)使用iframe进行跨域(只能显示,不能控制)
              4)通过后端代理(自己的后端)
     -->
</body>
<!-- 原生js实现ajax -->
<script>
    // 原生ajax
    var xhr = null;
    // 兼容ie6 
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject('Microsoft.XMLHttp');
    }
    // 默认发送get请求 open第三个参数是Boolean, 是否异步
    xhr.open('get', 'http://deceloper.duyiedu.com/edu/testAjaxCrossOrigin');
    // 判断当前的状态
    xhr.onreadystatechange = function () {
        // readyState == 4 代表请求已经完成, 已经接收到数据
        // xhr.status -- 200 表示网络请求成功
        // 2** 表示成功
        // 3** 表示重定向
        // 4** 表示客户端的错误, 404 表示也买你没有找到
        // 5** 表示服务端出错
        if (xhr.readyState == 4 && xhr.status == 200) {
            var data = JSON.parse(xhr.responseText);
        }
    }
    // 请求成功后在发送send 如果open第三个参数传true为异步模式,false为同步模式,同步会引起代码阻塞
    xhr.send();
    // 在计算机的世界里,异步和同步与现实世界中是相反的
    // 在计算机的世界里,同步表示串行, 计算机异步的话,代表的是同时进行,可以理解为同线程和异线程
</script>
<!-- 实现jsonp -->
<script>
       function aa(res) {
        console.log(res, '-------')
    }
    // jsonp 格式特殊在哪里?
    // 发送的时候,会带上一个参数callback
    // 返回的结果不是json
    // 返回的是一个callback的名字 + ( + json +);
    $.ajax({
        url: 'http://developer.duyiedu.com/edu/testJsonp?callback=aa',
        type: 'get',
        dataType: 'jsonp',
        success: function (data) {
            console.log(data,'+++++++++')
        }
    })
    // json跨域,只能使用get方法,如果我们设置的是post方法,jquery会自动转换成get方法
    // 问: 是不是在jsonp里面只能使用get方法,是不是我们设置的post方法都会转为get方法
    // 答案: 不是,jquery会先判断是否为同源,如果同源,设置的get就是get,设置的post那就是post,如果不是同源,无论设置的是啥,都会改为get
</script>
<!-- jsonp原理 -->
<script>
    // 从一个接口获取数据,但是接口和当前页面不是同源的,也就是跨域了,但是这个接口是支持jsonp的
    // 用什么样的方法可以获取数据,还需要骗过浏览器
    // script标签,有src属性,可以发出网络请求
    // script虽然可以引用其他域的资源,浏览器不限制,但是浏览器会将返回的内容,作为js代码执行
    // aa,jQuery341006386117554828674_1588337822742({"status":"ok","msg":"Hello! There is DuYi education!"})
    // 相当于调用了aa方法, 传入的json对象作为参数
    // jsonp原理:
    //1.判断请求与当前页面的域是否同源,如果同源则发送正常的ajax,就没有跨域的事情了
    //2. 如果不是同源,生产一个script标签
    //3. 生成一个随机的callback的名字,还得创建一个名为aa2434的方法
    //4. 设置script标签的src,设置为要请求的接口
    //5. 将callback作为参数拼接在后面
    // -------------以上是前端部分-------------
    //6. 后端收到请求后,开始准备要返回的数据
    //7. 后端拼接数据,将要返回的数据用callback的值用括号包裹起来
    // 列如: callback=aa2434,要返回的数据为{a:1,b:2} 就要拼接为:aa2434({a:1,b;2})
    //8. 将内容返回
    //----------------以上是后端方法---------
    //9. 浏览器接受到内容,会当作js代码来执行
    //10. 从而执行名为aa2434的方法.这样我们就接收到后端返回给我们的对象
    var testJsonp = {
        ajax: function (options) {
            var url = options.url;
            var type = options.type;
            var dataType = options.dataType;
            // 判断是否同源
            // 获取目标url的域
            var targetProtocol = ""; //目标接口的协议
            var targetHost = "";// host包含域名和端口
            // 如果url不带有http,https 那么访问的一定是相对路径,相对路径一定是同源的
            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;
                    // 生成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);
                }
            }
        }
    }
    testJsonp.ajax({
        url: 'http://developer.duyiedu.com/edu/testJsonp',
        type: 'get',
        dataType: 'jsonp',
        success: function (data) {
            console.log(data, '========')
        }
    })
</script>
</html>
前端网络基础

热门文章

最新文章

相关课程

相关电子书

相关实验场景
