网络原理——http/https ---http(1)

在这里插入图片描述

T04BF

👋专栏: 算法|JAVA|MySQL|C语言

🫵 今天你敲代码了吗

网络原理 HTTP/HTTPS

HTTP,全称为"超文本传输协议"
在这里插入图片描述
HTTP 诞⽣与1991年. ⽬前已经发展为最主流使⽤的⼀种应⽤层协议.

在这里插入图片描述
实际上,HTTP最新已经发展到 3.0

但是当前行业中主要使用的HTTP版本还是 1.1

应用场景

(1)网页与服务器之间的交互

(2)手机APP 与 服务器 之间的交互

虽然HTTP作用很大,应用很广,但是在实际开发里面,不一定真正直接使用HTTP,更大的概率是使用HTTPS

HTTPS,本质上还是HTTP,但是引入了额外的加密层(此处的s => 安全)

抓包工具

进一步理解HTTP协议的工作流程,以及理解 HTTP协议的报文格式,需要用到 “抓包工具”

所谓抓包,即使能够把网络上传输的HTTP数据获取到,并且显示出来

而抓包工具就是一个代理程序

我们常使用的HTTP抓包工具就是 Fiddler

我们使用fiddler 并且用浏览器打开 搜狗的网页:
在这里插入图片描述
这些都是给搜狗服务器发送的请求数据

(浏览器访问一个网站的时候,往往不是只发送一个请求,很可能是发送很多个请求)

我们关注的是蓝色的 ,并且body这一列数据比较多的请求

(蓝色的是服务器返回的HTML数据,黑色的就是返回的普通的数据,同时还会存在其他不同的颜色区分 => css js 图片等)

此时用fiddler抓取请求的时,右边就会有两部分

在这里插入图片描述
这个就是请求的详情(右上角)

在这里插入图片描述
这个是响应的详情

实际上HTTP本来是 文本协议,但是如果需要返回的响应比较大,就可能需要将响应数据压缩再返回
服务器里面就宝贵的硬件资源就是 网络带宽
经过压缩就是用cpu资源,置换贷款资源
对于浏览器来说,解压缩就是 自动完成的
对于fiddler来说,就需要手动解压缩
在这里插入图片描述

http请求报文

在这里插入图片描述
我们来理解一下请求报文里面涉及的主要内容

首行

首行又包括3部分,分别是

(a)请求的方法
就是用来表示,当前这个请求要做什么,这里是get,就是表示要从服务器获取某个数据

(b)请求的URL
表示请求对方的网址

©版本号
表示http协议的版本

在首行里面,是使用空格来区分三部分的

请求(header)
Host: sogou.com
Connection: keep-alive
sec-ch-ua: "Google Chrome";v="125", "Chromium";v="125", "Not.A/Brand";v="24"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7
Sec-Fetch-Site: none
Sec-Fetch-Mode: navigate
Sec-Fetch-User: ?1
Sec-Fetch-Dest: document
Accept-Encoding: gzip, deflate, br, zstd
Accept-Language: zh-CN,zh;q=0.9
Cookie: SUID=B2F2E6B75019870A0000000065E83505; cuid=AAEhDK3JSgAAAAqHS15V8gEASQU=; SUV=1709716740486165; SMYUV=1712055327421647; ABTEST=3|1716650944|v17; SNUID=7E584C1EAAAFB3E158142029AA686AC3

header里面可以包含若干行数据

此处本质上是一个 "键值对"结构

每一行就是一个键值对,键和值之间是通过 : 分割的

这里的键,都是标准已经规定好了的

空行

最后一个header后面,存在一个空格,就是用来标识 header什么时候结束

正文body

可选的,有些情况下有正文,有些情况下则没有
在这里插入图片描述
这里的内容是任意的,可以是 完整的HTML,也可以是完整的css / js,或者json数据 / 文件 / 字体…

响应报文

http响应这里也是有4部分的
在这里插入图片描述

首行

首行也分成3部分
(a)HTTP版本
(b)状态码
©状态码描述

状态码和 状态码描述,就是用来表示当前这个请求,是一个成功的现响应还是一个失败的响应
如果失败,具体是什么原因

响应的报头header
Content-Security-Policy: script-src 'report-sample' 'nonce-DZQj_AIZgPzZ8U3IlRD6Rg' 'unsafe-inline' 'strict-dynamic' https: http:;object-src 'none';base-uri 'self';report-uri https://csp.withgoogle.com/csp/clientupdate-aus/1
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Pragma: no-cache
Expires: Mon, 01 Jan 1990 00:00:00 GMT
Date: Sat, 25 May 2024 16:07:58 GMT
X-Cup-Server-Proof: 3045022053fcd15abefbd905af6aec3d7b1d8e22d568cfaef94045db64c55c6d360911760221009c9723e72e9aac45564bbe973b9a2d5d770605694f39c1d49c849f53c7a6609b:04476c6afa69f5b08dd45f8ea917d5749db193b1f2b53cd712a033d88b4545a0
ETag: W/"3045022053fcd15abefbd905af6aec3d7b1d8e22d568cfaef94045db64c55c6d360911760221009c9723e72e9aac45564bbe973b9a2d5d770605694f39c1d49c849f53c7a6609b:04476c6afa69f5b08dd45f8ea917d5749db193b1f2b53cd712a033d88b4545a0"
Content-Type: application/json; charset=utf-8
X-Daynum: 6354
X-Daystart: 32878
X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN
X-XSS-Protection: 1; mode=block
Server: GSE
Alt-Svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000
Content-Length: 461

这里和请求的报头一样,键都是标准规定好的

空行

响应头的结束标记

正文

在这里插入图片描述
这些就是我请求搜狗的网页时,返回的响应正文

http请求

认识URL

平时我们俗称的 “⽹址” 其实就是说的 URL (Uniform Resource Locator 统⼀资源定位符).

在这里插入图片描述

协议方案名

协议⽅案名. 常见的有 http 和 https, 也有其他的类型. (例如访问 mysql 时⽤的jdbc:mysql)

登录信息

这是很久之前的方式,就是描述了你登录的时候的信息,现在基本不这么干了,都是搞一个登录页面

服务器地址

描述了要访问的服务器的IP / 域名

服务器端口号

如果这里我们自己不写的话,浏览器就会自己这个URL设置一个默认的端口,这个端口号指的就是访问的服务器的端口号

如果是http协议端口号使用80,如果是https协议,端口号就是443

如果服务器的端口号不是默认的80 / 443,那么我们就必须在url里面显示写出来端口号

但是实际上一般来说,一个网站都会使用默认的端口,大部分网站还是通过80/ 443来进行部署的

带层级的文件路径

指定了要访问服务器的哪些资源

一个服务器,可以提供很多的资源供外界访问

比如,web服务器(网站),就可能包含很多的不同的资源,就可以通过这里的路径区分不同的网页资源了

此时通过Ip 确定主机

结合端口号 确定主机上的程序

结合路径确定程序里的哪个资源

结合这三部分,就能够确定互联网上的唯一网址了

查询字符串

就是浏览器传输给服务器的时候,携带的一些参数
通过参数,将客户端想传给服务器的信息告知过去

查询字符串也是键值对的格式
在这里插入图片描述
使用& 来进行多对键值对之间的分割

使用 = 来进行键和值之间的分割

片段标识符

是用来区分页面中不同部分的目录 / 导航
比如我们访问https://v2.cn.vuejs.org/v2/guide/#%E8%B5%B7%E6%AD%A5这个网站的时候,点击不同的导航,实际上还是在同一个页面,但是是不同的内容

关于url encode

在这里插入图片描述
​实际上,在url里面存在很多的特殊含义的符号,比如: / ? = & 等等

而在query string里面的value部分,一旦也包含这些符号,那不就乱套了吗,就会使得url的解析出现问题

而encode就是针对value进行转移

而也会触发不仅仅是符号,中文汉字也会触发转义

为什么不直接使用汉字?? 实际上,汉字是utf8 / gbk编码
如果某个汉字的恰好某个字节,就和某个特殊符号的ascii码值重复了,此时就可能会导致解析的时候出现问题

那么具体是怎么转码的呢??

实际上就是,遇到需要转码的字符,就显示出这个字符原始的编码的十六进制,在这个基础上,加上%

在这里插入图片描述
就比如上面的c++,+的ascii码值的十六进制就是2B,那么转移后就是 %2B

如果是汉字,就把utf8编码结果,每个字节前面,加上 % ,按照16进制的方式来表示

在解析URL的时候,见到带 % 就知道特殊的转码后的是数据了,就可以很容易的和特殊符号区分开来

认识方法

在这里插入图片描述
方法就是动作/意图,在http请求首行里,就包含了方法,语义就是,这次请求我要干啥

get方法 和 post方法

get的语义是从服务器获取某个数据
post的语义是往服务器提交某个数据

但是实际上这是最初设计出来的目的

现如今使用这两个方法的时候已经很少区分开了
即get也可能用来提交数据,post也可能用来获取某个数据

但是在习惯上的差别是
get请求报文里面通常不会 携带body,有要传输的传输,就是使用url的query string
详细请访问关于http方法中get和post的区别

而post通常使用的是body传输数据

现实网络上大部分请求都是get

至于post就比get少很多,就是登录 / 上传文件

其他方法

put方法:也是用来给服务器提交数据的,和post非常类似,不一定用来提交文件

delete是用来删除文件的,与get类似,没有body,使用的是query string

构造不同的方法请求
对于get方法

(1)在浏览器地址栏直接输入 url,此时就是get请求

(2)网页html中会有一些特殊的标签,img / a /link 这些标签,会带有一个url属性,页面被 浏览器加载之后,解析到这些标签,就会根据url构造出新的http请求

(3)表单 通过html中特殊的标签form

(4)通过js构造

比如用原生的 ajax api / jquery 的 ajax api / 第三方库 axios ,fetch…

post

(1)表单

(2)js

感谢您的访问!!期待您的关注!!!

在这里插入图片描述

T04BF

🫵 今天记得敲代码

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

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

相关文章

明日周刊-第12期

以前小时候最期待六一儿童节了,父母总会给你满足一个愿望,也许是一件礼物也许是一次陪伴。然而这个世界上其实还有很多儿童过不上儿童节,比如某些地区的小孩子,他们更担心的是能不能见到明天的太阳。 文章目录 一周热点航天探索火…

LeetCode-77. 组合【回溯】

LeetCode-77. 组合【回溯】 题目描述:解题思路一:回溯背诵版解题思路三:0 题目描述: 给定两个整数 n 和 k,返回范围 [1, n] 中所有可能的 k 个数的组合。 你可以按 任何顺序 返回答案。 示例 1: 输入&a…

算法-对列表元素划分成两个和值最大且相等的子列表

现有私募基金发行一支特殊基金产品,该基金认购人数上限不超过 30 人, 募集总金额不超过 3000W,每个投资人认购金额不定。该基金只能将募集到的钱用于投资两支股票,且要求两支股票投资金额必须相同,且每位投资人的钱只能…

springboot报错:Failed to start bean ‘documentationPluginsBootstrapper‘

项目场景: springboot项目启动时报错 问题描述 具体报错信息: 可能原因分析: 1、SpringFox的版本与Spring Boot的版本不兼容。解决这个问题,你可能需要检查你正在使用的SpringFox和Spring Boot的版本,确保它们是兼容…

【Intro】Heterogeneous Graph Attention Network(HAN)

论文链接:https://arxiv.org/pdf/1903.07293 Abstract 异构性和丰富的语义信息给面向异构图的图形神经网络设计带来了巨大的挑战。 -> 一种基于分层注意的异构图神经网络,包括节点级注意和语义级注意。具体来说,节点级关注旨在学习节点…

GPT4o还没用上?落后一个月!

文章目录 一.Share官方网站:以一半的价格享受官网服务1.1 网址1.2 一些介绍和教学实战:1.3 主界面(支持4o):1.4 GPTS(上千个工具箱任你选择):1.5 快速的文件数据分析(以数学建模为例…

web前端三大主流框架指的是什么

web前端三大主流框架是什么?前端开发师的岗位职责有哪些?这边整理了相关内容供大家参考了解,请各位小伙伴随小编一起查阅下面的内容。 web前端三大主流框架 web前端三大主流框架是Angular、React、Vue。 1.Angular Angular原名angularJS诞生…

UnityAPI学习之Transform组件基本使用

目录 Transform组件 访问与获取 Transform的位置和旋转信息 Transform局部坐标和旋转信息的获取 Transform的缩放与正方向 缩放(Scale) 正方向 Transform相关的查找方法 销毁游戏物体 Transform组件 访问与获取 现在创建一个容器放置GrisGO物…

API接口通道如何设置?

API接口通道如何设置? 如果分站点的AI接口使用openai(站点后台->系统配置->AI参数配置->AI接口),则需要在超管后台配置接口通道,其他方式则无需在超管后台配置接口通道 1、进入超管后台选择接口通道&#x…

一键批量转换,高效轻松管理:解锁不同格式图片统一处理新体验,让图片管理更高效

在信息爆炸的时代,图片管理成为了一个不容忽视的问题。我们时常面临各种格式的图片文件,不同的格式不仅增加了管理的难度,还可能导致兼容性问题。如何快速高效地管理不同格式的图片,成为了现代人面临的一大挑战。现在,…

网上帮别人开网店卖货的骗局!

小红书帮别人开店卖货的骗局主要涉及到一些不法分子利用小红书平台的流量和用户信任度,通过虚假宣传、承诺高额利润等手段,诱骗用户开店并**所谓的“赚钱机会”。 这些骗局往往以“轻松创业、快速致富”为诱饵,吸引那些对创业充满热情但缺乏经…

Redis常用命令——List篇

提到List,我们第一时间想到的就是链表。但是在Redis中,List更像是一种双端队列,例如C中的deque。它可以快速高效的对头部和尾部进行插入和删除操作。本片文章主要对List列表的相关命令进行详解,希望本篇文章会对你有所帮助。 文章…

MedSegDiff-V2: Diffusion-Based Medical Image Segmentation with Transformer 论文总结

标题:MedSegDiff-V2: Diffusion-Based(基于扩散模型)Medical Image Segmentation(医学图像分割)with Transformer 论文(AAAI):https://ojs.aaai.org/index.php/AAAI/article/view/28…

【避坑全攻略】如何让私人的LLM拥有一个嗓子——ChatTTS

OpenAI 发布 GPT4o 之后,使得越来越多的人都开始幻想属于自己的AI“伴侣”,这最让人惊艳的就是他们出色的TTS技术。而在此之前,主流的开源TTS有 XTTS 2 和 Bark。而近日,一个名为 ChatTTS 文本转语音项目爆火出圈,引来…

.gitignore 文件

一.什么是 .gitignore 文件 在任何当前工作的 Git 仓库中,每个文件都是这样的: 追踪的(tracked)- 这些是 Git 所知道的所有文件或目录。这些是新添加(用 git add 添加)和提交(用 git commit 提…

汽美汽修店管理系统会员小程序的作用是什么

汽车后市场汽美汽修赛道同样存在着大量商家,连锁品牌店或个人小店等,门店扎堆且区域覆盖面积广,当然每天车来车往也有不少生意。 随着线上化程度加深和商家不断拓展市场的需要,传统运营模式可能难以满足现状,尤其是年…

Element - UI <el-table-column>多选数据提交后禁用已提交的多选框

1. 通过 selection-change"selectionChange" 将已选择的数据存入selectData数组中 <el-table :data"tableData" class"my-5" selection-change"selectionChange" > //多选框已选择的数据 const selectData ref([]); const sel…

HALCON-从入门到入门-图像格式的互相转换

1.废话 上次说到了图片的读取和写入到本地&#xff0c;这次说一下图片的格式相关。 位图和矢量图 photoshop处理出来的图片肯定叫做图片&#xff0c;那么coreDraw处理出来的图片是不是也叫图片。 之间就有区分&#xff0c;一种叫做位图&#xff0c;一种叫做矢量图 位图和矢…

AI大模型探索之路-实战篇13: 从对话到报告:打造能记录和分析的Agent智能数据分析平台

系列篇章&#x1f4a5; AI大模型探索之路-实战篇4&#xff1a;深入DB-GPT数据应用开发框架调研 AI大模型探索之路-实战篇5&#xff1a;探索Open Interpreter开放代码解释器调研 AI大模型探索之路-实战篇6&#xff1a;掌握Function Calling的详细流程 AI大模型探索之路-实战篇7…

echarts 图表不显示的问题

是这样的&#xff0c;点击详情&#xff0c;再点击统计&#xff0c;切换的时候就不会显示echarts图表&#xff0c;刚开始使用的是next Tick&#xff0c;没有使用定时器&#xff0c;后来加上了定时器就实现了如下所示&#xff1a; 代码是如下 const chartContainer ref(null); …