http请求过程（访问一个页面，发生了怎样的网络请求，前端开发编程

14.完成一次http请求

上文来自 https://www.cnblogs.com/greatluoluo/p/5725082.html

2. 在浏览器中敲入一个 URL 到获取网页内容发生了一个怎样的过程？

先了解一下 URI 和 URL

URI 全称为 UniformResource Identifier，即统一资源标志符，

URL 全称为 Universal Resource Locator，即统一资源定位符。

超文本

超文本英文名称叫做 Hypertext，我们在浏览器里面看到的网页就是超文本解析而成的，其网页源代码是一系列 HTML 代码，而这网页的源代码HTML 就可以称作超文本。

http

HTTP 的全称是 Hyper Text Transfer Protocol，中文名叫做超文本传输协议，

HTTP协议是用于从网络传输超文本数据到本地浏览器的传送协议，它能保证传送高效而准确地传送超文本文档。

在URL 的开头会有 http 或 https，这个就是访问资源需要的协议类型，有时我们还会看到 ftp、sftp、smb 开头的 URL

3. http请求过程

我们在浏览器中输入一个 URL，回车之后便会在浏览器中观察到页面内容，实际上这个过程是浏览器向网站所在的服务器发送了一个 Request，即请求，网站服务器接收到这个 Request 之后进行处理和解析，然后返回对应的一个 Response，即响应，然后传回给浏览器，Response里面就包含了页面的源代码等内容，浏览器再对其进行解析便将网页呈现了出来，模型如图所示：

4. http://www.baidu.com/，输入该 URL，敲击回车访问这个页面，观察一下在这个过程中发生了怎样的网络请求？

F12 -> Network.

这一个条目的各列分别代表：

第一列 Name，即 Request 的名称。一般会用URL的最后一部分内容当做名称。

第二列 Status，即 Response 的状态码。这里显示为 200，代表 Response 是正常的，通过状态码我们可以判断发送了 Request 之后是否得到了正常的 Response。

第三列 Type，即 Request 请求的文档类型。这里为 document，代表我们这次请求的是一个 HTML 文档，内容就是一些 HTML 代码。

第四列 Initiator，即请求源。用来标记 Request 是由哪个对象或进程发起的。

第五列 Size，即从服务器下载的文件和请求的资源大小。如果是从缓存中取得的资源则该列会显示 from cache。

第六列 Time，即发起 Request 到获取到 Response 所用的总时间。

第七列 Timeline，即网络请求的可视化瀑布流。

General

Request URL: https://www.baidu.com/

Request Method: GET

Status Code: 200 OK

Remote Address: 61.135.169.125:443

Referrer Policy: no-referrer-when-downgrade

首先是 General 部分，

Request URL 为 Request 的 URL，

RequestMethod 为请求的方法，.

Status Code 为响应状态码，

Remote Address 为远程服务器的地址和端口，

Referrer Policy 为 Referrer 判别策略。

Response Headers

Bdpagetype: 2

Bdqid: 0x81a0a6a90003fce2

Cache-Control: private

Connection: Keep-Alive

Content-Encoding: gzip

Content-Type: text/html;charset=utf-8

Date: Fri, 12 Oct 2018 08:27:51 GMT

Expires: Fri, 12 Oct 2018 08:27:51 GMT

Server: BWS/1.1

Set-Cookie: BDSVRTM=319; path=/

Set-Cookie: BD_HOME=1; path=/

Set-Cookie: H_PS_PSSID=1438_27215_21122_20928; path=/; domain=.baidu.com

Strict-Transport-Security: max-age=172800

Transfer-Encoding: chunked

X-Ua-Compatible: IE=Edge,chrome=1

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,/;q=0.8

Request Headers

Accept-Encoding: gzip, deflate, br

Accept-Language: zh-CN,zh;q=0.9

Cache-Control: max-age=0

Connection: keep-alive

Cookie: BAIDUID=91549D75F9BB27A514CBC4671D78FCF3:FG=1; BIDUPSID=91549D75F9BB27A514CBC4671D78FCF3; PSTM=1536133533; BD_UPN=12314753; MSA_WH=388_483; MCITY=-176%3A; ispeed_lsm=2; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598; BDUSS=FBFdFJQQVo4eUROWTVtSjZBWHhhdzlxa2JZZk1lZGNJfms4eEczcVpoSmMyZVpiQUFBQUFBJCQAAAAAAAAAAAEAAAAPIGWVMzIxeWZ0MDAxAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFxMv1tcTL9bc; H_PS_PSSID=1438_27215_21122_20928; delPer=0; BD_CK_SAM=1; PSINO=2; BD_HOME=1

DNT: 1

Host: www.baidu.com

Upgrade-Insecure-Requests: 1

User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.84 Safari/537.36

再继续往下看可以看到有一个

Response Headers 和一个 Request Headers，这分别代表响应头和请求头，

请求头里面带有许多请求信息，例如浏览器标识、Cookies、Host 等信息，这是Request 的一部分，服务器会根据请求头内的信息判断请求是否合法，进而作出对应的响应，返回Response，那么在图中看到的 Response Headers 就是 Response 的一部分，例如其中包含了服务器的类型、文档类型、日期等信息，浏览器接受到 Response 后，会解析响应内容，进而呈现网页内容。

详细解释往下看

5. 请求 Request 和响应 Response 都包含了哪些内容？

（1） Request

Request，即请求，由客户端向服务端发出。

可以将 Request 划分为四部分内容：

Request Method、Request URL、Request Headers、Request Body，

即请求方式、请求链接、请求头、请求体。

Request Method

请求方式，请求方式常见的有两种类型，GET 和 POST。

GET 请求: 浏览器中直接输入一个 URL 并回车，这便发起了一个 GET 请求

POST 请求: 表单提交

我们在浏览器中直接输入一个 URL 并回车，这便发起了一个 GET 请求，请求的参数会直接包含到 URL 里，例如百度搜索Python，这就是一个 GET 请求，链接为：https://www.baidu.com/s?wd=Python，URL中包含了请求的参数信息，这里参数 wd 就是要搜寻的关键字。

POST 请求大多为表单提交发起，如一个登录表单，输入用户名密码，点击登录按钮，这通常会发起一个 POST 请求，其数据通常以 Form Data,即表单的形式传输，不会体现在 URL 中。

GET 和 POST 请求方法有如下区别：

GET 方式请求中参数是包含在 URL 里面的，数据可以在 URL 中看到，而 POST 请求的 URL 不会包含这些数据，数据都是通过表单的形式传输，会包含在 Request Body 中。

纠正： GET 方式请求提交的数据最多只有 1024 字节，而 POST 方式没有限制。

Http Get方法提交的数据大小长度并没有限制，HTTP协议规范没有对URL长度进行限制。这个限制是特定的浏览器及服务器对它的限制。

理论上讲，POST是没有大小限制的。HTTP协议规范也没有进行大小限制，起限制作用的是服务器的处理程序的处理能力。

如：IE对URL长度的限制是2083字节(2K+35)。

下面就是对各种浏览器和服务器的最大处理能力做一些说明.

Microsoft Internet Explorer (Browser)

IE浏览器对URL的最大限制为2083个字符，如果超过这个数字，提交按钮没有任何反应。

Firefox (Browser)

对于Firefox浏览器URL的长度限制为65,536个字符。

Safari (Browser)

URL最大长度限制为 80,000个字符。

Opera (Browser)

URL最大长度限制为190,000个字符。

Google (chrome)

URL最大长度限制为8182个字符。

Apache (Server)

能接受最大url长度为8,192个字符。

Microsoft Internet Information Server(IIS)

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

总结

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

JavaScript

前端资料汇总

头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

JavaScript

前端资料汇总