【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地址是一串数据，不方便记忆，因此有了域名。
- 从浏览器DNS缓存，找域名相对应的IP
- 没有找到，则从系统缓存寻找
- 没有找到，从系统的host文件里面找
- 没有找到，从路由器上找
- DNS服务器找
- ...
- 找到域名对应的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相关知识：
-
三层架构（浏览器，web服务器，数据库），http 是用在 浏览器 和 web服务器之间通讯
-
两个核心（浏览器发出request请求, Web服务器response返回数据（text，xml，流等））
-
一个记住（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 当前响应的时间
