前后端通信到底是怎样一个过程

前后端通信是怎样

前言:Http协议

超文本传输协议

规定:每一次前后端通信,前端需要主动向后端发出请求,后端接收到前端的请求后,可以给出响应

1、Http报文
  • 浏览器向服务器发送请求时,请求本身就是信息,叫请求报文
  • 服务器向浏览器发送响应时传输的信息,叫响应报文

报文格式

1、请求

请求头:起始行+首部

请求体(只有POST发送数据才有,GET没有)

(GET 请求,没有请求体,数据通过请求头携带;POST 请求,有请求体,数据通过请求体携带)

2、响应

响应头: 起始行+首部

响应体

image-20231004171757824

2、请求过程

image-20231004170508051

3、Http方法
  • GET 获取数据获取资源(文件)
  • POST 创建数据注册
  • PUT 更新数据修改个人信息,修改密码
  • DELETE 删除数据删除一条评论
4、RESTful 接口设计

一种接口设计风格,充分利用 HTTP 方法的语义

1、通过用户 ID 获取个人信息,使用 GET 方法

通常: https://wwwimooc.com/api/http/getUser?id=1

发挥GET语意: https://www.imooc.com/api/http/user?id=1

2、注册新用户,使用 POST 方法

通常: https://www.imooc.com/api/http/addUser

发挥POST语意:https://www.imooc.com/api/http/user

3、修改一个用户,使用 PUT 方法

通常:https://www.imooc.com/api/http/modifyUser

发挥POST语意:https://www.imooc.com/api/http/user

4、删除一个用户,使用 DELETE 方法

通常:https://www.imooc.com/api/http/deleteUser

发挥POST语意:https://www.imooc.com/api/http/user

5、GET和POST差别

1、缓存

GET 可以被缓存,POST 不会被缓存

2、安全性

GET 和 POST 都不安全

发送密码或其他敏感信息时不要使用 GET,主要是避免直接被他人窥屏或通过历史记录找到你的密码

6、Http状态码

定义服务器对请求的处理结果,是服务器返回的

100-199一般信息100 websocket_VScode自动刷新页面
200-299成功响应 200 OK
300-399重定向 301 Moved Permanently_永久老网址转新网址 /304_缓存有效
400-499客户端错误404 Not Found_自己错误,地址不存在
500-599服务端错误500 Internal Server Error

0、前后端数据交换的过程

1、浏览器和服务器之间数据交互的过程

2、客户端到后端服务器的交互

后端向前端发送数据

例如刷新浏览器网页,F12中的Network看到后端向浏览器推送JS文件,图片,html,css等(在命令行中curl命令,也可以与后端交互,但是浏览器的优点就是能展示出页面)

1、浏览器先拿到一个html文件

2、在或中有常用的<link引用css>,<img引用图片>,<script引用js>等外延标签,异步向服务器发送请求

3、例如<a超链接><form表单>,只有使用的时候发送请求

4、Ajax和Fetch

前端向后端发送数据

注册页面,接收数据,后端存储数据

1、浏览器构造http请求发给操作系统

协议:浏览器常用的http,https协议,文件协议file,远程传输协议ftp

域名:www.baidu.com 这就是域名,域名也对应着一个ip

端口:http协议的端口80,https是443,开发和测试环境常用的8080(常用的ssh链接是22端口)

路由/路径:访问网站默认到根部录下/index.html文件下

查询参数:在访问百度的时候,直接在wd跟上参数:https://www.baidu.com/s?wd=北京

image-20230929220213476

2、http请求转为ip包转发到公网

操作系统把http报文转换为tcp/ip 的包

把域名转为ip,先去查询本地host文件,后面再去查询DNS服务器

在这里就不得不提一下CDN内容加速网络了,那么CDN是如何实现网站的加速呢?

CDN内容分发网络:CDN+DNS共同实现用户的加速访问

原理:减少漫长的路由转发,就近访问备份资源

1、通过配置网站的CDN,提前让CDN的中间节点OC备份一份内容,在分发给用户侧的SOC边缘节点,这样就能就近拉取资源。不用每次都通过漫长的路由导航到源站。

2、但是要达到加速的效果,还需要把真实域名的IP更改到CDN的IP,所有这里还需要DNS的帮助,这里一般都会求助用户本地运营商搭建的权威DNS域名解析服务器,用户请求逐级请求各级域名,本来应该会返回真实的IP地址,但是通过配置会返回给用户一个CDN的IP地址,CDN的权威服务器再讲距离用户最近的那台CDN服务器IP地址返回给用户,这样就实现了CDN加速的效果。

image-20230929222126129

客户端通过cookie和session保持会话,确保来自同一客户端。例如:保存购物车信息等

image-20230930215319786

3、http请求转为ip包转发到公网

路由转发

4、获取并且返回文件

浏览器加载内容: html,css,js 渲染&执行脚本

前端路由解析

JS发送AJAX 请求:1、本域的api的后台 2、跨域第三方的服务器

image-20230930172236841

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

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

相关文章

玩转快速排序(C语言版)

W...Y的主页 &#x1f60a; 代码仓库分享 &#x1f495; &#x1f354;前言&#xff1a; 本篇文章&#xff0c;我们来讲解一下神秘的快速排序。对于快速排序我相信大家都已经有所耳闻&#xff0c;但是快速排序是有很多的版本的。我们这次的目的就是快排的所有内容搞懂&#…

什么是GraphQL?它与传统的REST API有什么不同?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 什么是GraphQL&#xff1f;⭐ 与传统的REST API 的不同⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣…

JavaScript处理点击事件

在介绍点击事件之前&#xff0c;先给它们讲一些概念 事件监听 在JavaScript中&#xff0c;可以使用事件监听&#xff08;Event Listener&#xff09;来响应和处理各种事件。事件监听器是一种能够捕捉特定事件并执行相应代码的机制。事件监听器允许您在特定事件发生时执行自定…

Eclipse MAT解析headp dump,total size小于file size

1. 问题描述 使用Eclipse MAT分析20GB的heap dump文件 最后解析出来dump size只有1GB 2. 原因&#xff1a;heap dump中包含许多unreachable objects Eclipse MAT的官方文档&#xff0c;《Basic Tutorial》章节&#xff0c;有对上图的Overview page做介绍 针对total size小…

Qt扩展-QCustomPlot 用户交互

QCustomPlot 用户交互 一、概述二、操作范围三、选择机制1. 控制Graph的可选择性和选择状态2. 所选对象的外观3. 多部分对象4. 对选择变化做出反应 四、用户交互信号 一、概述 QCustomPlot提供了多个内置的用户交互。它们大致可以分为 通过用鼠标拖动和滚动鼠标滚轮进行范围操…

typescript映射类型

ts映射类型简介 TypeScript中的映射类型&#xff08;Mapped Type&#xff09;是一种高级类型&#xff0c;它允许我们基于现有类型创建新的类型&#xff0c;同时对新类型的每个属性应用一个转换函数。通过使用映射类型&#xff0c;我们可以方便地对对象的属性进行批量操作&…

华为数通方向HCIP-DataCom H12-831题库(单选题:181-200)

第181题 以下关于OSPF的5类LSA中的转发地址(ForwardingAddress,FA) 的描述,正确的是哪一项? A、当FA地址为0.0.0.0时,收到该LSA的路由器认为到达目的网段的数据包应该发往对应的ABR,因此将到达ABR的下一跳地址作为这条外部路由的下一跳 B、当FA地址为0.0.0.0时,收到该LS…

C++算法 —— 动态规划(12)两道小题

文章目录 1、动规思路简介2、组合总和Ⅳ3、卡特兰数 背包问题需要读者先明白动态规划是什么&#xff0c;理解动规的思路&#xff0c;并不能给刚接触动规的人学习。所以最好是看了之前的动规博客&#xff0c;以及背包博客&#xff0c;或者你本人就已经懂得动规了。 1、动规思路简…

(二)激光线扫描-相机标定

1. 何为相机标定? 当相机拍摄照片时,我们看到的图像通常与我们实际看到的不完全相同。这是由相机镜头引起的,而且发生的频率比我们想象的要高。 这种图像的改变就是我们所说的畸变。一般来说,畸变是指直线在图像中出现弯曲或弯曲。 这种畸变我们可以通过相机标定来进行解…

华为云云耀云服务器L实例评测|Huawei Cloud EulerOS 自动化环境部署

[toc] Huawei Cloud EulerOS 自动化环境部署 云耀云服务器L实例【Huawei Cloud EulerOS 2.0 64bit】 Python Git Google Chrome Chromedriver Selenium More… 1. Python 镜像创建后自带。 2.Git 拉取项目。 sudo yum install git3. Google Chrome 使用root权限或sudo权…

【算法|动态规划No.11】leetcode53. 最大子数组和

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【手撕算法系列专栏】【LeetCode】 &#x1f354;本专栏旨在提高自己算法能力的同时&#xff0c;记录一下自己的学习过程&#xff0c;希望…

【image captioning】CaMEL: Mean Teacher Learning for Image Captioning(实现流程)

CaMEL: Mean Teacher Learning for Image Captioning(实现流程) 作者:安静到无声 个人主页 目录 CaMEL: Mean Teacher Learning for Image Captioning(实现流程)环境设置数据准备Evaluation训练程序推荐专栏参考代码: CaMEL: Mean Teacher Learning for Image Captioning.…

C++_pen_静态与常量

成员 常成员、常对象&#xff08;C推荐使用 const 而不用#define,mutable&#xff09; const 数据成员只在某个对象生存周期内是常量&#xff0c;而对于整个类而言却是可变的&#xff08;static除外&#xff09; 1.常数据成员&#xff08;构造函数初始化表赋值&#xff09; c…

常见的几种排序方式

常见的几种排序方式 1. 排序的概念2. 常见排序算法的实现2.1 插入排序2.1.1基本思想2.1.2 直接插入排序2.1.3 希尔排序( 缩小增量排序 ) 2.2 选择排序2.2.1基本思想2.2.2 直接选择排序:2.2.3 堆排序 2.3 交换排序2.3.1冒泡排序2.3.2 快速排序 2.4 归并排序2.4.1 基本思想2.4.2 …

【C语言进阶(11)】动态内存管理

文章目录 Ⅰ 存在动态内存分配的原因Ⅱ 动态内存函数1. malloc2. calloc3. realloc4. free (重要) Ⅲ 常见动态内存错误1. 对 NULL 指针的解引用操作2. 对动态开辟空间的越界访问3. 对非动态开辟内存使用 free 释放4. 使用 free 释放一块动态开辟内存的一部分5. 对同一块动态内…

Rust冒泡排序

Rust冒泡排序 这段代码定义了一个名为 bubble_sort 的函数&#xff0c;接受一个可变的整数类型数组作为输入&#xff0c;然后使用嵌套的循环来实现冒泡排序。外部循环从数组的第一个元素开始迭代到倒数第二个元素&#xff0c;内部循环从数组的第一个元素开始迭代到倒数第二个元…

【10】c++设计模式——>依赖倒转原则

关于依赖倒转原则&#xff0c;对应的是两条非常抽象的描述&#xff1a; 1.高层模块不应该依赖低层模块&#xff0c;两个都应该依赖抽象。 2.抽象不应该依赖细节&#xff0c;细节应该依赖抽象。 先用人话解释一下这两句话中的一些抽象概念&#xff1a; 1.高层模块&#xff1a;可…

字典与数组第七讲:工作表数据计算时为什么要采用数组公式(一)

《VBA数组与字典方案》教程&#xff08;10144533&#xff09;是我推出的第三套教程&#xff0c;目前已经是第二版修订了。这套教程定位于中级&#xff0c;字典是VBA的精华&#xff0c;我要求学员必学。7.1.3.9教程和手册掌握后&#xff0c;可以解决大多数工作中遇到的实际问题。…

使用关键字interface来声明使用接口-PHP8知识详解

继承特性简化了对象、类的创建&#xff0c;增加了代码的可重用性。但是php8只支持单继承&#xff0c;如果想实现多继承&#xff0c;就需要使用接口。PHP8可以实现多个接口。 接口类通过关键字interface来声明&#xff0c;接口中不能声明变量&#xff0c;只能使用关键字const声明…

【Golang】并发

并发 有人把Go语言比作 21 世纪的C语言 第一是因为Go语言设计简单 第二则是因为 21 世纪最重要的就是并发程序设计&#xff0c;而 Go 从语言层面就支持并发。同时实现了自动垃圾回收机制 先来了解一些概念&#xff1a; 进程/线程 进程是程序在操作系统中的一次执行过程&#…