【计算机网络】浏览器的通信能力

1. 用户代理

浏览器可以代替用户完成http请求,代替用户解析响应结果,所以我们称之为用户代理 user agent。

浏览器两大核心能力:

  • 自动发送请求的能力
  • 自动解析响应的能力

1.1 自动发送请求的能力

  1. 用户在地址栏输入了一个url地址,并按下了回车

    浏览器会自动解析URL,并发出一个GET请求,同时抛弃当前页面。

  2. 当用户点击了页面中的a元素

    浏览器会拿到a元素的href地址,并发出一个GET请求,同时抛弃当前页面。

  3. 当用户点击了提交按钮<button type="submit">...</button>

    浏览器会获取按钮所在的<form>元素,拿到它的action属性地址,同时拿到它method属性值,然后把表单中的数据组织到请求体(payload,负荷)中,发出指定方法的请求,同时抛弃当前页面。

    其中,input 中的 name 属性即为后端需要的 属性名(键),value 即为后端需要的 属性值(值)。

    在这里插入图片描述

    review 是将 response 以一种更加格式化的方式呈现。

    在这里插入图片描述

    使用 form 表单按下回车可以自动提交数据,点击按钮也可以自动提交数据等的自带功能,进行表单提交。

  4. 当解析HTML时遇到了<link> <img> <script> <video> <audio>等元素

    浏览器会拿到对应的地址,发出GET请求

  5. 当用户点击了刷新

    浏览器会拿到当前页面的地址,以及当前页面的请求方法,重新发一次请求,同时抛弃当前页面。

浏览器在发出请求时,会自动附带一些请求头

但是,浏览器都有一个约定:

当发送GET请求时,浏览器不会附带请求体。

这个约定深刻的影响着后续的前后端各种应用,现在,几乎所有人都在潜意识中认同了这一点,无论是前端开发人员还是后端开发人员。

由于前后端程序的默认行为,逐步造成了GET和POST的各种差异:

  1. 浏览器在发送 GET 请求时,不会附带请求体
  2. GET 请求的传递信息量有限,适合传递少量数据;POST 请求的传递信息量是没有限制的,适合传输大量数据。
  3. GET 请求只能传递 ASCII 数据,遇到非 ASCII 数据需要进行编码;POST 请求没有限制
  4. 大部分 GET 请求传递的数据都附带在 path 参数中,能够通过分享地址完整的重现页面,但同时也暴露了数据,若有敏感数据传递,不应该使用 GET 请求,至少不应该放到 path 中
  5. POST 不会被保存到浏览器的历史记录中
  6. 刷新页面时,若当前的页面是通过 POST 请求得到的,则浏览器会提示用户是否重新提交。若是 GET 请求得到的页面则没有提示。

1.2 自动解析响应的能力

浏览器不仅能发送请求,还能够针对服务器的各种响应结果做出不同的自动处理

常见的处理有:

  1. 识别响应码

    浏览器能够自动识别响应码,当出现一些特殊的响应码时浏览器会自动完成处理,比如301、302

  2. 根据响应结果做不同的处理

    浏览器能够自动分析响应头中的Content-Type,根据不同的值进行不同处理,比如:

    • text/plain: 普通的纯文本,浏览器通常会将响应体原封不动的显示到页面上

    • text/html:html文档,浏览器通常会将响应体作为页面进行渲染

    • text/javascriptapplication/javascript:js代码,浏览器通常会使用JS执行引擎将它解析执行

    • text/css:css代码,浏览器会将它视为样式

    • image/jpeg:浏览器会将它视为jpg图片

    • application/octet-stream:二进制数据,会触发浏览器下载功能

    • attachment:附件,会触发下载功能

      该值和其他值不同,应放到Content-Disposition头中。

在这里插入图片描述

2. AJAX

AJAX 就是指在web应用程序中异步向服务器发送请求。

它的实现方式有两种,XMLHttpRequest 简称XHRFetch

以下是两者的对比

功能点XHRFetch
基本的请求能力
基本的获取响应能力
监控请求进度
监控响应进度
Service Worker中是否可用
控制cookie的携带
控制重定向
请求取消
自定义referrer
API风格EventPromise
活跃度停止更新不断更新

库 axios 只是 xhr 的封装。

2.1 请求及响应数据

async function loadData() {const res = await fetch('https://www.xxx.com/api/user')// console.log(res) // res 内包含响应头,但还得不到响应体的 数据const body = await res.json()// const body = await res.text() 等等同理,都是为了等待响应体完成响应后才能返回响应体的数据,只是格式的区别// console.log(body)  // 此时 body 里面才是响应体的数据// Promise 的形式// fetch('https://www.xxx.com/api/user')//    .then(res => res.json())//    .then(body => console.log(body))   
}

2.2 上传文件

// selectFile 是文件上传的 input 框
selectFile.onchange = (e) => {// 伪数组 // 给 input (加上 multiple 可以上传多个文件)const file = e.target.files[0]
}

在这里插入图片描述

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

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

相关文章

eslint提示 xxx should be listed in the project's dependencies

有时候手动安装了一个npm包A&#xff0c;npm包A里面包含了npm包B&#xff0c;这时候如果 import xxx from npm包B;eslint会报错&#xff0c;提示 npm包B 不在 package.json 里面 解决方法&#xff1a;在 eslintrc.js 增加配置 module.exports {rules: {import/no-extraneous-d…

GEO生信数据挖掘(十一)STRING数据库PPI蛋白互作网络 Cytoscape个性化绘图【SCI 指日可待】

GEO生信数据挖掘&#xff08;十&#xff09;肺结核数据-差异分析-WGCNA分析&#xff08;900行代码整理注释更新版本&#xff09; 通过 前面十篇文章的学习&#xff0c;我们应该已经可以获取到一个”心仪的基因列表“了&#xff0c;相较于原始基因数量&#xff0c;这个列表的数…

目标检测算法发展史

前言 比起图像识别&#xff0c;现在图片生成技术要更加具有吸引力&#xff0c;但是要步入AIGC技术领域&#xff0c;首先不推荐一上来就接触那些已经成熟闭源的包装好了再提供给你的接口网站&#xff0c;会使用别人的模型生成一些图片就能叫自己会AIGC了吗&#xff1f;那样真正…

定档11月2日,YashanDB 2023年度发布会完整议程公布

数据库作为支撑核心业务的关键技术&#xff0c;对数字经济的发展有着重要的支撑作用&#xff0c;随着云计算、AI等技术的迅猛发展和数据量的爆发式增长&#xff0c;推动着数据库技术的加速创新。 为了应对用户日益复杂的数据管理需求&#xff0c;赋能行业国产化建设和数字化转型…

Windows详细安装和彻底删除RabbitMQ图文流程

RabbiitMQ简介 RabbitMQ是实现了高级消息队列协议&#xff08;AMQP&#xff1a;Advanced Message Queue Protocol&#xff09;的开源消息代理软件&#xff08;亦称面向消息的中间件&#xff09;。RabbitMQ服务器是用Erlang语言编写的&#xff0c;而聚类和故障转移是构建在开放…

C语言-递归和迭代

&#x1f308;write in front&#x1f308; &#x1f9f8;大家好&#xff0c;我是Aileen&#x1f9f8;.希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流. &#x1f194;本文由Aileen_0v0&#x1f9f8; 原创 CSDN首发&#x1f412; 如…

Windows下Redis配置密码,并设置自启动

1. 解压redis修改配置文件&#xff08;设置密码&#xff09; 打开Redis的配置文件&#xff0c;通常位于Redis安装目录下的 redis.windows.conf 去掉"requirepass"前注释&#xff0c;修改"foobared"为要设置的密码 requirepass foobared2.注册服务&#x…

SpringCloud之Eureka的学习【详细】

目录 服务架构演变 单体架构 分布式架构 分布式架构需要考虑的问题 微服务 架构比较 微服务技术对比 服务拆分注意事项 案例 服务远程调用 RestTemplate Eureka注册中心 RestTemplate存在的问题 服务调用考虑的问题 Eureka的作用 搭建EurekaServer 服务注册 …

刷穿力扣(31~60)

更好的阅读体验 \huge{\color{red}{更好的阅读体验}} 更好的阅读体验 31. 下一个排列 排列原理就是 C 中的 next_permutation 函数&#xff0c;生成指定序列的下一个全排列从给定序列的最右端开始&#xff0c;找到第一个满足 nums[i] < nums[i 1] 的元素 nums[i]若找不到这…

挑战吧,HarmonyOS应用开发工程师

一年一度属于工程师的专属节日1024&#xff0c;多重活动亮相啦~ 参与活动即有机会获得HUAWEI Freebuds 5i 耳机等精美礼品&#xff01; 点击“阅读原文”查看更多活动详情&#xff01;

算法笔记【8】-合并排序算法

文章目录 一、前言二、合并排序算法基本原理三、实现步骤四、优缺点分析 一、前言 合并排序算法通过采用分治策略和递归思想&#xff0c;实现了高效、稳定的排序功能。本文将深入探讨合并排序算法的原理、实现步骤&#xff0c;并讨论其优缺点。 二、合并排序算法基本原理 合…

双向链表的初步练习

&#x1d649;&#x1d65e;&#x1d658;&#x1d65a;!!&#x1f44f;&#x1f3fb;‧✧̣̥̇‧✦&#x1f44f;&#x1f3fb;‧✧̣̥̇‧✦ &#x1f44f;&#x1f3fb;‧✧̣̥̇: Solitary-walk ⸝⋆ ━━━┓ - 个性标签 - &#xff1a;来于“云”的“羽球人”…

dbeaver配置es连接org.elasticsearch.xpack.sql.jdbc.EsDriver

查看目标es服务版本&#xff0c;下载对应驱动

[UDS] --- CommunicationControl 0x28

1 0x28功能描述 根据ISO14119-1标准中所述&#xff0c;诊断服务28服务主要用于网络中的报文发送与接受&#xff0c;比如控制应用报文的发送与接收&#xff0c;又或是控制网络管理报文的发送与接收&#xff0c;以便满足一定场景下的应用需求。 2 0x28应用场景 一般而言&#…

迁移学习 - 微调

什么是与训练和微调&#xff1f; 你需要搭建一个网络模型来完成一个特定的图像分类的任务。首先&#xff0c;你需要随机初始化参数&#xff0c;然后开始训练网络&#xff0c;不断调整参数&#xff0c;直到网络的损失越来越小。在训练的过程中&#xff0c;一开始初始化的参数会…

指针相关面试题目

数组名的意义&#xff1a; 1. sizeof( 数组名 ) &#xff0c;这里的数组名表示整个数组&#xff0c;计算的是整个数组的大小。 2. & 数组名&#xff0c;这里的数组名表示整个数组&#xff0c;取出的是整个数组的地址。 3. 除此之外所有的数组名都表示首元素的地址。 下…

【地理位置识别】IP归属地应用的特点

IP归属地应用是一类用于确定特定IP地址的地理位置信息&#xff08;通常是城市、地区或国家&#xff09;的工具和服务。以下是IP归属地应用的几个主要特点&#xff1a; 地理位置识别&#xff1a; IP归属地应用主要用于确定IP地址的地理位置。这可以帮助组织更好地了解其网站访问…

【C语言实现扫雷小游戏——可展开一片】

文章目录 1. 游戏分析和设计1.1扫雷游戏的功能说明1.2数据结构的分析与设计 2.代码实现2.1基本框架2.2初始化棋盘2.3打印棋盘2.4布置雷2.4统计周围雷的个数2.5排查雷2.6展开一片 3.完成代码3.1game.h3.2 game.c3.3test.c 学习完了函数和数组&#xff0c;让我们做个扫雷小游戏巩…

评估在线不平衡学习的PAUC

评估在线不平衡学习的PAUC 原始论文《Prequential AUC: properties of the area under the ROC curve for data streams with concept drift》 由于正常的AUC需要计算整体数据集上&#xff0c;每个数据的预测置信度的排名。那么我们首先要求我们的在线学习算法在进行预测时也返…