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

前后端通信是怎样

前言: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.mzph.cn/news/97553.shtml

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

相关文章

【gcc】RtpTransportControllerSend学习笔记 1

本文是woder大神 的文章的学习笔记。主要是大神文章: webrtc源码分析(8)-拥塞控制(上)-码率预估 的学习笔记。大神的webrtc源码分析(8)-拥塞控制(上)-码率预估 详尽而具体,堪称神作。因为直接看大神的文章,自己啥也没记住,所以同时跟着看代码。跟着大神走一遍,不求甚解,…

踩坑日记 uniapp 底部 tabber遮挡住购物车结算

tabbar 被购物车结算遮挡 在小程序上tabbar没有将固定栏遮挡&#xff0c;如果直接调高&#xff0c;浏览器H5页面是对了&#xff0c;但在小程序上面离底部的定位就太高了 原代码 // 底部结算样式.shop-foot {border-top: 2rpx solid #F7F7F7;background-color: #FFF;position: …

机器学习 不均衡数据采样方法:imblearn 库的使用

✅作者简介&#xff1a;人工智能专业本科在读&#xff0c;喜欢计算机与编程&#xff0c;写博客记录自己的学习历程。 &#x1f34e;个人主页&#xff1a;小嗷犬的个人主页 &#x1f34a;个人网站&#xff1a;小嗷犬的技术小站 &#x1f96d;个人信条&#xff1a;为天地立心&…

【Java接口性能优化】skywalking使用

skywalking使用 提示&#xff1a;微服务中-skywalking使用 文章目录 skywalking使用一、进入skywalking主页二、进入具体服务1.查看接口 一、进入skywalking主页 二、进入具体服务 可以点击列表或搜索后&#xff0c;点击进入具体服务 依次选择日期、小时、分钟 1.查看接口 依次…

Linux工具(三)

继Linux工具&#xff08;一&#xff09;和Linux工具&#xff08;二&#xff09;&#xff0c;下面我们就来讲解Linux最后的两个工具&#xff0c;分别是代码托管的版本控制器git和代码调试器gdb。 目录 1.git-版本控制器 从0到1的实现git代码托管 检测并安装git 新建git仓库…

Harmony跨进程通信—IPC与RPC通信开发指导

一、IPC与RPC通信概述 基本概念 IPC&#xff08;Inter-Process Communication&#xff09;与RPC&#xff08;Remote Procedure Call&#xff09;用于实现跨进程通信&#xff0c;不同的是前者使用Binder驱动&#xff0c;用于设备内的跨进程通信&#xff0c;后者使用软总线驱动&a…

腾讯云中使用ubuntu安装属于自己的overleaf

在自己的云服务器上安装overleaf的需求是从写论文开始的&#xff0c;总担心自己的论文放在一个网站上被泄露&#xff0c;所以想要在自己的服务器上安装自己的overleaf&#xff0c;正好手边有一个云服务器&#xff0c;现在开始。 配置腾讯云 因为使用overleaf的优势就是在不同…

基于Java的新能源汽车在线租赁平台设计与实现(源码+lw+ppt+部署文档+视频讲解等)

文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09;有保障的售后福利 代码参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作…

Cesium展示——wkt 数据绘制

文章目录 需求分析1. 第一步,数据类型转换2. 第二步,数据渲染需求 WKT 是什么:WKT 简介 在这里,我选择将 Cesium 中将wkt数据转化为geoJSON格式后渲染至地球上 分析 1. 第一步,数据类型转换 npm install terraformer-wkt-parser --savelet wkts =

《 新手》web前端(axios)后端(java-springboot)对接简解

文章目录 <font color red>1.何为前后端对接?2.对接中关于http的关键点2.1. 请求方法2.2. 请求参数设置简解&#xff1a; 3.对接中的跨域(CROS)问题**为什么后端处理跨域尽量在业务之前进行&#xff1f;**3.总结 1.何为前后端对接? “前后端对接” 是指前端和后端两个…

ffmpeg ts 关于av_seek_frame

1 ffmpeg命令行 一般对视频文件的裁剪 我们通过一行 ffmpeg命令行即可实现&#xff0c;比如 ffmpeg -ss 0.5 - t 3 - i a.mp4 vcodec copy b.mp4 其中 -ss 放置较前 开启精准seek定位 对于mp4而言 seek将从moov中相关索引表查找 0.5s时刻附近最近的关键帧 &#xff08;此描述…

【go语言】方法

go的方法是一种作用在接收者&#xff08;某种类型的变量&#xff0c;不能是接口和指针&#xff09;上的特殊函数 方法的声明 // 类型方法接收者是值类型 func (t TypeName) MethodName (ParamList ) (Returnlist) {//method body }// 类型方法接收者是指针 func (t *TypeName…

【Vue面试题十】、Vue中组件和插件有什么区别?

文章底部有个人公众号&#xff1a;热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享&#xff1f; 踩过的坑没必要让别人在再踩&#xff0c;自己复盘也能加深记忆。利己利人、所谓双赢。 面试官&#xff1a;Vue中组件和插件有什么区…

大数据-玩转数据-Flink 海量数据实时去重

一、海量数据实时去重说明 借助redis的Set&#xff0c;需要频繁连接Redis&#xff0c;如果数据量过大, 对redis的内存也是一种压力&#xff1b;使用Flink的MapState&#xff0c;如果数据量过大, 状态后端最好选择 RocksDBStateBackend&#xff1b; 使用布隆过滤器&#xff0c;…

mysql八股

1、请你说说mysql索引&#xff0c;以及它们的好处和坏处 检索效率、存储资源、索引 索引就像指向表行的指针&#xff0c;是一个允许查询操作快速确定哪些行符合WHERE子句中的条件&#xff0c;并检索到这些行的其他列值的数据结构索引主要有普通索引、唯一索引、主键索引、外键…

攻防世界-T1 Training-WWW-Robots

文章目录 步骤1步骤二结束语 步骤1 看到文本——>提取有效信息——>利用有效信息 文本&#xff1a;In this little training challenge, you are going to learn about the Robots_exclusion_standard. The robots.txt file is used by web crawlers to check if they …

策略模式与模板方法结合案例

一、背景 上周在迁移项目MQ工程的时候&#xff0c;重新Review代码&#xff0c;发现有一段代码综合使用了策略模式和模板方法&#xff0c;下面讲解一下具体场景应用的思路。 二、模板方法 策略模式前段时间有一个关于库存具体案例&#xff0c;详见 库存管理与策略模式。 模板…

修改npm全局安装的插件(下载目录指向)

我们先打开终端 然后执行 npm config get prefix查看npm 的下载地址 一般都会在C盘 但是 我们都知道 C盘下东西多了是很不好的 所以 我们可以执行 npm config set prefix “E:\npmfile”将 npm 的下载地址 改变成 E盘下的 npmfile目录 这样 以后 默认全局安装的插件就会都到…

中国34省区市三维地形图(直接保存)

吉林 ▼ 辽宁 ▼ 北京 ▼ 河北 ▼ 山东 ▼ 山西 ▼ 天津 ▼ 江苏 ▼ 福建 ▼ 上海 ▼ 台湾 ▼ 浙江 ▼ 广东 ▼ 广西 ▼ 海南 ▼ 香港和澳门 ▼ 安徽 ▼ 河南 ▼ 湖北 ▼ 湖南 ▼ 江西 ▼ 甘肃 ▼ 内蒙古 ▼ 宁夏 ▼ 青海 ▼ 陕西 ▼ 新疆 ▼ 贵州 …

016 Spring Boot + Vue 图书管理系统

Spring Boot Vue 图书馆管理系统&#xff08;library-system&#xff09; 本地快捷预览项目 第一步&#xff1a;运行 db 文件夹下的springboot-vue.sql(询问作者获取)&#xff0c;创建springboot-vue数据库 第二步&#xff1a;修改后端数据库配置文件&#xff0c;启动后端 …