前端必备基础【网络通信】（2024最新版）

news2024/11/14 14:00:04

Ajax

Asynchronous Javascript and XML 的缩写，是使用 JS 发起网络通信的技术统称，具体步骤为：

创建 XMLHttpRequest 实例
发出 HTTP 请求
接收服务器传回的数据
更新网页数据（通常是部分内容，而不是整个网页）

XMLHttpRequest

XMLHttpRequest 是 js 的内置对象，用于发起网络请求

get 请求

var xhr = new XMLHttpRequest();
xhr.open("GET", "your_url?param1=value1&param2=value2", true);
xhr.onreadystatechange = function () {
  if (xhr.readyState == 4 && xhr.status == 200) {
    var response = xhr.responseText;
    console.log(response);
  }
};
xhr.send();

post 请求

var xhr = new XMLHttpRequest();
xhr.open("POST", "your_url", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {
  if (xhr.readyState == 4 && xhr.status == 200) {
    var response = xhr.responseText;
    console.log(response);
  }
};
xhr.send("param1=value1&param2=value2");

Fetch

fetch 是全局变量 window 的一个方法（API），返回一个promise对象，也用于发起网络请求，因比 XMLHttpRequest 更简洁易用，已取代 XMLHttpRequest

get 请求

fetch(url).then(response=>{
   console.log('响应',response)
})

post 请求

fetch(url,{
 method:'POST',
 headers:{
  'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'
 },
 body:`user=${user.value}&pas=${pas.value}`
 }).then(response=>{
  console.log('响应',response)
})

Axios

Axios 是一个基于promise 的网络请求库，底层使用 XMLHttpRequest 实现，官网为 https://www.axios-http.cn/docs/intro

vue 中使用详见教程
https://blog.csdn.net/weixin_41192489/article/details/113878619

网络通信过程

TCP 是传输层的协议，是有状态的长连接（相当于在客户端和服务端之间牵了一根网线）
HTTP 是应用层的协议，是无状态的短连接，基于 TCP 连接来传输数据（利用TCP牵好的网线传输数据）

从本质上来说，二者没有可比性

1. TCP 三次握手建立连接

在这里插入图片描述

第一次握手
客户端向服务端发送连接请求（客户端：可以连接吗？）

第二次握手
服务端向客户端发送同意连接的应答（服务端：可以，你能收到我的回复吗？）

第三次握手
客户端向服务端发送连接确认（客户端：可以，那我开始连接啦！）

客户端 " 插网线 "
客户端发送连接确认
服务端收到确认
服务端 " 插网线 "

2. HTTP 传输数据

客户端发送的每次请求都需要服务器回送响应，在请求结束后，会主动释放连接。从建立连接到关闭连接的过程称为“一次连接”。

为了节省资源和时间，请求头的 Connection 属性的默认值为 keep-alive ，即默认开启长连接：一次 TCP 连接可以发送多个 HTTP 请求

若将请求头的 Connection 属性值改为 close，则不再开启长连接：一次 TCP 连接只能进行一次 HTTP 请求

http【详解】状态码，方法，RestfuI API，headers，缓存
https://blog.csdn.net/weixin_41192489/article/details/136446539
https【详解】与http的区别，对称加密，非对称加密，证书，解析流程图
https://blog.csdn.net/weixin_41192489/article/details/136454243