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

这篇具有很好参考价值的文章主要介绍了【计算机网络】浏览器的通信能力。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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 即为后端需要的 属性值(值)。

    【计算机网络】浏览器的通信能力,计算机网络,计算机网络,前端,chrome

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

    【计算机网络】浏览器的通信能力,计算机网络,计算机网络,前端,chrome

    使用 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头中。

【计算机网络】浏览器的通信能力,计算机网络,计算机网络,前端,chrome

2. AJAX

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

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

以下是两者的对比

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

库 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]
}

【计算机网络】浏览器的通信能力,计算机网络,计算机网络,前端,chrome文章来源地址https://www.toymoban.com/news/detail-735829.html

到了这里,关于【计算机网络】浏览器的通信能力的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 计算机网络-VLAN间通信

    之前复习了VLAN的概念以及几个接口类型。VLAN在二层可以实现广播域的划分,VLAN间可以实现二层通信,但是不能实现三层通信,需要借助其它方式。 实际网络部署中一般会将不同IP地址段划分到不同的VLAN。同VLAN且同网段的PC之间可直接进行通信,无需借助三层转发设备,该通

    2024年02月02日
    浏览(44)
  • 计算机网络-数据通信基础

      目录 前言 一、数据通信基本概念 二、数据通信相关知识1 总结 正在学习计算机网络体系,把每日所学的知识梳理出来,既能够当作读书笔记,又能分享出来和大家一同学习讨论。 基本概念:信源、信道、信宿;数字信号、模拟信号;模拟通信、数字通信(信道中传送)。

    2024年02月19日
    浏览(42)
  • 计算机网络概论和数据通信基础

    广义观点:只要是能实现远程信息处理的系统或者进一步能达到资源共享的系统都可以称为计算机网络 资源共享观点:计算机网络必须是由独立功能的计算机组成的,能够实现资源共享的系统 用户透明观点:计算机网络就是一台超级计算机,资源丰富功能强大,使用其方式

    2024年02月20日
    浏览(56)
  • 计算机网络的常用的网络通信命令(Windows)

    ping:它是用来检查网络是否通畅或者网络连接速度的命令。ping命令利用的原理是:网络上的机器都有唯一确定的IP地址,我们给目标IP地址发送一个数据包,对方就要返回一个同样大小的数据包,根据返回的数据包我们可以确定目标主机的存在,可以初步判断目标主机的操作

    2024年02月01日
    浏览(45)
  • 网际奇缘:计算机网络演进、概念探秘与通信魔法!

    🪶🪶为了解内容 🍁🍁为重要内容 计算机网络:计算机网络是一组 自治 计算机 互连 的集合。 自治 是指每个计算机都有自主权,不受别人控制; 互连 则是指使用通信介质进行计算机连接,并达到相互通信的目的。 通俗地讲, 计算机网络就是把分布在不同地理区域的独立计算

    2024年02月12日
    浏览(48)
  • 数据通信与计算机网络(精炼知识点)

    该部分知识点不多,分值3分 TCP采用可变大小的滑动窗口协议进行流量控制。在前向纠错系统中,当接收端检测到错误后就根据纠错编码的规律自行纠错;在后向纠错系统中,接收方会请求发送方重发出错分组。IP协议不预先建立虚电路,而是对每个数据报独立地选择路由并一

    2024年02月06日
    浏览(50)
  • 计算机网络中的通信子网主要有哪些功能?

    计算机网络中的通信子网主要具有以下功能: 负责全网的数据通信:通信子网通过使用各种通信协议和传输控制功能,能够确保数据从一台主机安全、准确地传输到另一台主机。这包括数据的封装、解封装、传输控制、差错控制等过程。 完成各种网络数据的处理、转换和交换

    2024年02月04日
    浏览(51)
  • 计算机网络-OSI参考模型(来由 通信过程 各层分析)

    两种网络分层结构 结合事实标准和法定标准得到一个中和版本5层的体系结构 刚开始各个公司的网络体系结构不同,所以不能互通 所以ISO组织提出了这么一个模型,但由于与实际应用还是有点偏差,所以实际应用还是采用了TCP/IP模型 资源子网和通信子网相当于就是一个是对

    2024年01月25日
    浏览(49)
  • 【计算机网络】2、传输介质、通信方向、通信方式、交换方式、IP地址表示、子网划分

    将多根铜线按规则缠绕在一起,能够减少干扰;分为 无屏蔽双绞线UTP 和 屏蔽双绞线STP ,都是由一对铜线簇组成。也即我们常说的 网线 ;双绞线的 传输距离在100m 以内 无屏蔽双绞线UTP 价格低安装简单,但可靠性相对较低,比屏蔽双绞线STP细一点分为: CAT3(3类UTP,速率为

    2024年01月20日
    浏览(56)
  • 【计算机网络】思科实验(2):交换机间的VLAN通信

    【计算机网络】思科实验(1):交换机的VLAN划分 【计算机网络】思科实验(2):交换机间的VLAN通信 【计算机网络】思科实验(3):使用三层交换机实现跨VLAN间的通信 【计算机网络】思科实验(4):综合实验作业之办公室的跨VLAN通信 【计算机网络】思科实验(5):单臂路由跨VLAN通信

    2024年02月04日
    浏览(58)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包