【网络面试(1)】浏览器如何实现生成HTTP消息

 我们经常会使用浏览器访问各种网站,获取各种信息,帮助解决工作生活中的问题。那你知道,浏览器是怎么帮助我们实现对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的图片,图中展示了这个过程中产生的消息。

相关推荐
sweet丶2 小时前
MQTT消息通道-基础篇
网络协议
yychen_java3 小时前
当算法成为武器:AI泛滥时代的多维危机透视与治理路径
网络·人工智能·ai
漫途科技3 小时前
精准盯防危房隐患,智守人居安全|MTB46-4-2A 4G数据采集终端专项应用方案
网络·安全
奥利奥夹心脆芙4 小时前
辅助排查 HTTP 接口代码报错,实操完整案例分享
http
Misnearch4 小时前
抓包Packet Capture
网络·抓包
zhangfeng11334 小时前
ps aux讲解,结合国家超算中心 hpc apptainer
linux·服务器·网络
吠品4 小时前
一次 Nginx 报错 unexpected end of file 的排查记录
网络协议·https·ssl
代码中介商4 小时前
TLS握手全解析:从1.2到1.3的加密演进
网络·网络协议·http
xlq223225 小时前
66.ip
网络·网络协议·tcp/ip
tudoSearcher5 小时前
手机、平板、电脑同时控制Claude Code / Codex ?:Paseo实战指南
网络·开源·开源软件·个人开发·ai编程