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

前后端通信是怎样

前言: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.hqwc.cn/news/125444.html

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

相关文章

Integrity Plus for Mac,保障网站链接无忧之选

在如今数字化的时代&#xff0c;网站链接的完整性对于用户体验和搜索引擎排名至关重要。如果您是一位网站管理员或者经常需要检查网站链接的人&#xff0c;那么Integrity Plus for Mac&#xff08;Integrity Plus&#xff09;将成为您最好的伙伴。 Integrity Plus是一款专业的…

国庆发生的那些事儿------编写了炫酷的HTML动态鼠标特效,超级炫酷酷酷!

文章目录 前言具体操作总结 前言 国庆假期的欢乐&#xff0c;当然少不了编码爱好者&#xff01;假期编写了炫酷的HTML动态鼠标特效&#xff0c;超级炫酷酷酷&#xff01;让你的页面变得更加炫酷&#xff0c;让你的小伙伴们羡慕的大神编码&#xff01;快来看看大神是如何编写的…

The directory ‘*‘ or its parent directory is not owned by the current user

python安装编译时出现如下错误 The directory /home/admin/.cache/pip/http or its parent directory is not owned by the current user and the cache has been disabled. Please check the permissions and owner of that directory. If executing pip with sudo, you may …

Linux学习之悟空派上实现OLED的无线网IP及CPU温度显示【守护进程】

起因 最近各种网购平台似乎都在推送99元的悟空派全志H3的开发板&#xff0c;出于好奇就买了一块来试试水&#xff0c;由于这块板子基本上和orangepi-Zero的硬件结构一模一样&#xff0c;所以设备树、boot这些就用orangepi现成的部件了。 因为本人比较喜欢使用SSH操作&#xff…

redis高可用(主从复制,哨兵,集群)

目录 一、主从复制&#xff1a; 1.主从复制介绍&#xff1a; 2.主从复制的作用&#xff1a; 3.主从复制流程&#xff1a; 4.搭建Redis 主从复制&#xff1a; 4.1 环境准备&#xff1a; 4.2 安装redis&#xff1a; 4.3 master节点修改 Redis 配置文件&#xff1a; 4.4 slave节点…

【数据结构与算法】树、二叉树的概念及结构(详解)

前言: &#x1f4a5;&#x1f388;个人主页:​​​​​​Dream_Chaser&#xff5e; &#x1f388;&#x1f4a5; ✨✨专栏:http://t.csdn.cn/oXkBa ⛳⛳本篇内容:c语言数据结构--树以及二叉树的概念与结构 目录 一.树概念及结构 1.树的概念 1.1树与非树 树的特点&#xff1…

【C++设计模式之装饰模式:结构型】分析及示例

装饰模式&#xff08;Decorator Pattern&#xff09;是一种结构型设计模式&#xff0c;它允许在运行时动态地给一个对象添加额外的行为。 描述 装饰模式通过创建一个包装器&#xff08;Wrapper&#xff09;来包裹原始对象&#xff0c;并在原始对象的行为前后添加额外的功能。…

前端 | AjaxAxios模块

文章目录 1. Ajax1.1 Ajax介绍1.2 Ajax作用1.3 同步异步1.4 原生Ajax 2. Axios2.1 Axios下载2.2 Axios基本使用2.3 Axios方法 1. Ajax 1.1 Ajax介绍 Ajax: 全称&#xff08;Asynchronous JavaScript And XML&#xff09;&#xff0c;异步的JavaScript和XML。 1.2 Ajax作用 …

定时器+按键控制LED流水灯模式+定时器时钟——“51单片机”

各位CSDN的uu们好呀&#xff0c;今天&#xff0c;小雅兰的内容是51单片机中的定时器以及按键控制LED流水灯模式&定时器时钟&#xff0c;下面&#xff0c;让我们进入51单片机的世界吧&#xff01;&#xff01;&#xff01; 定时器 按键控制LED流水灯模式 定时器时钟 源代…

第一百六十四回 如何实现NumberPicker

文章目录 1.概念介绍2.使用方法2.1 NumberPicker2.2 CupertinoPicker 3.示例代码4.内容总结 我们在上一章回中介绍了"如何在任意位置显示PopupMenu"相关的内容&#xff0c;本章回中将介绍如何实现NumberPicker.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1.概…

3D孪生场景搭建:参数化模型

1、什么是参数化模型 参数化模型是指通过一组参数来定义其形状和特征的数学模型或几何模型。这些参数可以用于控制模型的大小、形状、比例、位置、旋转、曲率等属性&#xff0c;从而实现对模型进行灵活的调整和变形。 在计算机图形学和三维建模领域&#xff0c;常见的参数化模…

Android改造CardView为圆形View,Kotlin

Android改造CardView为圆形View&#xff0c;Kotlin 可以利用androidx.cardview.widget.CardView的cardCornerRadius特性&#xff0c;将CardView改造成一个圆形的View&#xff0c;技术实现的关键首先设定CardView为一个宽高相等的View&#xff08;正方形&#xff09;&#xff0c…