网络协议概述

HTTP、HTTPS、HTTP/1.x、HTTP/2.0

「进击的前端工程师」HTTP的世界观(附HTTP/3中文翻译)

HTTP是什么

• HTTP是一个在计算机世界里专门在两点之间传输文字、图片、音频、视频等超文本数据的约定和规范。

HTTP通常跑在TCP/IP协议栈之上，依靠IP协议实现寻址和路由、TCP协议实现可靠数据传输、DNS协议实现域名查找、SSL/TLS协议实现安全通信。当然，WebSocket、HTTPDNS依赖于HTTP。

HTTP/1.0

• 引入了请求头、响应头、状态码：为了满足人们对浏览器的需求(不光是HTML，还有CSS、JS、图片、音视频等)，文件格式不再局限于ASCII编码。
• 提供了Cache机制：为了减轻服务器的压力。
• 加入了用户代理字段：服务器需要统计客户端的基础信息(Windows 和 macOS)。

accept: text/html
accept-encoding: gzip, deflate, br
accept-Charset: ISO-8859-1,utf-8
accept-language: zh-CN,zh

HTTP/1.1

• 改进持久连接

  • 一个TCP连接上可以传输多个HTTP请求，只要浏览器或者服务器没有断开连接，该TCP会一直保持。

• 增加对虚拟主机的支持

  • 请求头中也增加了Host字段，表示当前的域名地址，服务器可根据不同的Host值做不同的处理。

HTTP/2.0

• 多路复用：能够让多个请求使用同一个 TCP 链接，极大的加快了网页的加载速度
• Header压缩
• 二进制传输

TCP/IP，TCP，UDP，IP，Socket

一篇文章看明白 TCP/IP，TCP，UDP，IP，Socket 之间的关系

跨域

同源策略

• 为求安全：XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源

如何解决跨域

1. JSONP

   • 缩写：json+padding（内填充），顾名思义，就是把JSON填充到一个盒子里

   • 原理：

     • 动态插入script标签，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入
     • 然后在服务端输出JSON数据并执行回调函数

   • 优点：

     • 兼容性好，简单易用，支持浏览器与服务器双向通信

   • 缺点：

     • 只支持GET请求

   • 代码：

     function createJs(sUrl){
         let oScript = document.createElement('script');
         oScript.type = 'text/javascript';
         oScript.src = sUrl;
         document.getElementsByTagName('head')[0].appendChild(oScript);
     }
     
     createJs('jsonp.js');
     
     box({
        'name': 'test'
     });
     
     //jsonp.js
     function box(json){
         alert(json.name);
     }
     

2. CORS

   MDN：跨源资源共享（CORS）

   • 需要服务器端开启 Access-Control-Allow-Origin 进行支持

3. iframe、document.domain、window.name、window.postMessage

4. websocket

5. 服务器端设置代理请求：服务器端不受同源策略限制

Ajax

• 缩写：Asynchronous Javascript And XML，异步 JavaScript + XML 在后台与服务器进行异步数据交换，不用重载整个网页，实现局部刷新。

• 创建Ajax步骤：

  • 创建XMLHttpRequest对象
  • 创建一个新的HTTP请求，并指定该HTTP请求的类型、验证信息
  • 设置响应HTTP请求状态变化的回调函数
  • 发送HTTP请求
  • 获取异步调用返回的数据
  • 使用JavaScript和DOM实现局部刷新

• 代码：

    var xhr = new XMLHttpRequest();
    xhr.open("POST", url, true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
            callback(xhr.responseText);
        }
    };
    xhr.send(data);
  

GET、POST