做网站一般都需要什么功能,十个有创意的活动策划,沈阳建设工程城乡建设厅,网页设计师专业培训T04BF #x1f44b;专栏: 算法|JAVA|MySQL|C语言 #x1faf5; 今天你敲代码了吗 网络原理 HTTP/HTTPS
HTTP,全称为超文本传输协议 HTTP 诞⽣与1991年. ⽬前已经发展为最主流使⽤的⼀种应⽤层协议. 实际上,HTTP最新已经发展到 3.0
但是当前行业中主要使用的HT… 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;v125, Chromium;v125, Not.A/Brand;v24
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/xhtmlxml,application/xml;q0.9,image/avif,image/webp,image/apng,*/*;q0.8,application/signed-exchange;vb3;q0.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;q0.9
Cookie: SUIDB2F2E6B75019870A0000000065E83505; cuidAAEhDK3JSgAAAAqHS15V8gEASQU; SUV1709716740486165; SMYUV1712055327421647; ABTEST3|1716650944|v17; SNUID7E584C1EAAAFB3E158142029AA686AC3header里面可以包含若干行数据
此处本质上是一个 键值对结构
每一行就是一个键值对,键和值之间是通过 : 分割的
这里的键,都是标准已经规定好了的
空行
最后一个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-age0, 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; charsetutf-8
X-Daynum: 6354
X-Daystart: 32878
X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN
X-XSS-Protection: 1; modeblock
Server: GSE
Alt-Svc: h3:443; ma2592000,h3-29:443; ma2592000
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 今天记得敲代码
