前端需要掌握的网络知识

编程语言 2023-10-03 03:16:21 阅读次数: 0

文章目录

访问网页流程

URI,URL,URN

URI（Uniform Resource Identifier ）：统一资源标识符，就是在某一规则下能把一个资源独一无二地标识出来。
URL（Uniform Resource Locator）：统一资源定位符。
URN（Uniform Resource Name）：统一资源名称。

  • url,urn都是uri的子集

  • URI只是资源标识

  • URL Uniform Resource Locator

    • 资源标识
    • 具有定位资源的功能
    • 指明了获取资源所采用的协议:协议名称+主机名称+端口号+路径+文件
      (https:443,http:80,mysql:3306)

  • URN 和URL相比.没有指定协议名称

DNS解析

  • DNS
    域名系统（英文：Domain Name System，缩写：DNS）是互联网的一项服务。它作为将域名和IP地址相互映射的一个分布式数据库，能够使人更方便地访问互联网。

  • 一个域名对应一个ip地址

  • 一个ip地址可以对应多个域名

  • gTLD
    通用顶级域（英语：Generic top-level domain，缩写为gTLD）是互联网名称与数字地址分配机构（IANA）管理的顶级域（TLD）之一。该机构专门负责互联网的域名系统。

通用顶级域在1985年1月创立，当时共有6个通用顶级域，主要供美国使用：
.com- 供商业机构使用
.edu- 供教育机构使用
.gov- 供政府及其属下机构使用
.mil- 供军事机构使用
.net- 供网络服务供应商使用
.org- 供不属于其他通用顶级域类别的组织使用

  • DNS解析过程

  • 本地DNS一般是指你电脑上网时IPv4或者IPv6设置中填写的那个DNS。这个有可能是手工指定的或者是DHCP自动分配的。

  • host文件与dns
    但如何实现域名和IP地址的一一对应关系，是需要亟待解决的一个问题。
    因此，系统会通过一个本地HOSTS文件，来实现域名转换IP地址额功能。
    hosts 文件包括主机名和 IP 地址的对应关系。
    当需要通过主机名访问主机时，它就会查看本地的 hosts 文件，从文件中找到相对应的 IP 地址，然后进行报文发送。如果在 hosts 文件中没找到相关信息，则主机访问失败。

由于hosts文件储存在本地，所以查找响应速度快，但缺点也十分明显。一方面，每台主机的hosts文件都需要手动更新，不能实时获得我们想要访问站点的对应关系，且操作起来比较繁琐容易出错；另一方面，随着互联网规模的不断扩大，接入计算机的数量不断增加，维护难度越来越大，每台主机同步更新，几乎是一件不可能完成的任务。
因此，我们需要一种更加智能简便容易维护的翻译机制，来完成相同的翻译功能，于是便出现了DNS域名系统，一个可以解决主机名和 IP 地址互相转换的系统。无论网络规模变得多么庞大，都能在一个小范围内通过 DNS 进行管理。

DNS与hosts文件一样，同样储存着域名与IP地址之间的对应关系，所不同的事DNS独立于主机存在，所以无需用户手动更新，且DNS基于其独有的递归查询方式，可自动更新存储记录值，因此可以快速获得新站点的IP地址，解析访问效率大为提升。
但与host文件一样，一台DNS服务器无论性能多么强大都无法存储所有主机记录，所以域名系统是一个分布式数据库系统，域名（主机名）到 IP 地址的解析可以由若干个域名服务器共同完成。每一个站点维护自己的信息数据库，并运行一个服务器程序供互联网上的客户端查询。DNS 提供了客户端与服务器的通信协议，也提供了服务器之间交换信息的协议。由于是分布式系统，即使单个服务器出现故障，也不会导致整个系统失效，消除了单点故障。

  • IP端口号范围

65535
255是1个字节最大保存的数值(十进制)，如果是16进制则是FF。

而65535是2个字节最大保存的数值(十进制)，如果是16进制则是FF FF。

TCP

UDP

http,https

https://www.baidu.com:80/ 这个是不能访问的
https://www.baidu.com:443/ 正常访问

https默认端口是443,同理http是80

TCP三次握手



https://blog.csdn.net/jun2016425/article/details/81506353

www

http报文

  • 传统http请求




请求方式

8种请求方式和常见的4种


get post 请求方式







http状态码

304

重定向到缓存


302

重定向到网页

404 403

500 503

accept content-type


  • accept中是以逗号分隔的而不是分号


浏览器缓存


  • no-cache 不是禁止缓存而是忽略缓存副本,强制从服务器获取资源
  • cache-control 优先级高于prgma,新的协议特性高于旧的协议
  • cache-control 属于响应头

  • 格林威治时间东+西-,中国是东8区,时间为格林威治时间+8小时

keep-alive



content length

refere




http协议版本

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xE9St6F1-1652268740093)(https://gitee.com/jingyu7/pic/raw/master/202202051032668.png)]

TCP四次挥手


同源策略


减少http请求的方法

  • 因为http请求最耗费资源所以要减少http请求

查看百度首页源码发现style,html,js混合在一起,没有分离,就是为了减少http请求.
但任何项目都分开发版和线上版,在开发版我们要做到样式逻辑分离

ajax

通信基础是http,局部加载

6中可以获取跨域数据的方法

  • iframe.contentWindow.name
<body>
  <iframe src="b.html" id="myIfram"></iframe>
</body>
<script>
  var myIfram = document.getElementById('myIfram');
  myIfram.onload = function(){
      
      
    console.log(myIfram.contentWindow.name)
    // 这里的name就是ifram中定义的window.name
  }
</script>
  • window.name 属性可以被设置
    只要设置了window.name,不关闭窗口,随意跳转网页,这个窗口的window.name属性永远不变
    举个简单的例子：你在某个页面的控制台输入：
window.name = "hello world"
window.location = "http://www.baidu.com"

页面跳转到了百度首页，但是window.name却被保存下来了，还是hello world。

  • 跨域案例
  1. 首先创建 a.html 文件：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a.html</title>
</head>
<body>
    <script>
    let data = '';
    const ifr = document.createElement('iframe');
    ifr.src = "http://localhost:8081/b.html";
    ifr.style.display = 'none';
    document.body.appendChild(ifr);
    ifr.onload = function() {
      
      
        ifr.onload = function() {
      
      
            data = ifr.contentWindow.name;
        console.log('收到数据:', data);
        }
        ifr.src = "http://localhost:8080/c.html";
    }
    </script>
</body>
</html>
  1. 再创建 b.html 文件：
<script>
   window.name = "你想要的数据!";
</script>
  1. http://localhost:8080/a.html在请求远端服务器http://localhost:8081/b.html的数据，(ifram跨域属性)
  2. 我们可以在a.html下新建一个iframe，该iframe的src属性指向服务器8081/b.html
  3. 服务器文件b.html设置好window.name值。
  4. 但是由于a.html页面和该页面iframe的src不同源的话，则无法操作iframe里的任何东西，所以就取不到iframe的name值， 不同域下的iframe不能进行操作。
  5. 所以我们需要在b.html加载完之后重新换个src区指向一个同源的html文件，或者设置成about:blank都行，
  6. 这时候我们只要在a.html相同的目录下件一个c.html空白即可。
  7. 如果不重新指向src的话直接获取的window.name的话就会报错。
  • document.domain 返回当前网站域名’www.baidu.com’,也可以被设置
  1. document.domain降域,
    什么是降域
    如http://a.justfun.me 和 http://b.justfun.me，后面的justfun.me相同，
    那么就可以使用document.domain将二者的域名设置为justfun.me，来实现同源
  2. 对于主域相同而子域不同的情况下，可以通过设置 document.domain 的办法来解决
  3. 具体做法是可以在 http://www.example.com/a.html和http://sub.example.com/b.html两个文件分别加上 document.domain = “example.com”
  4. 然后通过 a.html 文件创建一个 iframe，去控制 iframe 的 window，从而进行交互，当然这种方法只能解决主域相同而二级域名不同的情况，
  • 先创建一个 a.html 文件：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a.html</title>
</head>
<body>
    <script>
    //document.domain让当前的域进行降域，这样二者就可以实现相互操作和访问了。
    document.domain = 'example.com';
    let ifr = document.createElement('iframe');
    ifr.src = 'http://sub.example.com/b.html';
    ifr.style.display = 'none';
    document.body.append(ifr);
    ifr.onload = function() {
      
      
        let win = ifr.contentWindow;
        alert(win.data);
    }
    </script>
</body>
</html>
  • 再创建一个 b.html 文件：
<script>
    document.domain = 'example.com';
    window.data = '传送的数据：1111';
</script>


  • HTMLIFrameElement.referrerPolicy
  <iframe src="https://www.baidu.com" id="myIfram" referrerpolicy="no-referrer"></iframe>

响应头
Refused to display ‘https://www.baidu.com/’ in a frame because it set ‘X-Frame-Options’ to ‘sameorigin’



window.postMessage() 方法可以安全地实现跨源通信
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

iframe跨域页面

window.parent.postMessage(JSON.stringify(data),'父页面地址')

父页面

window.addEventListener('message', function(e) {
    
    
    console.log('接收到的消息:', JSON.parse(e.data));
});

在url中，http://www.baidu.com#helloword的#helloworad就是location.hash，
改变hash值不会导致页面刷新，所以可以利用hash值来进行数据的传递，当然数据量是有限的。

父页面加载非同源iframe,监听hashchange

window.addEventListener('hashchange', function(e) {
    
    
    console.log('获得的数据是：', location.hash.substring(1));
    });

iframe子页面请求到数据更改父哈希

try {
    
    
    parent.location.hash = data;
}catch(e) {
    
    
    // ie, chrome 下的安全机制无法修改 parent.location.hash
    // 所以要利用一个中间的代理 iframe 
    var ifrproxy = document.createElement('iframe');
    ifrproxy.style.display = 'none';
    ifrproxy.src = 'http://localhost:8080/test.html#' + data; // 该文件在请求域名的域下
    document.body.appendChild(ifrproxy);
    }
}

JSONP跨域


<html>
<script>
  let a = 1
</script>
<script>
  console.log(a) //可以打印出来a
</script>
</html>
  • script对后缀没要求,都是当做脚本执行,
<script src="index.jsp?callback=test"></script>


  • script不受同源影响,可以ajax请求对应src非同源域名下的接口

  • jquery jsonp

  • 百度联想词的jsonp

  • callback回调函数的随机名称写法

  • jquery JSONP的实现

  • 对于后端返回的字符串函数如何执行
    这个字符串函数是当前页面定义好的,如何执行呢
    window字符串函数

  • 实现百度联想词

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
      
      
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .wra {
      
      
            margin: 50px 0 0 100px;
        }

        input {
      
      
            width: 440px;
            height: 30px;
        }

        ul {
      
      
            display: none;
            width: 440px;
            border: 1px solid #ccc;
        }

        ul li {
      
      
            width: 522px;
            color: #000;
            font: 14px arial;
            line-height: 22px;
            padding: 0 8px;
            position: relative;
            cursor: default;
        }
    </style>
</head>

<body>
    <div class="wra">
        <input type="text">
        <ul></ul>
    </div>
    <script>
        var oinput = document.getElementsByTagName('input')[0];
        var body = document.getElementsByTagName('body')[0];

        oinput.oninput = function () {
      
       //监听 input 事件。每次触发，我们就发利用  script标签的 src  发送请求
            var oscript = document.createElement('script'); 
            oscript.src = 'https://www.baidu.com/sugrec?&prod=pc&wd=' + this.value + '&cb=Exhibition'; //拿到百度接口链接， 删除对我们无用的 参数。
                                                              // wd 后面的  是我们的 词  cb 后面 是我们的下面的函数名。注意这里的函数名，要字符串
            body.appendChild(oscript);
            oscript.remove();           // 每次发送完数据后， 把 script标签给删除，不然每发送一次，就 创建一个标签， 等下页面会有很多 script标签
        }

        function Exhibition(data) {
      
      
            var g = data.g;
            var str = '';
            var oUl = document.getElementsByTagName('ul')[0];
            if (g) {
      
      
                oUl.style.display = 'block';
                g.forEach(function (ele, index) {
      
      
                    str += '<li>' + ele.q + '</li>'  //拿到数据  遍历它，然后添加到  li标签
                })
                oUl.innerHTML = str;
            }
        }
    </script>
</body>
</html>

瀑布流

为什么要把img设置为block

同学通常情况下图片设置为块元素，是为了清除默认的间隙。例如：

因为图片为行内元素，有文字特性，默认存在间隙。 2

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
    
    
      background-color: pink;
      width: 100px;
    }

    img{
    
    
      height: 100%;
      width: 100%;
      /* 加block 也可以设置font-size,但不推荐*/
      display: block;
    }
  </style>
</head>
<body>
  <div><img src="https://gitee.com/jingyu7/pic/raw/master/202202071254489.png" alt=""></div>
</body>
</html>

cookie

  • 用户追踪

    1. referer 网站来源
    2. IP地址
    3. 用户登录
    4. 胖url
    5. cookie:服务器发送给用户浏览器并保存在本地的一小块数据->响应头添加Set-Cookie就会创建cookie
    6. storage解决cookie的弊端,cookie每次访问网站都会被携带,有性能问题

  • js创建cookie(必须通过http协议打开,如果是本地网页不会设置cookie)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    document.cookie = 'name=xiaoxiong'
    console.log(document.cookie)
  </script>
</head>
<body>
</body>
</html>


// 1
document.cookie = 'name1=xiaoxiong;max-age=5000' //单位是秒
// 2
var d = new Date();
d.setDate(d.getDate()+10)
document.cookie = 'name2=xiaoxiong;expires='+d
// 以上设置了两个cookie
console.log(document.cookie)
//name1=xiaoxiong; name2=xiaoxiong
  • 一个cookie插件 https://www.npmjs.com/package/js-cookie。

持久化登录

表单提交复选框（checkbox）

<form action="a.php" method="post">
    <input type="checkbox" name="hobby[]" value="唱歌"/>唱歌
    <input type="checkbox" name="hobby[]" value="跳舞"/>跳舞
    <input type="checkbox" name="hobby[]" value="轮滑"/>轮滑
    <input type="checkbox" name="hobby[]" value="lol"/>lol
    <br/>
    <input type="submit" value="提交">
</form>

<?php 
    $hobby=$_POST['hobby'];
    echo print_r($hobby);
?>
  • 如果不加[] 提交多个数据时，就不会以一个数组的方式提交，通常只会提交最后一个数

表单提交重置按钮的语义化

  • 提交和重置按钮:input -> button -> html语义化的发展
<form action="a.jsp" method="post" onsubmit="return true">
  <input type="text" name="username" placeholder="用户名">
  <hr>
  <input type="submit">
  <input type="reset">
  <hr>
  <button type="submit">提交</button>
  <button type="reset">重置</button>
</form>

同步提交和异步提交

表单提交分为同步提交和异步提交

同步无法做表单规则校验

  • onsubmit阻止默认表单提交
    form onsubmit 只有布尔值有效,返回false,禁止提交表单,可以在这里做表单校验
<form action="a.jsp" method="post" onsubmit="return submitForm()">
  <input type="text" name="username" placeholder="用户名">
  <button type="submit">提交</button>
  <button type="reset">重置</button>
</form>
<script>
  function submitForm(){
      
      
    //这里做表单校验
    if(username!==""){
      
      
      return true
    }else{
      
      
      return false
    }
  }
</script>

  • 还有一种阻止默认表单提交的方法就是不写外边的form元素,但不建议这样做,主要是语义化的问题

  • 第三种阻止默认行为

<form action="a.jsp" method="post">
  <input type="text" name="username" placeholder="用户名">
  <button type="submit" onclick="submitForm()">提交</button>
  <!-- onclick事件后面要加括号,函数需要执行 -->
  <button type="reset">重置</button>
</form>
<script>
  function submitForm(e){
      
      
    var e = e || window.event
    e.preventDefault()
    console.log('check form')
  }
</script>
  • 正规写法,taobao登录写法
<form action="a.jsp" method="post">
  <input type="text" name="username" placeholder="用户名">
  <button type="submit" id="j_submit">提交</button>
  <button type="reset">重置</button>
</form>
<script>
  var j_submit = document.getElementById('j_submit')
  j_submit.onclick = function submitForm(e){
      
      
    var e = e || window.event
    e.preventDefault()
    console.log('check form')
  }
  
</script>

持久登录

  • sso single sign on 单点登录
  • token 身份令牌 32位 A-Za-z0-9随机字符串, 每次只要登录都会重新生成
  • auth-> 存在cookie中: auth=ident_code:token

猜你喜欢

转载自blog.csdn.net/uotail/article/details/124717039
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
[编程题]学英语
[codeforces 1288A] Deadline 约数+模
Python的web开发
Docker在Centos 7上的部署
python编码
解决Ubuntu16.04 fatal error: json/json.h: No such file or directory
mysql并发插入
rest接口如何适应jsonp的方案
linux 终端上网设置
高数——等号两边同时求导、积分的解释
每日归档
更多
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022