网络相关、HTTP、TCP

# 网络协议概述

# 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

1
2
3
4

# 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只允许请求当前源（域名、协议、端口）的资源

# 如何解决跨域

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);
}
```
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
CORS

MDN：跨源资源共享（CORS）
- 需要服务器端开启 Access-Control-Allow-Origin 进行支持
iframe、document.domain、window.name、window.postMessage
websocket
服务器端设置代理请求：服务器端不受同源策略限制

# 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);

1
2
3
4
5
6
7
8
9

# GET、POST

编辑

#网络

上次更新: 2024/04/15, 14:35:14

← CSS布局