【HTML】浏览器输入URL，发生了什么？【HTTP篇】

浏览器输入URL，发生了什么？【HTTP篇】

CreateTime：2016-09-06 20:07:17
Author：zhongxia
浏览器输入URL之后，发生了什么？ 针对前端来说，最重要的是 http 和 浏览器渲染。底层硬件，网络通讯，后端的相关知识，这里就大概一概而过了。 这一篇主要讲解一下http相关方面的。

1. 浏览器输入URL，解析URL

用户输入URL地址，浏览器会去解析URL地址，得到请求服务器地址，请求页面文件路径，以及请求参数

2. DNS解析

根据域名解析服务器的IP地址， ip地址是一串数据，不方便记忆，因此有了域名。

1. 从浏览器DNS缓存，找域名相对应的IP
2. 没有找到，则从系统缓存寻找
3. 没有找到，从系统的host文件里面找
4. 没有找到，从路由器上找
5. DNS服务器找
6. ...
7. 找到域名对应的IP地址

3. 浏览器发送HTTP请求

浏览器发出一个 HTTP协议的请求，组织了一个请求的数据包（走OSI七层模型，从应用层 到 最低层的数据链路层 的数据包层层封装，然后传到服务器在 层层解开）

3.1 请求消息

• 请求行
  • 请求方法【POST/GET/PUT/DELETE】
  • URI
  • 请求协议【FTP、HTTP、HTTPS、等】/版本
• 请求报头
  • 参考最下面文章【待整理，可以先参考最下面的参考文章】
• 请求正文（需要传到服务器的数据）

image

请求头 和 请求正文之间有 一个空行，空行是 HTTP规定的消息头和消息体的分界线

3.2 响应消息

• 状态行

• 响应报头

  • 【待整理，可以先参考最下面的参考文章】

• 响应正文

1xx:信息响应类，表示接收到请求并且继续处理

2xx:处理成功响应类，表示动作被成功接收、理解和接受

3xx:重定向响应类，为了完成指定的动作，必须接受进一步处理

4xx:客户端错误，客户请求包含语法错误或者是不能正确执行

5xx:服务端错误，服务器不能正确执行一个正确的请求

3.3 HTTP相关知识：

1. 三层架构（浏览器，web服务器，数据库），http 是用在 浏览器 和 web服务器之间通讯

2. 两个核心（浏览器发出request请求, Web服务器response返回数据（text，xml，流等））

3. 一个记住（HTTP是无状态的）

无状态是指协议对于事务处理没有记忆能力，服务器不知道客户端是什么状态。即我们给服务器发送 HTTP 请求之后，服务器根据请求，会给我们发送数据过来，但是，发送完，不会记录任何信息。
keep-alive 也无法改变这个无状态

4. 以百度首页为例获取请求头和响应头内容：

1、请求头：

我们现在通过谷歌浏览器来查看一下请求头：

以打开百度首页为例，然后在谷歌浏览器中打开“工具-开发者工具”，切换到network标签， 然后刷新页面：

image

上图中，打开箭头处html格式的文件，显示如下：

image

上图中的Request Headers就是我们所需要的请求头。里面的内容全部是键值对。服务器拿到这些键值对后会对其进行分析。

我们再来重复一下常见请求头键值对的含义：

• Host:www.baidu.com 本次请求访问的主机地址（虚拟主机名称）
• Cache-control:no-cache 设置网页缓存的使用方法
• Pragma:no-cache
• Accept:text/html,xxxxxx…..客户端可以接收的数据类型（如果内容是：/，表示接收所有类型）
• User-Agent:Mozilla/5.0xxxxx 主要表示客户端类型
• Accept-Encoding:gzip,deflate,sdch 浏览器能够接收的数据压缩编码方式（表示浏览器能够接收什么格式的压缩的数据）
• Accept-Language:zh-CN,zh;q=0.8 浏览器期望的接受的语言种类
• Accept-Charset: ISO-8859-1 客户端所接收的字符集编码
• If-Modified-Since: Tue, 11 Jul 2000 18:23:51 GMT 和缓存机制相关的头
• Referer: http://www.smyh.me/index.jsp 当前页面来自哪个页面（可能是由之前的页面通过超链接点进到这个页面来）
• Cookie
• Connection: close/Keep-Alive 请求完之后，是关闭此连接，还是继续保持连接
• Date: Tue, 11 Jul 2013 18:23:51 GMT 当前请求的时间

注：上面的这些指的是get请求的请求头。

2、响应头：

我们再来看一下响应头的内容：

image

常见的响应头键值对的含义：

• Location: http://www.smyh.me/index.jsp 重定向（302+Location实现重定向）
• Server 服务器类型
• Content-Encoding 服务器当前返回给客户端的数据压缩格式
• Content-Length 返回给客户端的数据量的大小
• Content-Language: zh-cn 语言种类
• Content-Type: text/html; charset=GB2312 返回的数据的类型、字符集编码方式
• Last-Modified 资源最后一次修改的时间（配合请求头中的If-Modified-Since+304/307实现缓存机制）
• Refresh: 1;url=http://www.it315.org 　　 隔多少秒以后，让当前页面去访问哪个地址（例如网页登陆成功后，跳回原来的界面，就是用的这个头）
• Content-Disposition: attachment;filename=aaa.zip 和下载相关，通知浏览器以附件的形式下载服务器发送过去的数据
• Transfer-Encoding: chunked 数据传输模式
• Set-Cookie:SS=Q0=5Lb_nQ; path=/search 和cookie相关的头
• ETag: W/"83794-1208174400000" 和cookie相关的头
• Expires: -1 通知浏览器是否缓存当前资源：如果这个头的值是一个以毫秒为单位值，则通知浏览器缓存资源到指定的时间点；如果值是0或-1，则通知浏览器禁止缓存
• Cache-Control: no-cache 通知浏览器是否缓存资源
• Pragma: no-cache -- 通知浏览器是否缓存资源

注： 之所以三个头是一个功能,是因为历史原因。不同的浏览器对这三个头支持的不同,一般来说这三个头要同时使用，以确保不同的浏览器都能实现控制缓存的功能

• Connection: close/Keep-Alive 是否继续保持连接
• Date: Tue, 11 Jul 2000 18:23:51 GMT 当前响应的时间

参考文章

1. Android系列之网络（二）----HTTP请求头与响应头
2. 如何理解HTTP响应的状态码？
3. 【i5ting】精解http