前端网络学习

于 2022-02-07 21:15:30 发布
阅读量108 收藏
点赞数
分类专栏： 前端网络 文章标签： 前端 网络
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49220417/article/details/122814833
版权

文章目录

前端网络

互联网的起源

  • 1969 互联网—Internet(因特网，英特网)，网际网络
    • 加利福尼亚大学洛杉矶分校
    • 斯坦福大学
    • 加利福尼亚大学
    • 犹他州大学
  • 1989
    • 欧洲粒子物理研究所—协议（格式）
    • WWW（World Wide Web)
  • 1991 互联网起源

计算机的联通

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

冯诺依曼式计算机

——冯诺依曼（计算机之⽗）（图灵 计算机科学之父）

  • 运算器：

    • CPU（逻辑运算，整数运算）, GPU（显卡) (浮点数运算)

  • 存储器：

    • 内存（断电数据清空**,** 读写速度快）（RAM）
    • 硬盘（辅存）：（数据可以持久化，读写速度，相对较慢）

  • 控制器：

    • 主板上的⼀些器件

  • 输⼊设备：

    • 键盘，⿏标，⻨克⻛，⽹⼝

  • 输出设备：

    • 显示器，⽿机，⽹⼝

局域网： 一个路由器下的

IP地址

  • IP地址的格式：

    • IP地址分为四个段：xxx.xxx.xxx.xxx，每个段0~255，每个段，都是由8个0、1组成的。

  • IP地址的分类：

    • ⼀个IP地址分为两个部分：⽹络ID，主机ID
    • 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 config 查IP地址

域名与DNS解系

  1. www.baidu.com->域名
    问：能通过域名直接访问到⼀台机器吗？
    答：不可以的。

  2. ⽤域名和IP形成对应关系。
    ⾸先，计算机是不知道域名对应的IP的。
    问路由器，如果路由器认识这个域名，就返回⼀个IP，然后计算机访问这个IP。
    如果路由器不认识，他就问上⼀层路由器。
    如果问到了城市这个级别的路由器的时候，DNS服务器。
    如果DNS服务器不认识这个域名，继续向上级DNS服务器查找。
    互联⽹建⽴的时候，13台总的DNS服务器。

  3. 当向浏览器的地址栏中输⼊⼀个url按回⻋之后，⽹络中都会发⽣什么？(面试经典问题)

    ⽐如输⼊的是123.xyz
    （1）浏览器的缓存。
    （2）本机host。C:windows/system32/drivers/etc/host
    127.0.0.1（指的是当前的这台机器） localhost
    0.0.0.0 （表示不知道IP，默认打到自己的本机地址上）
    （3）家⾥路由器
    （4）上级路由、城市的LDNS服务器
    （5）继续向上级的DNS服务器找。
    (6) gDNS服务器。

五层网络模型

五层

  • 应用层：HTTP协议，DNS协议
  • 运输层：TCP协议（可靠）UDP协议（不可靠）
  • 网络层 ：IP地址–IP协议
  • 数据链路层 ：Mac地址（硬件地址）
  • 物理层

HTTP协议

请求：Request
  • 请求头
  • 格式：请求方式 路径 协议版本

​ 请求方式：GET POST（主要的这两种） 还有 HEAD,PUT,DELETE

​ POST /path?a=1&b=2 HTTP1.1
​ Host：www.baidu.com
​ Connection: keep-alive 长链接
​ User-Agent：asdasdasd （客户端）
​ Cookie

  • 数据体

    image-20220119100917607

TCP/IP协议（对方的IP，自己的IP，对方端口）HTTP协议（请求头）

响应：Response

  • 响应头

  • 数据体

  • 格式：协议版本 状态码 message

  • 属性：值

    cache-control:max-age:86480 缓存一天，在同一天中，如果请求的是一样的，则返回同样的结果

Get和Post请求方式的区别（面试)

  1. 是基于什么前提的？如果什么前提都没有，不使⽤任何规范，只考虑语法和理论上的HTTP协议。
    GET和POST⼏乎没有什么区别，只有名字不⼀样。

  2. 如果是基于RFC规范的。
    （1）理论上的（Specification）：GET和POST具有相同语法的，但是有不同的语义。
    get是⽤来获取数据的，post是⽤来发送数据的，其他⽅⾯没有区别。
    （2）实现上的（Implementation）：各种浏览器，就是这个规范的实现者。
    常⻅的那些不同：
    1）GET的数据在URL是可⻅的。POST请求不显示在URL中。(URL 不一定都在地址栏中)
    2）GET对⻓度是有限制的，POST⻓度是⽆限的。
    3）GET请求的数据可以收藏为书签，post请求到的数据不可收藏为书签。
    4）GET请求后，按后退按钮、刷新按钮⽆影响，post数据会被重新提交。
    5）GET编码类型：application/x-www-form-url，post的编码类型：有很多种 如：encodeapplication/x-www-form-urlencoded multipart/form-data
    6）GET历史参数会被保留在浏览器⾥，post不会保存在浏览器中的。
    7）GET只允许ASCII .post没有编码限制，允许发⼆进制的。
    8）GET与POST相⽐，GET安全性较差，因为所发的数据是URL的⼀部分。

Cookie与Session

Cookie(数据存在浏览器)

  1. 如果我们⽤JS的变量来存数据，那么在⻚⾯关闭的时候，数据就消失了。

  2. 保持登录状态是怎么做到的呢？
    按照正常的HTTP协议来说，是做不到的。
    因为HTTP协议，上下⽂⽆关协议。

  3. 所以说前端⻚⾯上，有可以持久化存储数据的东⻄。⼀旦登录成功，我就记载在这个⾥⾯。
    Cookie是有限制的：
    Cookie是存在浏览器⾥的，不是存在某个⻚⾯上的。是可以⻓期存储的。Cookie即使是保
    存在浏览器⾥，也是存放在不同的域名下的。

Cookie不可以跨域存储 Cookie在关闭浏览器时候是不可以消失的

  1. 过程

初始状态：没有登录

访问百度的登录，输⼊⽤户名，密码。

如果⽤户名和密码是正确的。百度的后端会向这个域名下，设置⼀个Cookie。写⼊⽤户
的基本信息（加密的）。

以后每⼀次向百度发送请求，浏览器都会⾃动带上这些Cookie。

服务端（后端）看到了带有ID的cookie，就可以解析这个加密的ID，来获取到这个⽤户
本身的ID。

如果能获取到本身的ID，那么就证明这个⽤户已经登录过了。所以后端可以继续保留⽤
户的信息。
缺点：如果某个坏⼈，复制了我浏览器⾥的cookie，他就可以在他的电脑上登录我的账号
了。
XSS注⼊攻击。

Session（数据存在服务器）

image-20220119120339416

数据存在Session上也有缺点
如果⽤户量⾮常⼤，上亿的⽤户。
在⽤户量很⼤的时候，服务器端很耗资源的。
因为后端可能不⽌⼀台服务器，⽤户的登录信息，⼀般只存在⼀台服务器上。
因为⽤户的登录操作，在哪台机器上执⾏的，就⼀般存在哪台机器上。
需要通过反向代理。（轮询，IP哈希。）

页面的正确打开方式

B/S结构 C/S结构
Client/Server——Client只负责内容的展示，Server负责提供内容。
Browser/Server——Browser只负责内容的展示，Server负责提供内容。
www.baidu.com
index.html

⻚⾯的本质就是⼀个字符串。带有HTML格式的字符串。
浏览器 向服务器 请求⼀个⻚⾯的本质是什么？
（1）访问 www.baidu.com
（2）服务器接收到这个请求后，服务器想要把这个⻚⾯的内容（HTML格式的字符串）返回
给浏览器。
（3）⻚⾯的字符串存在哪⾥呢？存在HTML⽂件⾥。例如：index.html
（4）服务器端要读取⽂件。
（5）将读取出来的内容返回给浏览器。最后返回的是⼀个字符串，这个字符串的来源可能是⽂件，可能是缓存，可能来⾃于数据库。

服务器&服务容器

服务器：严格的说，服务器是⼀台计算机，这台计算机，只提供服务。（不是⽤户⽤的）
但是，我们常说的这个服务器，指的是服务容器，不是服务器。
服务容器：是⼀个程序。程序可以监听⼀个端⼝。读取⽂件，并且返回。
如果我们想通过访问服务器（服务容器）的⽅式，来访问我们⾃⼰写的⻚⾯。
我们就得装⼀个服务容器的程序

安装WebServer插件

  1. webstorm 直接在右上角的浏览器打开

  2. VS

    1. sublime ctrl +shift + p 输入 install 打开页面后搜索 Sublime Server

      add Folder to protect --> view in …

发送网络请求

  • 在浏览器中直接输入网址
  • location.href = “url”，可以发出请求，但是页面会跳转
  • 带有src属性的标签，请求是可以发出的，服务端也可以返回，但是返回之后能否被应用，还要看浏览器（页面无法处理返回结果）
  • 带有href 属性的标签 请求是可以发出的，服务端可以处理 返回，返回后是否被应用看浏览器，（页面无法处理返回结果）
  • 带有action属性的标签 例 form 表单，可以向后端发出请求，但是form表单发出请求后，页面也会跳转 页面会跳转
  • ajax 可以用代码控制，页面不会跳转，服务端返回的结果可以用JS继续处理
 <script>
       // ajax 要素 
       /*（1） 请求方式
       (2) url
       */
       //ajax
       // ie6不支持该方法 增加if 语句
       var xhr = null;
       // 如果该方法存在
       if(window.XMLHttpRequest)
       {
                xhr = new XMLHttpRequest();
       }else{
           //ie6带的
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
       }
       // 渡一准备的接口
       // https://developer.duyiedu.com/edu/testJsonp?callback=asd   jsonp格式
       //http://developer.duyiedu.com/edu/testAjax
       //https://developer.duyiedu.com/edu/testAjaxCrossOrigin  不报错
       xhr.open("get","https://developer.duyiedu.com/edu/testJsonp?callback=asd ");// 报错
       xhr.send();
   </script>

跨越问题（ajax)

注意：报错 Control-Allow-Origin

跨域访问资源

哪些东⻄属于资源？

  • js⽂件是资源的，但是js⽂件是允许被跨域请求的。css⽂件，jpg,png等。src属性的资源都是可以被跨域请求的。href资源⼤部分都是可以被跨域请求的。

哪些资源算跨域请求的资源？

  • 后端接⼝的数据。
  • 其它域的cookie
  • 其它域的缓存

什么是其它的域？怎么样算跨域？

⻚⾯本身：有协议（http/https），域名，端⼝

​ 要请求的数据：http://www.baidu.com:80

协议，域名，端⼝这三个，有任意⼀个不⼀样就算跨域

跨域这个⾏为，发⽣在哪⾥？

答案：

  1. 即使跨域了（协议，域名，端⼝号有不⼀样的），请求也可以发出。

  2. 服务器端也是可以接收的。

  3. 服务器端也是可以正常处理的。

  4. 服务器端也是可以正常返回数据。

  5. 浏览器也能接收到这些数据。

  6. 接收到之后，发现当前⻚⾯的域和请求的域不同，所以判定为跨域。

  7. 我们的代码在这等着结果呢，但是因为浏览器判定跨域了，不会把结果传递给我们的代码。

解决跨域问题：

  1. 后端（别⼈家的）配合我们进⾏跨域。
    pan.baidu.com ——> zhidao.baidu.com
    （1）JSONP（正常的情况，返回的数据都是JSON格式。JSONP是⼀种特殊的格式。）
    （2）后端设置Access-Control-Allow-Origin属性以⽀持跨域。（聊天机器⼈课讲，因为需要nodejs）

  2. 后端不配合我们进⾏跨域。
    （3）iframe（只能显示，不能控制）
    （4）通过后端代理（⾃⼰的后端）（后⾯聊天机器⼈讲，因为需要nodejs）

    <iframe src = "https://www.baidu.com">

   </iframe>

原生JS发送ajax

 <div id="test"></div>
    <script>
        var xhr = null;
        if(window.XMLHttpRequest)
        {
                 xhr = new XMLHttpRequest();
        }else{
         xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        console.log(xhr.readyState);//0 刚创建对象 状态为0
        //初始化，与服务器建立连接 1
        // true false   false同步：注意阻塞问题   不传入参数或者参数为true异步：没等到返回结果就继续执行下面的代码表示同时进行
        // 在计算机中同步表示串行 异步表示同时进行 可以理解为同线程和异线程
        xhr.open("get","https://developer.duyiedu.com/edu/testAjaxCrossOrigin",true);
   
        console.log(xhr.readyState);//1
        // 将接受到的结果输出出来当属性变化时候执行
         xhr.onreadystatechange = function(){
            // readyState == 4 时表示请求完成已经接收到数据
            //console.log(xhr.readyState); 2 3 4
            //status == 200 网络请求都会有一个状态码，俩表示这个请求 200 请求成功
            // http 状态码 2** 表示成功 3** 表示重定向  4** 客户端错误 404 页面为找到 5** 服务端错误
            if(xhr.readyState == 4 && xhr.status == 200)
            {
                //console.log(xhr.responseText);
              document.getElementById("test").innerText = xhr.responseText;
                // 转化为jsonp 对象
                var data = JSON.parse(xhr.responseText);
                console.log(data);
            }
        }
        // 先把方法赋值上 在send
        xhr.send();

JSONP 的使用与特性

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

        //jsonp跨域，只能使用get方法，如果我们设置的是post方法，jquery会自动转为get方法。
        //是不是在jsonp里面我只能使用get方法？是不是我设置的post方法都会转为get方法？
        //不是。
        //jquery会先判断是否同源，如果同源，那么设置的是get就是get，设置的post就是post
        //如果不是同源，无论设置的什么，都改为get. 同源有没有跨越

    </script>

JSONP原理

为什么实现JSONP

  • 因为从一个接口获取一个数据，但是这个接口和当前页面不是同源的。（也就是跨域了）但是这个接口是支持JSONP的。
  • script标签，有src属性，所以可以发出网络请求，script标签，虽然可以引用其他域的资源，浏览器不限制。，但是，浏览器会将返回的内容，作为js代码执行。
  • asd({“status”:“ok”,“msg”:“Hello! There is DuYi education!”})，相当于调用了asd方法，传入了一个json对象作为参数。

jsonp 原理

  1. 判断请求与当前页面的域，是否同源，如果同源则发送正常的ajax，就没有跨域的事情了。

​ 2. 如果不同源，生成一个script标签

​ 3. 生成一个随机的callback名字，还得创建一个名为这个的方法。

​ 4. 设置script标签的src，设置为要请求的接口。（标签属性的请求都是get)

​ 5. 将callback作为参数拼接在后面。

​ 以上是前端部分====

​ 6. 后端接收到请求后，开始准备要返回的数据

​ 7. 后端拼接数据，将要返回的数据用callback的值和括号包裹起来

​ 例如：callback=asd123456，要返回的数据为{“a”:1, “b”:2},

​ 就要拼接为：asd123456({“a”:1, “b”:2});

​ 8. 将内容返回。

​ 以上是后端部分====

​ 9. 浏览器接收到内容，会当做js代码来执行。

​ 10. 从而执行名为asd123456的方法。这样我们就接收到了后端返回给我们的对象。

 <script>
        var $ = {
                // 有一个方法叫ajax 参数为options
                ajax: function (options) {
                    var url = options.url;
                    //get  post
                    var type = options.type;
                    // json jsonp
                    var dataType = options.dataType;
                    //判断是否同源（看协议 域名 端口号）
                    // 获取URL 的域
                    var targetProtocol = ""; // 目标接口的协议
                    var targetHost = ""; // host 是包含域名和端口号
                    /* 判断是否存在http://或者 https:// 
                    如果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 Math.floor() 返回小于或等于一个给定数字的最大整数。
                        var callback = "ab" + Math.floor(Math.random());
                   
                         //给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);
                    }
                }
            }
        }
        $.ajax({
            url: "http://developer.duyiedu.com/edu/testJsonp",
            type: "get",
            //T大写
            dataType: "jsonp",
            success: function (data) {
                console.log(data);
            }
        });
  
    </script>

                    }
                    script.id = callback;
                    document.head.appendChild(script);
                }
            }
        }
    }
    $.ajax({
        url: "http://developer.duyiedu.com/edu/testJsonp",
        type: "get",
        //T大写
        dataType: "jsonp",
        success: function (data) {
            console.log(data);
        }
    });

</script>
热爱生活的小娜娜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
php 模拟登陆爬取_PHP模拟登录并获取数据
weixin_39933484的博客
12-19 427
PHP模拟登录并获取数据cURL 是一个功能强大的PHP库，使用PHP的cURL库可以简单和有效地抓取网页并采集内容，设置cookie完成模拟登录网页，curl提供了丰富的函数，开发者可以从PHP手册中获取更多关于cURL信息。本文以模拟登录开源中国(oschina)为例，和大家分享cURL的使用。PHP的curl()在抓取网页的效率方面是比较高的，而且支持多线程，而file_get_conten...
【php】curl模拟登录抓取页面信息
cocole2的博客
05-20 2401
【php】curl模拟登录抓取页面信息 在本项目中，使用php抓取四川大学综合教务网站的成绩信息、课程信息以及登录用户的基本资料，解析数据并存入数据库，以实现对所得信息的进一步分析，并呈现给用户。 本文主要记录了使用curl模拟登录，获取cookie1并进行数据抓取的过程。curl基本特性
php模拟登陆,php模拟登陆抓取
weixin_35480412的博客
03-09 179
此为在ci框架的抓取程序：defined( 'BASEPATH' ) OR exit( 'No direct script access allowed' );class Login extends CI_Controller {public function index() {$this->checklogin() ;var_dump($this->crab());}// 登录pri...
php登录页面后抓取页面内容,PHP模拟登陆抓取页面内容
weixin_39802519的博客
03-10 244
平时开发中经常会遇到抓取某个页面内容， 但是有时候某些页面需要登陆才能访问， 最常见的就是论坛， 这时候我们需要来使用curl模拟登陆。 大致思路：需要先请求提取 cookies 并保存，然后利用保存下来的这个cookies再次发送请求来获取页面内容，下面我们直接上代码...
史上最全的前端学习思维导图
03-15
"史上最全的前端学习思维导图"是一个集大成者，它涵盖了从基础到高级的各种前端技术，帮助开发者构建完整的知识框架。以下是对每个文件名称所对应的知识点的详细解释： 1. **项目类面试题.xmind** 这个思维导图...
前端技术学习路线图-CSDN_pro
06-06
学习前端技术需要掌握一系列的技能和知识，以下是一个详细的前端技术学习路线图： 首先，要掌握前端的基础，包括HTML、CSS和JavaScript。HTML是构建网页结构的基础，包括标准如HTML5、XHTML和XML。CSS用于样式化...
在线学习平台的前端设计优化与实现
04-30
随着互联网技术的发展，人们越来越习惯通过网络获取信息，在线学习平台 也因此应运而生。同时，人们对于网站的易用性和交互体验的要求也越来越高， 设计良好、性能优良的网站可以提高用户体验，增加用户留存率，而...
我的前端资源学习笔记。。。
03-03
【前端资源学习笔记】 在前端开发领域，学习和掌握各种技术是至关重要的。这份笔记将带你深入了解前端开发的核心概念、工具和技术，助你成为一个全面的前端开发者。 1. HTML（超文本标记语言）：HTML是网页的基础...
php简单爬虫使用登录账号密码爬取列表（爬虫二篇）
vickay的博客
02-24 8252
php简单爬虫使用登录账号密码爬取列表关于思路1.定义一个变量$data用来存放你想爬取网站的登录账号和密码以及是否‘记住密码’，此篇我以博客园为例 $data='input1=Dco4FpN99He1KN+m+GNujkxG29ZJ1k8HqTCJVPnR3l8H8PdkPCTcjgbajphjoBJPiS3XiPYYcNJ9GuS9eyrEmLRHo8okmJYYkyoYbxzZoqat
php 爬虫 登陆,php curl 需要登录爬取页面
weixin_32163411的博客
03-16 404
$data='username=demo_peter@126.com&password=123qwe&remember=1';$curlobj = curl_init(); // 初始化curl_setopt($curlobj, CURLOPT_URL, "http://www.imooc.com/user/login"); // 设置访问网页的URLcur...
php 模拟登陆爬取_php curl 模拟登录并获取数据实例详解
weixin_39629093的博客
12-19 110
PHP的curl()在抓取网页的效率方面是比较高的，而且支持多线程，而file_get_contents()效率就要稍低些，当然，使用curl时需要开启下curl扩展。代码实战先来看登录部分的代码：//模拟登录function login_post($url, $cookie, $post) {$curl = curl_init();//初始化curl模块curl_setopt($curl, CU...
适合前端学习的几个网站
热门推荐
**My Coding Family**
12-05 1万+
** 推荐几个实用的前端网站 ** 网站 url 实验楼 https://www.shiyanlou.com/ 基于Vue 2.0 的桌面端组件库 http://element-cn.eleme.io/#/zh-CN/component/installation 菜鸟教程 https://www.runoob.com/ w3cschool http://www.w3sc...
php 爬取网页几种常用方法
阿……莫西林杀菌室
07-13 4012
主要流程就是获取整个网页，然后正则匹配（关键的）。PHP抓取页面的主要方法,有几种方法是网上前辈的经验，现在还没有用到的，先存下来以后试试。file()函数file_get_contents()函数fopen()-&gt;fread()-&gt;fclose()模式curl方式 （本人主要用这个）fsockopen()函数 socket模式插件(如：http://sourceforge.net/p...
Bootstrap前端框架学习详解
Bootstrap是一个流行的开源前端框架，由Twitter开发并维护，它提供了丰富的组件和样式，帮助开发者快速构建响应式和移动优先的网页。这个学习笔记涵盖了Bootstrap的基础知识和关键特性，适合初学者和有经验的开发者...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值