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

Ajax

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

  1. 创建 XMLHttpRequest 实例
  2. 发出 HTTP 请求
  3. 接收服务器传回的数据
  4. 更新网页数据(通常是部分内容,而不是整个网页)

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

3. TCP 四次挥手断开连接

在这里插入图片描述
第一次挥手
客户端向服务端发送断开连接请求(客户端:我的 http 请求已发送完,可以断开连接了!)

第二次挥手
服务端向客户端发送等待传输的应答,此时服务端已停止接收客户端的 http 请求(只出不进),并继续向客户端传输未传输完的数据(服务端:好的,等我把数据传输完毕就断开连接)

第三次挥手
等所有数据传输完成后,服务端向客户端发送断开连接的通知(服务端:可以断开连接啦!)

第四次挥手
客户端向服务端发送断开连接应答(客户端:好的,我断开了!)

  • 客户端 " 拔网线 "
  • 客户端发送断开连接应答
  • 服务端收到应答
  • 服务端 " 拔网线 "

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/51399.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LLM - 理解 大模型 Batch 推理的 Padding Side (左填充或右填充)

欢迎关注我的CSDN:https://spike.blog.csdn.net/ 本文地址:https://spike.blog.csdn.net/article/details/140697827 免责声明:本文来源于个人知识与公开资料,仅用于学术交流,欢迎讨论,不支持转载。 使用 Left Padding (左填充) 或者 Right Padding (右填充),HuggingFac…

DBeaver安装与使用教程 免费的连接mysql数据库软件

一、DBeaver安装 (一)Dbeaver下载 DBeaver 是一个通用的数据库管理工具和 SQL 客户端,免费,跨平台,支持 MySQL, PostgreSQL, Oracle, DB2, MSSQL, Sybase, Mimer, HSQLDB, Derby, 以及其他兼容 JDBC 的数据库。 官网…

通常指的是将数据存储在远程服务器上

云存储:通常指的是将数据存储在远程服务器上,而不是本地计算机上。对于AWS(Amazon Web Services),云存储服务主要由S3(Simple Storage Service)提供。boto3:这是AWS的官方Python SDK,它允许Python开发者与AWS服务进行交互。S3():在boto3中,S3()是一个客户端对象,用…

C语言经典习题24

文件操作习题 一 编程删除从C盘home文件夹下data.txt文本文件中所读取字符串中指定的字符&#xff0c;该指定字符由键盘输入&#xff0c;并将修改后的字符串以追加方式写入到文本文件C:\home\data.txt中。 #include<stdio.h> main() { char s[100],ch; int i;…

带你学会Git必会操作

文章目录 带你学会Git必会操作1Git的安装2.Git基本操作2.1本地仓库的创建2.2配置本地仓库 3.认识一些Git的基本概念3.1操作流程&#xff1a; 4.一些使用场景4.1添加文件场景一4.2查看git文件4.3修改文件4.4Git版本回退4.5git撤销修改 5.分支管理5.1查看分支5.2创建本地分支5.3切…

使用Docker Compose管理Java微服务

使用Docker Compose管理Java微服务 大家好&#xff0c;我是微赚淘客系统3.0的小编&#xff0c;是个冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们来探讨如何使用Docker Compose来管理Java微服务。Docker Compose是一个用于定义和运行多容器Docker应用程序…

【C++进阶】AVL树详解

文章目录 1. AVL树的概念2. AVL树结点的定义3. AVL 树的插入3.1 关于平衡因子3.2 插入代码 4. AVL 树的旋转逻辑4.1 不需要旋转4.2 左旋4.3 右旋4.4 双旋4.4.1 先右后左单旋&#xff08;RL 旋转&#xff09;4.4.2 先左后右单旋&#xff08;LR 旋转&#xff09; 4.5 完整插入代码…

web UI自动化测试 浏览器模式设置

自动化之浏览器模式设置 做selenium UI自动化测试时&#xff0c;每次都需要启动浏览器、用例运行结束后再关闭浏览器&#xff0c;浏览器启动相当地耗费时间&#xff0c;在本机运行用例的话还得放开双手&#xff0c;可以使用chrome的headless模式&#xff0c;让浏览器在后台运行…

C语言pow函数

cmath库里有pow函数&#xff0c;这个函数在图形处理方面上经常用到&#xff0c;但是如果让你自己写这个函数&#xff0c;就不一定能写出来了&#xff0c;本期文章我就带大家写pow函数 源码&#xff1a; double factorial(int n) {if (n 0) return 1;double result 1;for (i…

C语言 | Leetcode C语言题解之第301题删除无效的括号

题目&#xff1a; 题解&#xff1a; struct Next { int l, r, cl, cr; };void vec_push(char*** v, int* n, char* s) {if (!(*n & *n1)) {*v realloc(*v, sizeof(char*) * ((*n << 1) | 1));}(*v)[(*n)] s; }void dfs(const char* s, int i, struct Next next[],…

图片格式怎么转换?这几种图片格式转换方法简单又高效

图片已成为我们日常生活与工作中不可或缺的一部分。然而&#xff0c;不同平台和应用往往对图片格式有着特定的要求&#xff0c;这就使得图片格式的转换成为了一项必备技能。下面给大家分享5种能够简单高效的转换图片格式方法&#xff0c;快来一起学习下吧。 方法一&#xff1a;…

模拟算法概览

前言 LeetCode上的模拟算法题目主要考察通过直接模拟问题的实际操作和过程来解决问题。这类题目通常不需要高级的数据结构或复杂的算法&#xff0c;而是通过仔细的逻辑和清晰的步骤逐步解决。 适合解决的问题 模拟算法适合用来解决那些逻辑明确、步骤清晰且可以逐步执行的问…

JavaFX布局-TitledPane

JavaFX布局-TitledPane 常用属性textcontentgraphicexpandedcollapsibleanimated 实现方式Javafxml 提供了一个可折叠的标题栏和一个内容区域内容区域可以嵌套其他布局 常用属性 text 设置标题 titledPane.setText("测试标题");content 内容区域&#xff0c;可以单…

Android 系统启动动画

一、接着我们把 bootanimation.zip 动画文件 预制到 /system/media/ 目录下&#xff1a; 二、目录/system/media/bootanimation.zip PRODUCT_COPY_FILES \$(LOCAL_PATH)/bootanimation.zip:/system/media/bootanimation.zipPRODUCT_ARTIFACT_PATH_REQUIREMENT_WHITELIST \ /…

【MySQL是怎样运行的 | 第二篇】MySQL三大日志文件

文章目录 2.MySQL三大日志文件2.1日志文件列表2.1.1 redo log2.1.2 bin log2.1.3 undo log 2.2redo log日志详讲2.3 binglog和redo log有什么区别&#xff1f;2.4一条更新语句的执行过程 2.MySQL三大日志文件 2.1日志文件列表 redo log&#xff1a;重做日志&#xff0c;记录了…

随着软件开发方法的不断演进,Cobol 程序如何适应敏捷开发和持续集成/持续部署(CI/CD)的流程?

Cobol是一种古老的编程语言&#xff0c;最初设计用于商业数据处理。虽然它不是为敏捷开发和CI/CD流程而设计的&#xff0c;但仍然可以通过一些技术和方法来使其与这些现代开发流程兼容。 以下是一些方法可以帮助Cobol程序适应敏捷开发和CI/CD流程&#xff1a; 拆分和模块化&am…

使用文章健康检查指标彻底改变您的知识库

在当今快节奏的数字世界中&#xff0c;向客户提供准确和最新的信息比以往任何时候都更加重要。保持知识库内容准确、相关且高效可能是一项艰巨的任务&#xff0c;尤其是在处理大型信息库时。幸运的是&#xff0c;Baklib 的人工智能支持的文章健康检查指标可以提供一个解决方案来…

JDK 8 升级 17 及 springboot 2.x 升级 3.x 指南

JDK 8 升级 17 简介 从 JDK 8 升级到 JDK 17 的过程中&#xff0c;有几个主要的变化&#xff0c;特别是 Java Platform Module System (JPMS) 的引入&#xff0c;以及一些包路径的调整。以下是与 JDK 17 相关的一些重要变化&#xff1a; Java Platform Module System (JPMS) …

使用Linkerd进行服务网格配置与监控

在现代微服务架构中&#xff0c;服务网格技术正在迅速成为增强服务间通信的解决方案。Linkerd作为一个轻量级的服务网格&#xff0c;提供了重要的功能&#xff0c;如负载均衡、故障恢复和监控。这篇博客将详细介绍如何使用Linkerd配置服务网格&#xff0c;并通过Java代码示例展…

面试题:MySQL 索引

1. 谈一下你对于MySQL索引的理解?(为什么MySQL要选择B+树来存储索引) MySQL的索引选择B+树作为数据结构来进行存储,使用B+树的本质原因在于可以减少IO次数,提高查询的效率,简单来说就是可以保证在树的高度不变的情况下存储更多的数据: IO效率的提高:在MySQL数据库中,…