【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、等】/版本
  • 请求报头
    • 参考最下面文章【待整理,可以先参考最下面的参考文章】
  • 请求正文(需要传到服务器的数据)
【HTML】浏览器输入URL,发生了什么?【HTTP篇】_第1张图片
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标签, 然后刷新页面:


【HTML】浏览器输入URL,发生了什么?【HTTP篇】_第2张图片
image

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


【HTML】浏览器输入URL,发生了什么?【HTTP篇】_第3张图片
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、响应头:

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


【HTML】浏览器输入URL,发生了什么?【HTTP篇】_第4张图片
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

你可能感兴趣的:(【HTML】浏览器输入URL,发生了什么?【HTTP篇】)