昆明网站外包,vi设计公司联系方式,在线oa,可信网站网站认证#x1f970;#x1f970;#x1f970;来都来了#xff0c;不妨点个关注叭#xff01; #x1f449;博客主页#xff1a;欢迎各位大佬!#x1f448; 文章目录 1. HTTP 前置知识1.1 HTTP 是什么1.2 HTPP 协议应用场景1.3 HTTP 协议工作过程 2. HTTP 协议格式2.1 fiddler… 来都来了不妨点个关注叭 博客主页欢迎各位大佬! 文章目录 1. HTTP 前置知识1.1 HTTP 是什么1.2 HTPP 协议应用场景1.3 HTTP 协议工作过程 2. HTTP 协议格式2.1 fiddler 抓包工具查看 HTTP 报文格式2.2 HTTP 报文格式2.2.1 HTTP 请求报文结构 请求行方法URL版本号 请求报头 header1Host2Content-Type / Content-Length3User-Agent (简称UA)4Referer5Cookie 请求正文 body 2.2.2 HTTP 响应报文结构 响应行版本号状态码状态码描述 响应报头 header 响应正文 body 3. 如何构造 HTTP 请求3.1 直接通过浏览器地址栏输入一个 url3.2 html 一些特殊标签也会触发 GET 请求3.3 form 表单可以发 GET 和 POST 请求3.4 ajax3.5 构造 HTTP 请求工具 —— Postman 1. HTTP 前置知识
1.1 HTTP 是什么
HTTP 是一个使用非常广泛的应用层协议HTTP 请求发送出去就需要从应用层到物理层层层封装接收方收到后再从物理层到应用层层层分用最终才能够完成传输
应用层协议经常需要进行自定义协议的但是很多时候也不一定非得从零开始设定以可以基于一些已经有的设计好的协议在这个基础上制定
1.2 HTPP 协议应用场景
HTTP 应用的非常广主要原因就是 HTTP 可制定性非常强
Q既然说 HTTP 应用得非常广哪些场景下使用了的呢 A只要你在上网就在使用!!! 比如说浏览器打开一个网页手机 app 从网络上加载一份数据等等~
1.3 HTTP 协议工作过程
HTTP 是一问一答这种形式的协议即一个请求一个响应 2. HTTP 协议格式
2.1 fiddler 抓包工具查看 HTTP 报文格式
学习 HTTP 协议最主要的就是认识 HTTP 的报文协议格式而要想认识报文格式需要借助一些外部的工具来把 HTTP 协议来显示出来
这个外部工具即抓包工具本质上相当于一个代理借助这样的代理可以看到网络传输的具体数据
当然抓包工具有很多本期内容使用的是 fiddler专注与 HTTP使用起来也比较简单~ fidder 安装可以去官网直接安装 fidder 使用左侧是抓到包的列表列表中的内容是在持续滚动的点击要关注的包右侧会显示详情右上是请求右下是响应 fiddler 小技巧找自己发的包先看颜色黑色的包响应是普通数据蓝色的包响应是 HTML再看域名还可以看看响应的数据长度一般是找长度比较长的 fiddler 可能遇到的问题 1fiddler 作为一个代理可能和电脑上其它的代理冲突 2 没有勾选 HTTPS没有安装根证书无法解析 HTTPS 数据这样可能抓到的东西就会很少 借助 fiddler 工具来看一看~ 借助上述抓包工具就可以看到 HTTP 协议请求和响应的详细内容 一个 HTTP 请求包含4个部分 首行报头 header空行正文 body 一个 HTTP 响应包含4个部分 首行报头 header空行正文 body 其中 HTTP 本身是文本格式如果看到响应乱码则是经过压缩成了二进制文件因为带宽比较贵压缩能够减少网络传输的数据量节省带宽把数据压缩本质上是用 CPU 资源换带宽资源因此很多网站会对数据进行压缩
接下来进一步研究这个格式的细节信息
2.2 HTTP 报文格式 2.2.1 HTTP 请求报文结构 请求行方法URL版本号 【1.对于方法解释说明】
抓几次包小伙伴们不难发现怎么请求的方法只有 GET 呢~ 还有其它的嘛
一般请求都是 GET当然也有 POST 的如以下场景
1 登录的时候 2上传文件的时候
最常的就是 GET 和 POST 啦
HTTP 方法描述了这个 HTTP 请求想干什么HTTP协议有很多种方法不同的方法表示不同的语义这里列举一些方法如下
方法说明支持的HTTP协议版本GET获取资源1.0、1.1POST传输实体主体1.0、1.1PUT替换指定资源1.0、1.1HEAD获取报文首部1.0、1.1DELETE删除指定资源1.0、1.1OPTIONS返回所有可用方法1.1TRACE追踪路径1.1CONNECT要求用隧道协议连接代理1.1LINK建立和资源之间的联系1.0UNLINE断开连接关系1.0
【注意!!!】GET 和 POST 的区别
GET 和 POST 表示的是不同的语义但是实际上也并非需要严格遵守HTTP 方法的语义只是一种建议小伙伴们在使用的时候也不一定非得遵守注意建议~对于 body 有没有的问题GET 一般是没有 body 的也可能有 body非常少见POST 一般有 body当然也可以没有 body但比较少见
本质上没有区别但是在使用习惯上有区别
GET 习惯上用来表示’获取一个数据POST 则习惯用来表示 “提交一个数据”GET 一般没有 body需要携带数据则放到 URL 中POST 一般有 bodyGET 请求通常会设计成幂等的POST 则无要求GET 可缓存的前提是幂等POST 则不能GET 请求可以被浏览器收藏POST 则不能
【2.对于 URL 解释说明】
URL 即 唯一资源定位符描述了网络上唯一的一个资源 这个概念严格的说并非是 HTTP 里的概念很多协议都会用到 URL比如 MySQL 中的 JDBC就用到过 URL
URL 的结构如下协议名 域名 端口号可省略 带层次结构的路径 query string 参数查询字符串 补充端口号省略并不是没有而是浏览器会自动加上默认的端口号对于 HTTP来说默认端口号是80对于 HTTPS来说默认端口号是443
举一个栗子更好的理解 URL 如下
小万特别喜欢吃煎饼果子以后小万不做程序猿啦在学校食堂开了一家煎饼果子店如何找到小万呢 URL 结构是不是一目了然啦~ 同时我们也会在计算机网络中听到 URI 这个词这里作出解释
【URI 和 URL 的区别】
URI 是唯一资源标识符可以唯一标识一个资源URL 是唯一资源定位符可以提供该资源的路径
联系URL 是一种具体的URIURL 不仅可以标识一个资源还能提供该资源的路径
举例URI 的作用就像身份证一样可以唯一标识一个人而 URL 的作用则像家庭住址不仅可以唯一标识一个人还提供了定位该资源的信息
【3.对于版本号解释说明】
HTTP 版本有 HTTP/1.0、HTTP/1.1、HTTP/2.0、HTTP/3.0
最常见的版本号是 HTTP/1.1最主流的版本~
HTTP 1.0 默认短连接HTTP 1.1 默认长连接HTTP 2.0 采用多路复用
这里作简单了解 请求报头 header
请求行占一行下面的信息就是请求头以空行为分隔~ 是键值对结构每个键值对占一行键和值之间使用冒号空格分隔这里的键值对可以有 N 行会用空行作为结束标记空行就类似于链表的 null header 中的键值对大部分都是 HTTP 协议规定的当然这里也可以添加自定义键值对所以可制定性强~
下面介绍一下请求行里面部分属性的内容~
1Host
Host 这个属性描述了浏览器这个请求要访问的服务器是谁这里写的不仅仅是地址也可以是端口号~ 有的小伙伴就会问了在 URL 中已经写了当前要访问的服务器是谁为什么在请求头这里的 Host 要再写一次呢
这是因为大多数情况下Host 中的值和 URL 中的域名是一致的言外之意还有不一致的情况~比如当前我们访问的服务器不是直接访问而是通过代理来访问此时 Host 和 URL 可能就不一致了Host 是最终目标URL 中的是当前目标可以一致可以不一致滴!
2Content-Type / Content-Length
Content-Type 描述了 body 的数据格式Content-Length 描述了 body 的长度字节
这两个属性都是跟着 body 走的GET 请求一般没有 正文body所以上述的图片中没有看到这两个属性而 POST 一般有 body因此如果有 body 的话会有这两个属性 可以看到body 的长度是 707 字节类型是 application/json 数据的格式描述数据是按照 json 格式来组织的~
json 格式是用 { } 来表示的里面包含若干键值对键值对之间使用分割键和值使用分割格式如下
{username:xxxx,password:xxxx,status: 0
}在进行前后端交互(浏览器和 HTTP 服务器json 是常用的格式~
Content-Type 还会有其它的格式如 application/x-www-form-urlencoded —— form表单提交数据的时候会生成这种格式的 body此时body 的格式就是和 query string 是一样的username:xxxxpassword:xxxxstatus: 0
作为请求Content-Type 就是 json 和 application/x-www-form-urlencoded 这两种写法比较多 作为响应Content-Type 有 text/html、text/css、application/javascript、appliccation/json、image/jpg、image/png…
有了上述的格式描述浏览器/HTTP服务器才能够认识到当前的 body并正确的进行解析~ Q为什么找不到 text/css、application/javascript 这种格式 A浏览器缓存问题 浏览器中直接按 F5 刷新按 Ctrl F5是强制刷新会把缓存的数据页重新加载比如 cssjs图片字体等每次访问一个页面都需要把依赖的这些资也加载到浏览器这边加载这些资源都需要有一定的网络开销由于上述 cssjs 都是固定的很少变化就可以把这些资源在加载一遍之后保存在浏览器所在机器的本地硬盘上此时后续再访问服务器访问页面就只加载 html 即可其它这些资源就不必加载了此时就可以认为本地主机的硬盘就是远端服务器的一个缓存 3User-Agent (简称UA)
User-Agent描述用户使用的客户端是什么样的主要描述了浏览器是什么版本系统是什么版本 细心的小伙伴观察到这里是 win10但其实笔者用的是 win11猜测可能是 win10 和 win11 是一样的内核版本~
Q为什么要有 UA 呢A早期电脑硬件配置比较差当时浏览器上网功能比较原始最早浏览器只能显示文本再后来可以显示图片接着又可以显示视频/音频再后来可以支持 js再后来可以支持 flash再发展又有了新的很多很多特性~ 这个就导致同一时期浏览器的种类繁多功能参差不齐对于网站开发来说难度就大大提升了于是就发明了 User-Agent就可以在请求中告诉网站服务器当前我们当前上网的设备是啥此时服务器就可以根据客户端的种类返回不同的页面~
不过随着时间的推移浏览器过了快速发展的阶段了现在的浏览器之间的区别已经越来越小了此时UA 这个属性存在的价值就大打折扣了~ UA 现在一个重要的用途就是要区分用户是手机/PC/平板
虽然 UA 能够做到这一点但是实际上现在还有更好的解决方案CSS3 里提供了 “媒体查询” 功能可以根据浏览器窗口大小来设置不同样式这种页面开发方式称为 “响应式布局”~
4Referer
Referer描述了当前这个页面从哪个页面跳转过来的~
如果直接在地址栏输入 url此时请求中没有 referer 如果点收藏夹里面的效果也是一样的没有 referer在搜索结果页中就可以看到 referer 就是笔者的 gitee 主页 这个是从笔者主页跳转来的~ Q这个 referer 有什么用呢A用处不是多但是很关键~ 比如在广告方面 比如我在这个广告平台上一点广告就跳转到了广告主的页面此时广告主服务器这个访问就会带有这个广告平台的 referer广告主可能会通过多个平台投放广告因此就可以通过 referer 来区分看当前这次访问是哪个平台导入的流量~
但是有没有一种可能广告主这里收到了请求 referer 被篡改了~
明明是通过这个平台跳转过去的应该带这个广告平台的 referer但是被改成了别的广告平台
答案是肯定有可能的比如运营商中国移动、中国联通、中国电信它们是有能力的网络通信设备是运营商提供的我这边的访问广告主的网站我的请求、我的数据、都是通过运营商的交换机/路由器转发的只要运营商在它的设备上部署一个小小的抓包程序识别特定的包就可以做出修改当然也是有动机的因为运营商也有自己的广告平台
因此需要通过技术手段进行反制让运用商篡改不了就可以啦
办法就是加密HTTPS现在互联网绝大部分网站都是 HTTPS 的有效保护数据不被篡改当然任何加密手段都不是万无一失如果破解成本超出了数据本身价值这个时候就是安全的这里 HTTPS 闪亮登场下期讲解 HTTPS 敬请期待~
5Cookie
Cookie 是客户端保存用户信息的一种机制~ Cookie 的值也是键值对键值对之间使用分割键和值之间使用 分割这里 Cookie 的键值对具体是什么含义我也不知道只有这个网站的开发者知道这里的键值对都是程序员自定义的数据不同的网站就有不同的键值对也就有了不同的含义和用途~ 我们当前在 HTTP 中遇到很多键值对这里作一下总结
url 中的 query stringheader 部分每一行是一个键值对body 部分如果 Content-Type 为 x-www-form-urlencoded 或者 jsonbody 的内容也是键值对Cookie 里面存储的数据还是键值对
这些键值对都是允许用户自定义的这些自定义的键值对都是 HTTP 留给程序员进行扩展的地方~这就是为什么 HTTP 流传这么广泛这个场景这样定义那个场景那样定义一下 Cookie 的本质是浏览器在本地存储用户自定义数据的一种关键机制
如何理解这句话呢结合这张图进行讲解与理解~ 既然浏览器自身也需要存储数据那么怎么存呢
1直接存储到硬盘文件上是不是就行了 —— 这个事情是万万不行的如果允许网页能够操作你电脑的文件系统那么一旦你不小心点到了一个奇怪的网站很可能网站就做一些恶意的事情比如把你硬盘上的学习资料都一锅端了~ 所以为了保证用户上网能够比较安全浏览器会做出限制禁止网页能够直接访问硬盘~
2浏览器虽然禁止直接访问硬盘但是浏览器提供了 Cookie 机制允许网页往浏览器这边存储一些自定义的键值对这些数据通过浏览器提供 api写入特定的文件中
由于网页有很多比如我访问百度是需要存储一些数据我访问搜狗也需要存一些数据 针对这种情况做法是分开存储的每个网站都存储自己的 Cookiecookie 是按照域名维度进行存储的 即同一网站百度主页和百度搜索结果页…共享同一份 Cookie 不同网站百度、淘宝等则是各自有各自的 Cookie
从 3 个方面彻底弄清 Cookie
Cookie 从哪里来 从服务器来当我们的浏览器访问服务器的时候服务器就会在 HTTP 响应中通过 Set-Cookie字段把 Cookie 的键值对返回给浏览器浏览器收到这个数据就会在本地存储Cookie 到哪里去 会在下次请求的时候将 Cookie 带给服务器Cookie 在浏览器这边只能算是暂存真正让这个数据发挥作用的还是得由服务器来使用Cookie 的作用 是浏览器本地存储数据的机制存的数据不一定非得是角色任何想存的数据都行前提是必须得是字符串由于Cookie 存储空间有限一般也不会用 Cookie 存太大的最典型应用就是保存用户的登录状态
1Cookie 在哪儿看
点击浏览器这里的小锁可以看到里面有 Cookie 和站点数据如下 点进去可以看到如下 从这张图我们也可以知道以域名为维度区分的~
点击一个进入查看~ 可以看到Cookie 存储的内容有
名称内容域路径发送已创建到期
2Cookie 最典型的应用 —— 存储用户的身份信息即用户登录之后的身份 由于客户端有很多每个客户端提供的服务可能还不太一样比如说普通用户和管理员他们权限就不一样因此服务器就可以通过 Cookie 来进行区分比如客户端在登录的时候服务器就识别好客户端的角色把角色信息返回给浏览器在 Cookie 中保存后续客户端访问的时候带着这个 Cookie 就可以了此时服务器就直接知道这个客户端是干嘛的了~
其实在生活中这就像买东西的发票有了发票就有了一份售后保证可以凭借发票与商家沟通售后问题~
再具体举一个生活中的栗子~ 去医院看病的流程当然希望小伙伴们健健康康平平安安~
1第一步去医院先是挂号挂号的同时医院会给你一张就诊卡办理就诊卡需要你的身份证电话之类的个人信息 2第二步挂号完成可以去诊室看病 医生第一句话就是刷一下就诊卡这个就诊卡就包括了身份信息如你的姓名、身份证、年龄、性别…还有以往的病例当前开出的额诊断当前开的药… 3接着来到检验科刷一下就诊卡检验科的医生会根据就诊卡来确定具体做什么检查 4来到影像科刷一下就诊卡同样的影像科的医生会根据就诊卡来确定具体做什么检查
此时这个就诊卡就是 Cookie~ 请求正文 body
正文中的内容格式和 header 中的 Content-Type 密切相关上面也罗列了 3 种情况这里不作详细介绍
1application/x-www-form-urlencoded 2multipart/form-data 3application/json
2.2.2 HTTP 响应报文结构 响应行版本号状态码状态码描述
1版本号和请求中相同 2状态码数字通过这个数字来表示这次请求执行成功还是失败如果是失败给出失败的原因 3状态码描述通过一个或者一组单词描述这个状态码的含义
状态码有很多如下 ps图片来自搜狗百科
虽然状态码种类繁多但是常用的就那几个下面具体介绍常用的状态码~
200 OK 表示请求成功404 Not Found 表示要访问的资源不存在403 Forbidden 表示访问被拒绝没有权限500 Internal Server Error 表示服务器内部错误比如你的服务器出 bug 的抛异常没有 catch 到就会出现 500504 Gateway Timeout 表示服务器访问超时浏览器给服务器发请求服务器要返回响应结果服务器迟迟没有响应302 Move temporarily 表示临时重定向临时代表下次要不要继续重定向是不确定的301 Moved Permanently 表示永久重定向以后都重定向 重定向就是访问旧的地址被自动引导到新的地址上
了解上述常用的状态码即可其它的去查就好啦尽管状态码很多但是可以分为以下这五类
类别原因短语1xxinformational信息性状态码接收的请求正在处理2xxSuccess 成功状态码请求正常处理完毕3xxRedirection重定向状态码需要进行附加操作以完成请求4xxClient Error客户端错误状态码服务器无法处理请求5xxServer Error 服务器错误状态码服务器处理请求出错 响应报头 header
响应报头的基本格式和请求报头的格式基本一致类似于 Content-TypeContent-Length 等属性含义和请求中的含义一致
响应报头 Content-Type 常见有以下几种
text/html : body 数据格式是 HTMLtext/css : body 数据格式是 CSSapplication/javascript : body 数据格式是 JavaScriptapplication/json : body 数据格式是 JSON 响应正文 body
根据响应报头 Content-Type 的属性决定~ 上面也罗列了 4 种情况这里不作详细介绍
text/htmlapplication/javascriptapplication/javascriptapplication/json
以上就是关于 HTTP 协议整体格式的介绍啦~
3. 如何构造 HTTP 请求
3.1 直接通过浏览器地址栏输入一个 url
这样直接构造出一个 get 请求~ 3.2 html 一些特殊标签也会触发 GET 请求
linkscriptimga
比如有一个页面有一个 img 标签此时当页面加载好之后浏览器就会根据 img 标签的 src 属性给服务器发起一个 GET 请求来获取到图片的内容~当然你访问的资源得是网络资源如果是本地资源自然不会发起 GET 请求
3.3 form 表单可以发 GET 和 POST 请求
1form 发送 GET 请求如下
!DOCTYPE html
html
headmeta charsetUTF-8 /titleform 表单/title
/head
bodyform actionhttp://www.baidu.com/myPath methodGETinput typetext nameaaainput typetext namebbbinput typesubmit value提交/form
/body
/htmlform 其中的属性解释
action 表示要访问的 URLmethod HTTP 请求的方法input 的 name 对应 query string 的 keyinput 的 内容 query string 的 value
对应关系参考下图其实不难理解的需要用心去看~ 2form 发送 POST 请求如下
!DOCTYPE html
html
headmeta charsetUTF-8 /titleform 表单/title
/head
bodyform actionhttp://www.baidu.com/myPath methodPOSTinput typetext nameaaainput typetext namebbbinput typesubmit value提交/form
/body
/html对应参考如下POST 请求 input 内容在 body 里GET 请求 input 内容在 query stirng 里 form 表单只支持 get 和 post其它 put、delete 等 http 方法form 表单就无能为力了~ 而且使用 form 的话版本号固定是 HTTP/1.1
3.4 ajax
ajax 现在是最主流的前后端交互方式~
ajax 全称Asynchronous Javascript And XML是 2005 年提出的一种 JavaScript 给服务器发送 HTTP 请求的方式~
1Asynchronous
synchronized 是同步Asynchronous 加个 a 前缀是异步~
在计算机中一个术语很可能存在多种含义需要结合上下文
同步和互斥加锁的场景把同步理解为互斥可能更好一点加了 synchronized 这个锁之后加锁之后就变成互斥的了同步和异步IO的场景主要是网络上的 IO比如这里的同步可以理解成我来到饭馆老板来个蛋炒饭接下来我就一直在这个出餐口等着一直等到老板把饭做好我把饭端走而异步则是我找了个地方坐下来玩手机该干嘛干嘛等饭做好了老板直接给我端上来~ 异步则是请求发起者不关心结果而是由被请求的这一方面计算出结果后把结果发送给发起者就是看是否是自己取的啦
2xml 网络应用层自定义协议和 json 一起登场的~ 是一种自定义数据格式的方式基于标签的形式很多配置文件也会用到 xml比如 pom.xml、web.xml 等html 和 xml 都是由标签构成html 来说支持哪些标签标签是什么含义都是标准委员会规定的xml 来说标签都是自定义的~
ajax 是前端和后端异步交互的方式~
那 ajax 如何写呢js 给提供了原生了 ajax 的 api这个 api 挺难用的这里采用 jquery 中 提供的 ajax api
$在 jquery 中是一个特殊的全局变量jquery 中的各种 api 都是 $ 的方法是变量名的一部分
!DOCTYPE html
html
headmeta charsetUTF-8 /titleajax/titlescript srchttps://code.jquery.com/jquery-3.7.0.min.js/script
/head
bodyscript$.ajax ({url:https://www.baidu.com,type:GET, // 可以写 get、post、deletesuccess:{// 回调函数写处理响应的代码}});/script
/body
/html回调函数会在服务器返回一个正确的响应的时候被浏览器自动执行这个执行过程就是“异步”的 在我们页面中的 js把请求发出去就不管了就继续执行后续的代码直到说响应回来之后浏览器就会把这个响应喂给我们的代码浏览器调用上述这个回调函数执行处理响应的逻辑~
还有哪些关于回调函数呢~
函数指针 —— 回调函数集合类优先级队列Comparable(compareTo)Comparator(compare) —— 回调函数多线程重写 run 方法/ lambda 表达式 —— 回调函数…
即回调函数不会立刻就调等到合适得到机会再调~
相比之下ajax 比 form 功能更灵活更丰富尽管 ajax 有很多优势但是还存在一个很重要的问题
看看这个代码能否跑起来~ 直接报错如下 这个属于 ajax 的一个非常典型问题跨域问题假设现在运行的 ajax 代码页面的域名是 adc.com但是 ajax 里的请求访问的域名是 def.com这两个域名不一致的话哪怕服务器给你的响应数据浏览器还是不能处理还是要报错~ 就是为了防止 a 网站的页面请求 b 网站的数据后面自己写了服务器自己的页面请求自己的服务器自然就不会涉及跨域了~ 而 form 则允许跨域
3.5 构造 HTTP 请求工具 —— Postman
不写代码现成的工具也可以直接构造 HTTP 请求 —— Postman这里就不展开讲解~在官网下载安装十分方便操作简单
本期内容回顾 ✨✨✨本期内容到此结束啦~
