网页访问流程与HTTP协议详解-优快云博客

本文链接：https://blog.youkuaiyun.com/uotail/article/details/124717039

访问网页流程

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.youkuaiyun.com/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。

跨域案例

首先创建 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>

再创建 b.html 文件：

<script>
   window.name = "你想要的数据!";
</script>

http://localhost:8080/a.html在请求远端服务器http://localhost:8081/b.html的数据，(ifram跨域属性)
我们可以在a.html下新建一个iframe，该iframe的src属性指向服务器8081/b.html
服务器文件b.html设置好window.name值。
但是由于a.html页面和该页面iframe的src不同源的话，则无法操作iframe里的任何东西，所以就取不到iframe的name值，不同域下的iframe不能进行操作。
所以我们需要在b.html加载完之后重新换个src区指向一个同源的html文件，或者设置成about:blank都行，
这时候我们只要在a.html相同的目录下件一个c.html空白即可。
如果不重新指向src的话直接获取的window.name的话就会报错。

document.domain 返回当前网站域名’www.baidu.com’,也可以被设置

document.domain降域,
什么是降域
如http://a.justfun.me 和 http://b.justfun.me，后面的justfun.me相同，
那么就可以使用document.domain将二者的域名设置为justfun.me，来实现同源
对于主域相同而子域不同的情况下，可以通过设置 document.domain 的办法来解决
具体做法是可以在 http://www.example.com/a.html和http://sub.example.com/b.html两个文件分别加上 document.domain = “example.com”
然后通过 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>