HTTP请求的完全过程
zhezhongyun 2025-01-03 20:05 34 浏览
1.1 浏览器根据域名解析IP地址
浏览器根据访问的域名找到其IP地址。DNS查找过程如下：
浏览器缓存：首先搜索浏览器自身的DNS缓存（缓存的时间比较短，大概只有1分钟，且只能容纳1000条缓存），看自身的缓存中是否是有域名对应的条目，而且没有过期，如果有且没有过期则解析到此结束。
系统缓存：如果浏览器自身的缓存里面没有找到对应的条目，那么浏览器会搜索操作系统自身的DNS缓存，如果找到且没有过期则停止搜索解析到此结束。
路由器缓存：如果系统缓存也没有找到，则会向路由器发送查询请求。
ISP（互联网服务提供商） DNS缓存：如果在路由缓存也没找到，最后要查的就是ISP缓存DNS的服务器。
1.2 浏览器与WEB服务器建立一个TCP连接
TCP的3次握手。
1.3 浏览器给WEB服务器发送一个HTTP请求
一个HTTP请求报文由请求行（request line）、请求头部（headers）、空行（blank line）和请求数据（request body）4个部分组成。
1.3.1 请求行
请求行分为三个部分：请求方法、请求地址URL和HTTP协议版本，它们之间用空格分割。例如，GET /index.html HTTP/1.1。
1.请求方法
HTTP/1.1 定义的请求方法有8种：GET（完整请求一个资源）、POST（提交表单）、PUT（上传文件）、DELETE（删除）、PATCH、HEAD（仅请求响应首部）、OPTIONS（返回请求的资源所支持的方法）、TRACE（追求一个资源请求中间所经过的代理）。最常的两种GET和POST，如果是RESTful接口的话一般会用到GET、POST、DELETE、PUT。
（1）GET
当客户端要从服务器中读取文档时，当点击网页上的链接或者通过在浏览器的地址栏输入网址来浏览网页的，使用的都是GET方式。GET方法要求服务器将URL定位的资源放在响应报文的数据部分，会送给客户端。
使用GET方法时，请求参数和对应的值附加在URL后面，利用一个问号‘？’代表URL的结尾与请求参数的开始，传递参数长度受限制。例如，/index.jsp?id=100&op=bind。通过GET方式传递的数据直接放在地址中，所以GET方式的请求一般不包含“请求内容”部分，请求数据以地址的形式表现在请求行。
地址中‘？’之后的部分就是通过GET发送的请求数据，各个数据之间用‘&’符号隔开。显然这种方式不适合传送私密数据。另外，由于不同的浏览器对地址的字符限制也有所不同，一般最多只能识别1024个字符，所以如果需要传送大量数据的时候，也不适合使用GET方式。如果数据是英文字母/数字，原样发送；如果是空格，转换为+；如果是中文/其他字符，则直接把字符串用BASE64加密，得出：%E4%BD%A0%E5%A5%BD，其中%XX中的XX为该符号以16进制表示的ASCII。
（2）POST
允许客户端给服务器提供信息较多。POST方法将请求参数封装在HTTP请求数据中，以名称/值的形式出现，可以传输大量数据，这样POST方式对传送的数据大小没有限制，而且也不会显示在URL中。POST方式请求行中不包含数据字符串，这些数据保存在“请求内容”部分，各数据之间也是使用‘&’符号隔开。POST方式大多用于页面的表单中。因为POST也能完成GET的功能，因此多数人在设计表单的时候一律都使用POST方式，其实这是一个误区。GET方式也有自己的特点和优势，我们应该根据不同的情况来选择是使用GET还是使用POST。
2.URL
URL：统一资源定位符，是一种资源位置的抽象唯一识别方法。
组成：<协议>://<主机>:<端口>/<路径>
端口和路径有事可以省略（HTTP默认端口号是80）
3.协议版本
协议版本的格式为：HTTP/主版本号.次版本号，常用的有HTTP/1.0和HTTP/1.1
1.3.2 请求头部
请求头部为请求报文添加了一些附加信息，由“名/值”对组成，每行一对，名和值之间使用冒号分隔。
请求头部的最后会有一个空行，表示请求头部结束，接下来为请求数据。
1.3.3 请求数据
请求数据不在GET方法中使用，而在POST方法中使用。POST方法适用于需要客户填写表单的场合。与请求数据相关的最长使用的请求头部是Cntent-Type和Content-Length。下面是一个POST方法的请求报文：
POST /index.php HTTP/1.1 请求行
Host: localhost
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:10.0.2) Gecko/20100101 Firefox/10.0.2请求头
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,/;q=0.8
Accept-Language: zh-cn,zh;q=0.5
Accept-Encoding: gzip, deflate
Connection: keep-alive
Referer: http://localhost/
Content-Length：25
Content-Type：application/x-www-form-urlencoded
空行
username=aa&password=1234 请求数据
1.4 服务器端响应HTTP请求，浏览器得到HTML代码
HTTP响应报文由状态行（status line）、相应头部（headers）、空行（blank line）和响应数据（response body）4个部分组成。
1.4.1 状态行
状态行由3部分组成，分别为：协议版本、状态码、状态码扫描。其中协议版本与请求报文一致，状态码描述是对状态码的简单描述。
1.4.2 响应头部
1.4.3 响应数据
用于存放需要返回给客户端的数据信息。
HTTP/1.1 200 OK 状态行
Date: Sun, 17 Mar 2013 08:12:54 GMT 响应头部
Server: Apache/2.2.8 (Win32) PHP/5.2.5
X-Powered-By: PHP/5.2.5
Set-Cookie: PHPSESSID=c0huq7pdkmm5gg6osoe3mgjmm3; path=/
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Pragma: no-cache
Content-Length: 4393
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=utf-8
空行
<html> 响应数据
<head>
<title>HTTP响应示例<title>
</head>
<body>
Hello HTTP!
</body>
</html>
1.5 浏览器解析HTML代码，并请求HTML代码中的资源
浏览器拿到HTML文件后，开始解析HTML代码，遇到静态资源时，就向服务器端去请求下载。
1.6 关闭TCP连接，浏览器对页面进行渲染呈现给用户
浏览器利用自己内部的工作机制，把请求到的静态资源和HTML代码进行渲染，呈现给用户。
来源：CSDN
- 上一篇：HTTP404...前端必知，精辟简介
- 下一篇：css 伪元素
相关推荐
- 关于CSS伪类&伪元素的一些知识——CSS学习之路
-
最近两天接触到了CSS伪类和伪元素之间的关系，伪类和伪元素在css代码中使用:做标识符，同来识别元素。我倒是理解，可是为什么时常见到一会用一个冒号，一会用两个，然后就感觉很迷糊了，于是就有了这一篇文章...
- CSS中before 和after的用法
-
CSS有两个说不上常用的伪类:before和:after，偶尔会被人用来添加些自定义格式什么的，但是它们的功用不仅于此。一基本语法在了解进阶的应用之前，先来了解一下语法规则。平常仅仅需要将这...
- CSS 样式总翻车?5 个实战技巧让布局效率暴增 200%!
-
前端工程师们，是不是经常遇到这种崩溃瞬间？精心设计的CSS样式，一到不同浏览器就“变形走样”，或是响应式布局怎么调都达不到预期效果，改来改去不仅浪费时间，还容易产生一堆冗余代码。别慌！今天带来...
- 微信小程序入门教程之二:页面样式
-
这个系列的上一篇教程，教大家写了一个最简单的Helloworld微信小程序。但是，那只是一个裸页面，并不好看。今天接着往下讲，如何为这个页面添加样式，使它看上去更美观，教大家写出实际可以使用的页...
- 网格不迷路:用 CSS 网格生成器打造完美布局
-
前言你是否曾因写错grid-template-areas而捶键盘？是否在面对千层嵌套的复杂布局时，瞬间怀疑人生，甚至思考要不要转行去卖奶茶？别慌，CSS网格生成器闪亮登场，像拼乐高一样，帮你轻松...
- MFC转QT:Qt高级特性 - 样式表
-
Qt样式表概述Qt样式表(QtStyleSheets)是基于CSS的样式系统，允许开发者以类似于Web前端的方式定制Qt应用程序的外观。这一特性极大地简化了Qt应用的界面定制，提供了比MFC更强大...
- 什么是CSS?
-
CSS是一种用来描述网页样式的语言，它可以控制HTML元素的颜色、大小、位置、布局等外观效果。CSS的全称是层叠样式表(CascadingStyleSheets)，它的基本语法由选择器和...
- 从零开始学习网站CSS布局
-
CSS是前端开发中的重要技术之一，而CSS布局则是CSS技术中最基础的一部分。学习CSS布局是Web开发者的必修课，也是掌握CSS技能的基石。CSS布局指的是如何使用CSS定位和排版HTML元素。CS...
- CSS3 渐变类型及其语法
-
线性渐变:CSS3可以让背景产生渐变效果,渐变属性有两种,即linear-gradient(线性渐变)和radial-gradient(圆形渐变),语法如下background:linear-gra...
- 五大顶级CSS性能优化工具，值得程序员一试!
-
为什么Web页面的加载速度如此重要？在这个信息化的时代，如果一个网站的加载时间过长，大部分用户会极其不耐烦地选择“关掉”！这让辛辛苦苦熬夜敲代码的程序员们情何以堪，不管网站功能如何强大，用户根本都没来...
- get css中的clamp()函数，好用到起飞
-
CSS中有大量令人惊叹的属性和特性，但似乎没有人谈论的是clamp函数。这个函数让我们可以对任何CSS属性执行min-width,max-width,和之类的操作。CSSclamp语法cl...
- Google Chrome终于支持CSS Variables了
-
这篇文章要报道的并不是“新闻”，因为W3C早已开始着手CSS变量（又称‘自定义属性’）方面的工作。而作为CSS4非正式标准的一部分，Mozilla早在Firefox版本号还是29的时候就已经支持它了。...
- CSS3 过渡与动画
-
在现代网页设计中，平滑的过渡和生动的动画效果已成为提升用户体验不可或缺的元素。CSS3为我们提供了强大的transition和animation属性，让开发者能够轻松实现各种视觉效果。本文将...
- css基础篇11--表格样式
-
目标表格边框合并表格边框的间距设置表格标题位置的设置表格可以说是网页必备的元素之一，但是原生的表格样式都是很丑，列如表格加入边框的默认情况下，单元格与单元格之间有一定的空隙；设置单元格边框间距等等，都...
- WebDriver-工具辅助生成XPath语法和CSS语法
-
1.FireBug插件1.1生成XPath语法打开Firefox浏览器FireBug插件，单击插件左上角的鼠标箭头，再单击页面上需要定位的元素，在元素行上右击弹出快捷菜单，选择“复制XPath”，将会...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- HTML 参考手册 (28)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML常用标签 (29)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法：GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- HTML button formtarget 属性 (30)