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

news2024/11/27 18:44:28

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.coloradmin.cn/o/1956935.html

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

相关文章

B端:导航条就框架提供的默认样式吗?非也,看过来。

导航条不一定必须使用框架提供的默认样式,你可以根据项目需求和设计风格进行自定义。通过使用框架提供的自定义选项、CSS样式覆盖、自行设计或者使用其他UI库或组件,你可以实现独特且符合需求的导航条样式。 下面发一些参考给友友们,可以让设…

请你谈谈:vue的渲染机制(render)- 2举例说明问题

如何在 Vue 的 render 函数中使用 createElement 方法来创建虚拟节点(VNode)。这里是一个稍微整理后的示例,它直接对应于你提供的注释和代码片段,但作为一个完整的 render 函数的一部分,可能位于一个 Vue 组件的 scrip…

关于ITSS认证-IT服务工程师、IT服务项目经理常见问题解答!

TSS,即信息技术服务标准(Information Technology Service Standards,简称ITSS),是一套系统化的信息技术服务规范。 它全面规定了信息技术服务产品及其组成要素,旨在指导标准化的信息技术服务实施&#xff…

企业微信开发智能升级:AIGC技术赋能,打造高效沟通平台

文章目录 一、AIGC在企业微信开发中的核心价值1. 智能化客服体验2. 自动化工作流程3. 个性化内容推荐4. 深度数据分析与洞察 二、使用AIGC进行企业微信开发的实践路径1. 需求分析与场景定义2. 技术选型与平台搭建3. 模型训练与调优4. 接口对接与功能集成5. 测试与优化 《企业微…

css各种使用案例合集(一)

1、文字不换行 场景1&#xff1a;使 div 标签的文字内容不换行 代码示例&#xff1a; <div class"nowrap-div">这是一段很长的文字&#xff0c;我们不会让它换行。</div> .nowrap-div { white-space: nowrap; } 2、步骤条 场景2&#xff1a;特殊样式的…

【模拟电路】电与磁的关系,电感与震荡电路

文章目录 前言电与磁的关系电感及其应用电感的电路符号 震荡电路及其作用震荡电路的画法 总结 前言 在电子技术的世界中&#xff0c;电与磁的关系是理解许多电路和设备工作原理的基础。电与磁不仅在理论上紧密相连&#xff0c;在实际应用中也发挥着重要作用。电感器和震荡电路…

新学年即将到来,IT管理员面临一系列挑战

新学年即将到来&#xff0c;学校的IT管理员们又将迎来一场风暴般的挑战。你知道吗&#xff1f;许多教育机构在管理学生账户和访问权限方面都面临着巨大的困难。随着数字化学习的普及&#xff0c;简化和安全的账户管理需求比以往任何时候都更加迫切。本文将详细探讨学生账户管理…

java使用hutool工具判断ip或者域名是否可用,java使用ping判断ip或者域名是否可用

1.导入hutool工具 <dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.8.16</version></dependency>2.复制以下代码直接运行 import cn.hutool.core.net.NetUtil;public class Test {p…

python爬虫的基础知识

1.学习爬虫的好处 提升编程技能&#xff1a;爬虫开发需要掌握编程基础&#xff0c;特别是网络请求、HTML/CSS/JavaScript解析、数据存储和异常处理等技能。通过学习爬虫&#xff0c;你可以巩固和提升你的编程技能&#xff0c;特别是Python等编程语言的应用能力。 数据驱动决策…

LitCTF2024赛后web复现

复现要求&#xff1a;看wp做一遍&#xff0c;自己做一遍&#xff0c;第二天再做一遍。&#xff08;一眼看出来就跳过&#xff09; 目录 [LitCTF 2024]浏览器也能套娃&#xff1f; [LitCTF 2024]一个....池子&#xff1f; [LitCTF 2024]高亮主题(划掉)背景查看器 [LitCTF 2…

VRT: 关于视频修复的模型(论文复现)

VRT: 关于视频修复的模型&#xff08;论文复现&#xff09; 本文所涉及所有资源均在传知代码平台可获取 文章目录 VRT: 关于视频修复的模型&#xff08;论文复现&#xff09;2. 视频修复概述3. 现有方法的挑战与局限性4. VRT模型详解5. 实验与结果6. VRT的优势与创新点7. 实际应…

Git基本原理讲解、常见命令、Git版本回退、Git抛弃本地分支拉取仓库最新分支、如何将本地文件推送至github、.gitignore文件的使用

借此机会写篇博客汇总一下自己去公司实习之后遇到的一些常见关于Git的操作。 Git基本认识 Git把数据看作是对小型文件系统的一组快照&#xff0c;每次提交更新&#xff0c;或在Git中保存项目状态时&#xff0c;Git主要对当时的全部文件制作一个快照并保存这个快照的索引。同时…

持续打通中国CRM SaaS生态,阿里云上的Salesforce稳步“着陆”

自2023年底阿里云上的Salesforce正式上线&#xff08;GA&#xff09;&#xff0c;全球第一大CRM SaaS厂商Salesforce能否顺利“着陆”中国市场&#xff0c;就备受关注。Salesforce自2004年在中国开展业务&#xff0c;到2019年宣布与阿里云达成战略合作、阿里云成为Salesforce在…

数据结构--哈希表

文章目录 哈希表查找本节提要哈希存储、查找的概念哈希函数的特点哈希函数的应用哈希函数示例哈希函数问题哈希表设计方法直接定址法除留余数法数字分析法处理冲突的方法哈希表的查找练习总结 哈希表查找 本节提要 哈希查找的概念。哈希函数的构造方法。处理冲突的方法。哈希…

普元MDM主数据管理系统与蓝凌OA系统集成案例

一、项目背景 某工程机械集团是中国工程机械产业奠基者、开创者和引领者&#xff0c;是工程机械行业具有全球竞争力、影响力的千亿级龙头企业。公司主要指标始终稳居中国工程机械行业第1位。 蓝凌OA在集团中处于一个重要角色&#xff0c;集团内各流程业务数据都需要通过OA进…

STM32通信协议 总集篇 (速记版)

名称引脚常用在双工时钟电平设备USARTTX、RX单片机和pc,单片机和单片机全双工异步单端点对点I2CSCL、SDA单片机和单片机半双工同步单端多设备SPISCLK、MOSI、MISO、CS单片机和单片机全双工同步单端多设备CANCAN_H、CAN_L智能汽车半双工异步差分多设备USBDP、DM半双工异步差分点…

目前软件测试薪资怎么样,工作好找吗?

软件测试的薪资和就业情况在不同国家和地区会有所不同。同时&#xff0c;行业的变化和经济状况也会影响薪资水平和就业机会。以下是一些一般性的信息&#xff1a; 国外软件测试薪资&#xff1a; 在发达国家&#xff0c;软件测试工程师的薪资水平通常相对较高&#xff0c;因为技…

EChart-坐标轴数值处理

写图表时&#xff0c;Y轴的数值过大&#xff0c;不太可能直接展示&#xff0c;这时候就得简写了&#xff0c;如图&#xff1a; 红框圈起来的数值表示如下&#xff1a; 1K10001M1000,0001B 1000,000,000 1KB1000,000,000,000 export function toBMK(value) {const vblValue Ma…

为什么IDEA中使用@Autowired会被警告

我们在使用IDEA编码时&#xff0c;如果用到了Autowired注解注入bean&#xff0c;会发现IDEA会给代码标个波连线&#xff0c;鼠标移动上去&#xff0c;会发下idea提示&#xff1a;不推荐使用Filed injection&#xff0c;这是Spring的核心DI&#xff08;Dendency Injection&#…