【面试题必问】浏览器是如何实现生成HTTP消息的

news2024/12/20 20:35:06

 我们经常会使用浏览器访问各种网站,获取各种信息,帮助解决工作生活中的问题。那你知道,浏览器是怎么帮助我们实现对web服务器的访问,并返回给我们想要的信息吗?

1. 浏览器生成HTTP消息

 我们平时使用的浏览器有很多种,微软的edge,苹果的safari,谷歌的chrome等等,他们的功能是类似的。浏览器其实是一种综合性的客户端软件,具备访问多种服务器的能力,通常我们只要输入网址,也就是URL,就可以访问到目标网站。这里非常重要的就是URL:

  • URL: 统一资源定位符,也就是我们常说的网址,通常的格式是这样的,比如访问百度时https://www.baidu.com/,这种以 http 或者 https 开头的网址代表要访问的web服务器,除此之外,还有类似于"ftp:"、"file:"等等开头的网址,代表访问文件服务器或者本地文件等等。网址开头的这些标识符就是协议,其实就是双方协商好的一种通讯规则,浏览器会根据协议判断到底该访问什么服务器。根据要访问的服务器不同,URL的格式也不一样,通常由协议、域名、文件的路径名等组成,比如HTTP协议的网址:
    在这里插入图片描述

1.1 解析URL

 浏览器实现对web访问的第一步,就是要解析URL,我们以HTTP请求访问WEB服务器为例子。如http://www.lab.glasscom.com/dir1/file1.html经过拆分之后,如下所示:

在这里插入图片描述
 其中,http:表示协议。
 另外,要说明几种特别的URL,有些URL是可以省略文件的路径名和文件本身的,比如有这种http://www.lab.glasscom.com/dir1/,还有http://www.lab.glasscom.com/,这种URL并不是不需要资源文件,而是根据服务器的配置不同访问不通文件。比如前者缺省文件名的情况下默认去访问index.html或者default.html等等的文件,后者则是去访问"/"路径下的默认文件。

1.2 生成HTTP请求消息

 在解析完成URL后,浏览器就可以知道要访问的目标在哪里了,在发起请求之前,我们先了解一下HTTP协议。

  • HTTP协议:  HTTP协议定义了客户端和WEB服务器交互的内容和动作,包含了静态的资源和动态的处理。其中:
    • 静态的资源就是要访问的目标,即URI,统一资源标识符,他标定了我们要访问的资源位置(了解URL和URI的区别可以看这个< HTTP 协议中 URI 和 URL 有什么区别?>)。
    • 动态的处理是我们经常用的GET/POST等等的方法,表示我们要对URI标识的资源做什么处理,比如GET是获取,POST是提交表单数据,还有PUT更新、DELETE删除等等。服务器在接收到上述请求后,就会按照解析URL,按照协议规定进行对应的操作,并将响应结果返回给客户端进行展示,这一个请求过程就完成了。

 浏览器接下来就会根据URL解析内容,生成HTTP请求消息了,HTTP的请求消息是有严格规定的格式的,如下:

  • http请求消息  HTTP请求消息由三部分组成,分别是请求行、消息头、消息体,其中某些请求中比如GET,消息提可以忽略。
    在这里插入图片描述
     其中消息头是对请求内容的进一步补充,定义了很多内容,由键值对的形式表示。部分内容如下:

在这里插入图片描述

1.3 接收响应消息

 浏览器将HTTP请求消息发送到WEB服务器,服务器处理后,将响应结果返回,浏览器将结果解析后渲染到屏幕上,呈现给用户,一个完整的请求便处理完成了。
 这里的响应消息和1.2 中的请求消息类似,也有严格的格式,由状态行、消息头和消息体组成,如下:
在这里插入图片描述
 其中,状态行中的状态码用来告知服务器程序的处理结果,不同状态码表示含义不同。消息体是对响应结果进一步的详细描述,是由许多键值对组成,部分内容如下:

在这里插入图片描述在这里插入图片描述
 服务器返回响应结果后,浏览器会提取数据信息并将结果显示在屏幕上,如果响应结果的内容有图片或者视频等内容,网页对应位置会有图片或者视频的标签,浏览器遇到这样的标签会流出相应的空间来,直到整个响应结果加载完毕。之后,浏览器会根据图片标签的网址进行二次请求,获取对应的图片资源,然后在屏幕相应的位置展示出来,这个步骤和获取网页内容的步骤是一样的。所以包含了图片或者视频的网页,其实是要经过很多次的网络请求的,只是我们感知不到。

2. 参考实例

 下图1.7展示了浏览器与Web服务器之间交互消息的一个实例。在这个例子中,我们需要获取一张名为sample1.htm的网页,网页中包含一张名为picture.jpg的图片,图中展示了这个过程中产生的消息。

在这里插入图片描述在这里插入图片描述在这里插入图片描述

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

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

相关文章

图解LeetCode——437. 路径总和 III

一、题目 给定一个二叉树的根节点 root &#xff0c;和一个整数 targetSum &#xff0c;求该二叉树里节点值之和等于 targetSum 的 路径 的数目。 路径 不需要从根节点开始&#xff0c;也不需要在叶子节点结束&#xff0c;但是路径方向必须是向下的&#xff08;只能从父节点到…

AI智能视频技术在安防监控领域的场景应用

AI智能视频技术是一种基于人工智能、深度学习和计算机视觉等技术的视频处理技术。它可以通过对视频进行分析和识别&#xff0c;实现各种智能化应用&#xff0c;如视频监控、智能家居、自动驾驶等。 目前&#xff0c;AI智能视频技术已经实现了人脸识别、行为分析、智能跟踪、场…

测试用例excel转word(Office word篇)

场景 我们在项目中&#xff0c;默认情况下是用我们的Excel用例模版输出测试用例。但是有的项目中&#xff0c;会要求在Word版本的测试计划或者测试报告中&#xff0c;写明测试用例。而我们的测试用例&#xff0c;有的项目有上千条&#xff0c;这个时候如果从Excel往Word中复制…

【支付宝小程序】医保接入文档网址

【支付宝小程序】医保接入文档 自己注意事项&#xff1a; 授权 my.getAuthCode跳转与参数 处理 my.ap.navigateToAlipayPage联调 测试开发者加入 白名单

【前端播放器】修改前端参数,减少时延

目录 程序修改 海康 CM8 换上新的jessibuca-3 好像提高到了1S内 与2.8的旧版本比下 191-196-2.8三个对比 jessibuca-pro 延时测试 jessibuca-pro 300ms 超低延迟 wvp-webrtc wvp-webrtc vs vms webrtc > jessibuca-pro > jessibuca 总体 参考资料 程序修改 …

不要把异常当做业务逻辑,这性能可能你无法承受

一&#xff1a;背景 1. 讲故事 在项目中摸爬滚打几年&#xff0c;应该或多或少的见过有人把异常当做业务逻辑处理的情况(┬&#xff3f;┬)&#xff0c;比如说判断一个数字是否为整数,就想当然的用try catch包起来&#xff0c;再进行 int.Parse&#xff0c;如果抛异常就说明不…

基于Java家居商城系统设计实现(源码+lw+部署文档+讲解等)

博主介绍&#xff1a; ✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战 ✌ &#x1f345; 文末获取源码联系 &#x1f345; &#x1f447;&#x1f3fb; 精…

pl/sql developer oracle生僻字显示问题

一、问题由来 随着国标GB18030的推行&#xff0c;各行各业都在如火如荼的落实改造。自己在工作中也发现很多问题&#xff0c;查阅了很多资料都未解决自己的问题。经过慢慢摸索&#xff0c;对生僻字经常出现的问题进行总结&#xff0c;现分享如下。 二、问题描述 1. or…

超声功率放大器的工作原理和特点是什么

超声功率放大器是一种利用超声波振动产生机械振动的装置&#xff0c;通过将输入信号放大后输出到负载中&#xff0c;以实现对超声能量的有效利用。其工作原理和特点如下&#xff1a; 超声功率放大器的工作原理 超声功率放大器的工作原理是基于压电效应和磁致伸缩效应。当输入电…

2023亚马逊科技中国峰会之Amazon DeepRacer赛车比赛

目录 一、前言 二、什么是 Amazon DeepRacer 三、如何构建自己的第一个强化学习模型 1、创建 Amazon DeepRacer 资源 2、自定义你的赛道 3、开始你的模型 4、关于优化模型 5、在仿真器中测试 6、在真实赛道上测试你的模型 四、中国峰会总决赛 五、自动驾驶赛车名校邀…

使用PlotNeuralNet绘制深度学习网络图的基本操作(二)

使用PlotNeuralNet绘制深度学习网络图的基本操作&#xff08;二&#xff09; 接下来我们利用pycharm来绘制当中我们的神经网络模型架构&#xff0c;目标是直接将.tex文件生成为pdf和png。我在学习的过程中参考了一些学习视频&#xff0c;觉得这个up主讲的还不错&#xff1a; 1…

CH583,CH582,CH581 国产蓝牙芯片RISC-V内核BLE 5.3无线MCU

概述 CH583是集成BLE无线通讯的32位RISC微控制器。片上集成2Mbps低功耗蓝牙BLE 通讯模块、2个全速USB主机和设备控制器及收发器、2个SPI、4个串口、ADC、触摸按键检测模块、RTC等丰富的外设资源。 CH583相比CH582多了SP11主机&#xff0c;支持最低1. 7V电源电压。CH581 基于CH…

Java实现动态生成word报告

Java实现动态生成word报告 1.准备好docx文件模板 举例&#xff1a;动态生成表格数据&#xff0c;以下是list数组类型的freemarker语法 将写好的word模板加入到templates目录下 2.在pom.xml中导入相关依赖 <dependency><groupId>fr.opensagres.xdocreport</g…

react antd checkbox实现全选,多选

背景 目前好像只有table组件有实现表格数据的全选功能&#xff0c;如果说对于list&#xff0c;card&#xff0c;collapse等其他组件来说&#xff0c;需要自己结合checkbox来手动实现全选功能。 Checkbox.Group有实现全选功能&#xff0c;但是对于需要遍历出来的数据&#xff…

人民大学与加拿大女王大学金融硕士——原来“鱼和熊掌”可以兼得

“鱼和熊掌”不可兼得&#xff0c;我们从小就听到过这句话。随着长大&#xff0c;随着能力增强&#xff0c;两者我们都想要。就像在中国人民大学与加拿大女王大学金融硕士项目读研&#xff0c;我们不只要获得毕业证书&#xff0c;我们还要学到真本领。你的愿望在人大女王金融硕…

Ubuntu18.04离线安装Nginx

因需要安装nginx的服务器无法连接互联网&#xff0c;所以需要离线安装。首先需要下载nginx的安装包&#xff0c;之后进行安装&#xff0c;在安装之前需要保证gcc&#xff0c;g&#xff0c;make等依赖包已经安装。 因为是需要离线安装&#xff0c;所以在之前是用的一台互联网下载…

Java选择题刷题记录1

LinkedList类继承自AbstractSequentialList ArrayList listnew ArrayList(); 这种是默认创建大小为10的数组&#xff0c;每次扩容大小为1.5倍&#xff1b;ArrayList listnew ArrayList(20);这种是指定数组大小的创建&#xff0c;创建时直接分配其大小&#xff0c;扩充0次 Ite…

naive-ui NPopconfirm怎么用vue3的h()渲染

先看效果 然后我先贴代码&#xff0c; 你们看懂的先运行下&#xff0c; 文章后面我教你怎么 添加这种有template&#xff0c;有slot插槽的组件 h(NPopconfirm,{positiveButtonProps: {size: tiny,color: #007293,bordered: true,},negativeButtonProps: {size: tiny,color: #…

解决添加上@RequiresPermissions权限注解后无法访问接口,swagger读取不到的问题

目录 一、先搭建 Swagger 1、添加依赖库 2、创建Swagger配置类 3、配置yml 4、编写测试Web接口 5、测试Web接口 二、解决问题 1、出现的问题 2、解决问题 一、先搭建 Swagger 开发前后端分离架构的项目&#xff0c;往往调试后端Web接口需要用到POSTMAN工具。虽然POSTM…