整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

十分钟能看清-HTTP详解-请求、响应、缓存

. HTTP请求格式

做过Socket编程的人都知道,当我们设计一个通信协议时,“消息头/消息体”的分割方式是很常用的,消息头告诉对方这个消息是干什么的,消息体告诉对 方怎么干。HTTP协议传输的消息也是这样规定的,每一个HTTP包都分为HTTP头和HTTP体两部分,消息体是可选的,而消息头是必须的。每当我们打 开一个网页,在上面点击右键,选择“查看源文件”,这时看到的HTML代码就是HTTP的消息体,那么消息头可以通过浏览器的开发工具或者插件可以看到, 如果火狐的Firebug,IE的Httpwatch。

客户端通过发送 HTTP 请求向服务器请求对资源的访问。 它向服务器传递了一个数据块,也就是请求信息,HTTP 请求由三部分组成:请求行、 请求头和请求正文。

请求行:请求方法 URI 协议/版本

请求头(Request Header)

请求正文

下面是一个HTTP请求的数据:

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、请求行:请求方法URI协议/版本

请求的第一行是“方法 URL 协议/版本”,并以 回车换行作为结尾。请求行以空格分隔。格式如下:

POST /index.php HTTP/1.1

以上代码中“GET”代表请求方法,“//ndex.php”表示URI,“HTTP/1.1代表协议和协议的版本。

根据HTTP标准,HTTP请求可以使用多种请求方法。例如:HTTP1.1支持7种请求方法:GET、POST、HEAD、OPTIONS、PUT、DELETE和TARCE。在Internet应用中,最常用的方法是GET和POST。

URL完整地指定了要访问的网络资源,通常只要给出相对于服务器的根目录的相对目录即可,因此总是以“/”开头,最后,协议版本声明了通信过程中使用HTTP的版本。

请求方法

在 HTTP 协议中,HTTP 请求可以使用多种请求方法,这些方法指明了要以何种方式来访问 Request-URI 所标识的资源。HTTP1.1 支持的请求方法如下表所示:

HTTP1.1 中的请求方式:

方法

作用

GET

请求获取由 Request-URI 所标识的资源

POST

请求服务器接收在请求中封装的实体,并将其作为由 Request-Line 中的 Request-URI 所标识的资源的一部分

HEAD

请求获取由 Request-URI 所标识的资源的响应消息报头

PUT

请求服务器存储一个资源,并用 Request-URI 作为其标识符

DELETE

请求服务器删除由 Request-URI 所标识的资源

TRACE

请求服务器回送到的请求信息,主要用于测试或诊断

CONNECT

保留将来使用

OPTIONS

请求查询服务器的性能,或者查询与资源相关的选项和需求

重点介绍 GET、POST 和 HEAD 三个方法:

(1)GET

GET 方法用于获取由 Request-URI 所标识的资源的信息,常见的形式是:

GET Request-URI HTTP/1.1

GET方法是默认的HTTP请求方法,例如当我们通过在浏览器的地址栏中直接输入网址的方式去访问网页的时候,浏览器采用的就是 GET 方法向服务器获取资源。

我们可以使用GET方法来提交表单数据,用GET方法提交的表单数据只经过了简单的编码,同时它将作为URL的一部分向服务器发送,因此,如果使用GET方法来提交表单数据就存在着安全隐患上。例如:

Http://localhost/login.php?username=aa&password=1234

从上面的URL请求中,很容易就可以辩认出表单提交的内容。(?之后的内容)另外由于GET方法提交的数据是作为URL请求的一部分所以提交的数据量不能太大。这是因为浏览器对url的长度有限制

各种浏览器也会对url的长度有所限制,下面是几种常见浏览器的url长度限制:(单位:字符)

IE : 2803

Firefox:65536

Chrome:8182

Safari:80000

Opera:190000

(2)POST

POST方法是GET方法的一个替代方法,它主要是向Web服务器提交表单数据,尤其是大批量的数据。 在请求头信息结束之后的两个回车换行之后(实际是空一行),就是表单提交的数据。如上面提到的post表单数据:

username=aa&password=1234

POST方法克服了GET方法的一些缺点。通过POST方法提交表单数据时,数据不是作为URL请求的一部分而是作为标准数据传送给Web服务器,这就克 服了GET方法中的信息无法保密和数据量太小的缺点。因此,出于安全的考虑以及对用户隐私的尊重,通常表单提交时采用POST方法。

  从编程的角度来讲,如果用户通过GET方法提交数据,则数据存放在QUERY_STRING环境变量中,而POST方法提交的数据则可以从标准输入流中获取。

GET与POST方法有以下区别:

1、 在客户端,Get方式在通过URL提交数据,数据在URL中可以看到;POST方式,数据放在HTTP包的body中。

2、 GET方式提交的数据大小有限制(因为浏览器对URL的长度有限制),而POST则没有此限制。

3、安全性问题。正如在(1)中提到,使用 Get 的时候,参数会显示在地址栏上,而 Post 不会。所以,如果这些数据是中文数据而且是非敏感数据,那么使用 get;如果用户输入的数据不是中文字符而且包含敏感数据,那么还是使用 post为好。

4.、服务器取值方式不一样。GET方式取值,如php可以使用$_GET来取得变量的值,而POST方式通过$_POST来获取变量的值。

(3)HEAD

HEAD 方法与 GET 方法几乎是相同的,它们的区别在于 HEAD 方法只是请求消息报头,而不是完整的内容。对于 HEAD 请求的回应部分来说,它的 HTTP 头部中包含的信息与通过 GET 请求所得到的信息是相同的。利用这个方法,不必传输整个资源内容,就可以得到 Request-URI 所标识的资源的信息。这个方法通常被用于测试超链接的有效性,是否可以访问,以及最近是否更新。

要注意的是,在 HTML 文档中,书写 get 和 post,大小写都可以,但在 HTTP 协议中的 GET 和 POST 只能是大写形式。

2. 请求头

每个头域由一个域名,冒号(:)和域值三部分组成。域名是大小写无关的,域值前可以添加任何数量的空格符,头域可以被扩展为多行,在每行开始处,使用至少一个空格或制表符。

HTTP最常见的请求头如下:

Transport 头域

Connection:

作用:表示是否需要持久连接。

如果服务器看到这里的值为“Keep-Alive”,或者看到请求使用的是HTTP 1.1(HTTP 1.1默认进行持久连接),它就可以利用持久连接的优点,当页面包含多个元素时(例如Applet,图片),显著地减少下载所需要的时间。要实现这一点,服务器需要在应答中发送一个Content-Length头,最简单的实现方法是:先把内容写入 ByteArrayOutputStream,然后在正式写出内容之前计算它的大小;

例如: Connection: keep-alive 当一个网页打开完成后,客户端和服务器之间用于传输HTTP数据的TCP连接不会关闭,如果客户端再次访问这个服务器上的 网页,会继续使用这一条已经建立的连接

例如: Connection: close 代表一个Request完成后,客户端和服务器之间用于传输HTTP数据的TCP连接会关闭, 当客户端再次发送Request,需要重新建立TCP连接。

Host(发送请求时,该报头域是必需的)

Host请求报头域主要用于指定被请求资源的Internet主机和端口号,它通常从HTTP URL中提取出来的。

eg:http://;localhost/index.html

浏览器发送的请求消息中,就会包含Host请求报头域,如下:

Host:localhost

此处使用缺省端口号80,若指定了端口号8080,则变成:Host:localhost:8080

Client 头域

Accept:

作用:浏览器可以接受的媒体类型(MIME类型),

例如: Accept: text/html 代表浏览器可以接受服务器回发的类型为 text/html 也就是我们常说的html文档, 如果服务器无法返回text/html类型的数据,服务器应该返回一个406错误(non acceptable)。

通配符 * 代表任意类型。例如 Accept: */* 代表浏览器可以处理所有类型,(一般浏览器发给服务器都是发这个)

Accept-Encoding:

作用: 浏览器申明自己接收的编码方法,通常指定压缩方法,是否支持压缩,支持什么压缩方法(gzip,deflate),(注意:这不是只字符编码);

例如: Accept-Encoding: gzip, deflate。Server能够向支持gzip/deflate的浏览器返回经gzip或者deflate编码的HTML页面。 许多情形下这可以减少5到10倍的下载时间,也节省带宽。

Accept-Language:

作用: 浏览器申明自己接收的语言。

语言跟字符集的区别:中文是语言,中文有多种字符集,比如big5,gb2312,gbk等等;

例如: Accept-Language:zh-cn 。如果请求消息中没有设置这个报头域,服务器假定客户端对各种语言都可以接受。

User-Agent:

作用:告诉HTTP服务器, 客户端使用的操作系统和浏览器的名称和版本.

我们上网登陆论坛的时候,往往会看到一些欢迎信息,其中列出了你的操作系统的名称和版本,你所使用的浏览器的名称和版本,这往往让很多人感到很神 奇,实际上, 服务器应用程序就是从User-Agent这个请求报头域中获取到这些信息User-Agent请求报头域允许客户端将它的操作系统、浏览 器和其它属性告诉服务器。

例如: User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; CIBA; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; InfoPath.2; .NET4.0E)

Accept-Charset:

作用:浏览器申明自己接收的字符集,这就是本文前面介绍的各种字符集和字符编码,如gb2312,utf-8(通常我们说Charset包括了相应的字符编码方案);

例如:Accept-Charset:iso-8859-1,gb2312.如果在请求消息中没有设置这个域,缺省是任何字符集都可以接受。

Authorization:授权信息,通常出现在对服务器发送的WWW-Authenticate头的应答中;

Authorization请求报头域主要用于证明客户端有权查看某个资源。当浏览器访问一个页面时,如果收到服务器的响应代码为401(未授权),可以发送一个包含Authorization请求报头域的请求,要求服务器对其进行验证。

Cookie/Login 头域

Cookie:

作用: 最重要的header, 将cookie的值发送给HTTP 服务器

Entity头域

Content-Length

作用:发送给HTTP服务器数据的长度。即请求消息正文的长度;

例如: Content-Length: 38

Content-Type:

作用:

例如:Content-Type: application/x-www-form-urlencoded

Miscellaneous 头域

Referer:

作用: 提供了Request的上下文信息的服务器,告诉服务器我是从哪个链接过来的,比如从我主页上链接到一个朋友那里, 他的服务器就能够从HTTP Referer中统计出每天有多少用户点击我主页上的链接访问 他的网站。

例如: Referer:http://translate.google.cn/?hl=zh-cn&tab=wT

Cache 头域

If-Modified-Since:

作用: 把浏览器端缓存页面的最后修改时间发送到服务器去,服务器会把这个时间与服务器上实际文件的最后修改时间进行对比。如果时间一致,那么返回304,客户端 就直接使用本地缓存文件。如果时间不一致,就会返回200和新的文件内容。客户端接到之后,会丢弃旧文件,把新文件缓存起来,并显示在浏览器中。

例如:If-Modified-Since: Thu, 09 Feb 2012 09:07:57 GMT。

If-None-Match:

作用: If-None-Match和ETag一起工作,工作原理是在HTTP Response中添加ETag信息。 当用户再次请求该资源时,将在HTTP Request 中加入If-None-Match信息(ETag的值)。如果服务器验证资源的ETag没有改变(该资源没有更新),将返回一个304状态告诉客户端使用 本地缓存文件。否则将返回200状态和新的资源和Etag. 使用这样的机制将提高网站的性能

例如: If-None-Match: "03f2b33c0bfcc1:0"

Pragma:

作用: 防止页面被缓存, 在HTTP/1.1版本中,它和Cache-Control:no-cache作用一模一样

Pargma只有一个用法, 例如: Pragma: no-cache

注意: 在HTTP/1.0版本中,只实现了Pragema:no-cache, 没有实现Cache-Control

Cache-Control:

作用: 这个是非常重要的规则。 这个用来指定Response-Request遵循的缓存机制。各个指令含义如下

Cache-Control:Public 可以被任何缓存所缓存()

Cache-Control:Private 内容只缓存到私有缓存中

Cache-Control:no-cache 所有内容都不会被缓存

2. HTTP响应格式

在接收和解释请求消息后,服务器会返回一个 HTTP 响应消息。与 HTTP 请求类似,HTTP 响应也是由三个部分组成,分别是:状态行、消息报头和响应正文。如:

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、状态行

状态行由协议版本、数字形式的状态代码,及相应的状态描述组成,各元素之间以空格分隔,结尾时回车换行符,格式如下:

HTTP-Version Status-Code Reason-Phrase CRLF

HTTP-Version 表示服务器 HTTP 协议的版本,Status-Code 表示服务器发回的响应代码,Reason-Phrase 表示状态代码的文本描述,CRLF 表示回车换行。例如:

HTTP/1.1 200 OK (CRLF)

状态代码与状态描述

状态代码由 3 位数字组成, 表示请求是否被理解或被满足,状态描述给出了关于状态码的简短的文字描述。状态码的第一个数字定义了响应类别,后面两位数字没有具体分类。第一个数字有 5 种取值,如下所示。

  • 1xx:指示信息——表示请求已经接受,继续处理
  • 2xx:成功——表示请求已经被成功接收、理解、接受。
  • 3xx:重定向——要完成请求必须进行更进一步的操作
  • 4xx:客户端错误——请求有语法错误或请求无法实现
  • 5xx:服务器端错误——服务器未能实现合法的请求。

常见状态代码、状态描述、说明:

200 OK //客户端请求成功

400 Bad Request //客户端请求有语法错误,不能被服务器所理解

401 Unauthorized //请求未经授权,这个状态代码必须和WWW-Authenticate报头域一起使用

403 Forbidden //服务器收到请求,但是拒绝提供服务

404 Not Found //请求资源不存在,eg:输入了错误的URL

500 Internal Server Error //服务器发生不可预期的错误

503 Server Unavailable //服务器当前不能处理客户端的请求,一段时间后可能恢复正常

2、响应正文

响应正文就是服务器返回的资源的内容,响应头和正文之间也必须用空行分隔。如:

  1. <html>
  2. <head>
  3. <title>HTTP响应示例<title>
  4. </head>
  5. <body>
  6. Hello HTTP!
  7. </body>
  8. </html>

3 、响应头信息

HTTP最常见的响应头如下所示:

Cache头域

Date:

作用:生成消息的具体时间和日期,即当前的GMT时间。

例如: Date: Sun, 17 Mar 2013 08:12:54 GMT

Expires:

作用: 浏览器会在指定过期时间内使用本地缓存,指明应该在什么时候认为文档已经过期,从而不再缓存它。

例如: Expires: Thu, 19 Nov 1981 08:52:00 GMT  

Vary

作用:

例如: Vary: Accept-Encoding

Cookie/Login 头域

P3P

作用: 用于跨域设置Cookie, 这样可以解决iframe跨域访问cookie的问题

例如: P3P: CP=CURa ADMa DEVa PSAo PSDo OUR BUS UNI PUR INT DEM STA PRE COM NAV OTC NOI DSP COR

Set-Cookie

作用: 非常重要的header, 用于把cookie 发送到客户端浏览器, 每一个写入cookie都会生成一个Set-Cookie.

例如: Set-Cookie: PHPSESSID=c0huq7pdkmm5gg6osoe3mgjmm3; path=/

Entity实体头域:

实体内容的属性,包括实体信息类型,长度,压缩方法,最后一次修改时间,数据有效性等。

ETag:

作用: 和If-None-Match 配合使用。 (实例请看上节中If-None-Match的实例)

例如: ETag: "03f2b33c0bfcc1:0"

Last-Modified:

作用: 用于指示资源的最后修改日期和时间。(实例请看上节的If-Modified-Since的实例)

例如: Last-Modified: Wed, 21 Dec 2011 09:09:10 GMT

Content-Type:

作用:WEB服务器告诉浏览器自己响应的对象的类型和字符集,

例如:

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

  Content-Type:text/html;charset=GB2312

  Content-Type: image/jpeg

Content-Length:

指明实体正文的长度,以字节方式存储的十进制数字来表示。在数据下行的过程中,Content-Length的方式要预先在服务器中缓存所有数据,然后所有数据再一股脑儿地发给客户端。

  例如: Content-Length: 19847

Content-Encoding:

作用:文档的编码(Encode)方法。一般是压缩方式。

WEB服务器表明自己使用了什么压缩方法(gzip,deflate)压缩响应中的对象。利用gzip压缩文档能够显著地减少HTML文档的下载时间。

例如:Content-Encoding:gzip

Content-Language:

作用: WEB服务器告诉浏览器自己响应的对象的语言者

例如: Content-Language:da

Miscellaneous 头域

Server:

作用:指明HTTP服务器的软件信息

例如:Apache/2.2.8 (Win32) PHP/5.2.5

X-Powered-By:

作用:表示网站是用什么技术开发的

例如: X-Powered-By: PHP/5.2.5

Transport头域

Connection:

例如: Connection: keep-alive 当一个网页打开完成后,客户端和服务器之间用于传输HTTP数据的TCP连接不会关闭,如果客户端再次访问这个服务器上的网页,会继续使用这一条已经建立的连接

例如: Connection: close 代表一个Request完成后,客户端和服务器之间用于传输HTTP数据的TCP连接会关闭, 当客户端再次发送Request,需要重新建立TCP连接。

Location头域

Location:

作用: 用于重定向一个新的位置, 包含新的URL地址

实例请看304状态实例

HTTP协议是无状态的和Connection: keep-alive的区别

  无状态是指协议对于事务处理没有记忆能力,服务器不知道客户端是什么状态。从另一方面讲,打开一个服务器上的网页和你之前打开这个服务器上的网页之间没有任何联系。

  HTTP是一个无状态的面向连接的协议,无状态不代表HTTP不能保持TCP连接,更不能代表HTTP使用的是UDP协议(无连接)。

  从HTTP/1.1起,默认都开启了Keep-Alive,保持连接特性,简单地说,当一个网页打开完成后,客户端和服务器之间用于传输HTTP数据的TCP连接不会关闭,如果客户端再次访问这个服务器上的网页,会继续使用这一条已经建立的连接。

  Keep-Alive不会永久保持连接,它有一个保持时间,可以在不同的服务器软件(如Apache)中设定这个时间。

3. 浏览器缓存

浏览器缓存:包括页面html缓存和图片js,css等资源的缓存。如下图,浏览器缓存是基于把页面信息保存到用户本地电脑硬盘里。

1、缓存的优点:

1)服务器响应更快:因为请求从缓存服务器(离客户端更近)而不是源服务器被相应,这个过程耗时更少,让服务器看上去响应更快。

2)减少网络带宽消耗:当副本被重用时会减低客户端的带宽消耗;客户可以节省带宽费用,控制带宽的需求的增长并更易于管理。

2、缓存工作原理

页面缓存状态是由http header决定的,一个浏览器请求信息,一个是服务器响应信息。主要包括Pragma: no-cache、Cache-Control、 Expires、 Last-Modified、If-Modified-Since。其中Pragma: no-cache由HTTP/1.0规定,Cache-Control由HTTP/1.1规定。

工作原理图:

从图中我们可以看到原理主要分三步:

  1. 第一次请求:浏览器通过http的header报头,附带Expires,Cache-Control,Last-Modified/Etag向服务器请求,此时服务器记录第一次请求的Last-Modified/Etag
  2. 再次请求:当浏览器再次请求的时候,请求头附带Expires,Cache-Control,If-Modified-Since/Etag向服务器请求
  3. 服务器根据第一次记录的Last-Modified/Etag和再次请求的If-Modified-Since/Etag做对比,判断是否需要更新,服务器通过这两个头判断本地资源未发生变化,客 户端不需要重新下载,返回304响应。常见流程如下图所示:

与缓存相关的HTTP扩展消息头

Expires:设置页面过期时间,格林威治时间GMT

Cache-Control:更细致的控制缓存的内容

Last-Modified:请求对象最后一次的修改时间 用来判断缓存是否过期 通常由文件的时间信息产生

ETag:响应中资源的校验值,在服务器上某个时段是唯一标识的。ETag是一个可以 与Web资源关联的记号(token),和Last-Modified功能才不多,也是一个标识符,一般和Last-Modified一起使用,加强服务器判断的准确度。

Date:服务器的时间

If-Modified-Since:客户端存取的该资源最后一次修改的时间,用来和服务器端的Last-Modified做比较

If-None-Match:客户端存取的该资源的检验值,同ETag。

Cache-Control的主要参数

Cache-Control: private/public Public 响应会被缓存,并且在多用户间共享。 Private 响应只能够作为私有的缓存,不能再用户间共享。

Cache-Control: no-cache:不进行缓存

Cache-Control: max-age=x:缓存时间 以秒为单位

Cache-Control: must-revalidate:如果页面是过期的 则去服务器进行获取。

2、关于图片,css,js,flash的缓存

这个主要通过服务器的配置来实现这个技术,如果使用apache服务器的话,可以使用mod_expires模块来实现:

编译mod_expires模块:

Cd /root/httpd-2.2.3/modules/metadata

/usr/local/apache/bin/apxs -i -a -c mod_expires.c //编译

编辑httpd.conf配置:添加下面内容

<IfModule mod_expires.c>

ExpiresActive on

ExpiresDefault "access plus 1 month"

ExpiresByType text/html "access plus 1 months"

ExpiresByType text/css "access plus 1 months"

ExpiresByType image/gif "access plus 1 months"

ExpiresByType image/jpeg "access plus 1 months"

ExpiresByType image/jpg "access plus 1 months"

ExpiresByType image/png "access plus 1 months"

EXpiresByType application/x-shockwave-flash "access plus 1 months"

EXpiresByType application/x-javascript "access plus 1 months"

#ExpiresByType video/x-flv "access plus 1 months"

</IfModule>

解释:第一句--开启服务

第二句--默认时间是一个月

在下面是关于各种类型的资源的缓存时间设置

我们开发Web应用的时候,会用到大量的js、css、image、html等静态资源资源。

静态资源映射


默认情况下,我们只需要将静态资源放在一下几个目录中就可以直接通过url在浏览器中访问了。

  • /META-INF/resources/
  • /resources/
  • /static/
  • /public/

如果这四个目录中有相同的静态资源文件,那么优先访问哪个目录下面的资源啊?

静态资源的默认访问优先级:/META-INF/resources/>/resources/>/static/>/public/

在四个目录中都放一个static.html的文件,每个html文件中都说明自己所在的目录,访问结果如下:

SpringBoot关于静态资源的访问涉及到了application.properties中的两个属性:

# 默认值为 /*
spring.mvc.static-path-pattern= #这里设置静态资源匹配的url-pattern
# 默认值为 classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/ 
spring.resources.static-locations= #这里设置要指向的路径,多个使用英文逗号隔开,在前面的优先级高

此时,我们豁然开朗,知道默认情况下静态资源为什么放在/META-INF/resources/、/resources/、/static/、/public/这四个目录了,还有这四个目录访问的优先级是怎么来的了。

修改静态资源映射的方法:

  • 我们可以修改这两个属性来改变静态资源的映射,比如我们的所有静态资源都在mystatic目录中,并且我们希望访问静态资源的的url都带有/mystatic/这个目录前缀:
spring.mvc.static-path-pattern=/mystatic/*
spring.resources.static-locations= classpath:mystatic/

在resources资源目录中创建一个mystatic目录,在该目录下面创建一个static.html文件,访问结果如下:

  • 继承WebMvcConfigurerAdapter类,并且重写addResourceHandlers方法就行,该操作与上面的方法得到的效果是一样的


注意:还可以设置外部磁盘目录,设置方式不变,格式如下:file:d/mystatic/。

WebJars


WebJars将前端资源(css,js,image,html等等)打包到jar中,然后使用基于JVM的包管理器(比如 Maven、Gradle 等)管理前端依赖的方案。SpringBoot中也可以通过WebJars来访问静态资源。

SpringBoot默认将/webjars/**映射到 classpath:/META-INF/resources/webjars/。

  • /webjars/**:表示/webjars/目录下的所有文件,及存在其目录下的jar包中的所有文件。

所以默认情况下我们需要访问WebJars中的资源,需要将其jar包放到classpath:/META-INF/resources/webjars/目录中。

我们来使用一下WebJars:

  • 在pom.xml中引入jquery的WebJars,默认会被放在classpath:/META-INF/resources/webjars/目录中
 <dependency>
 <groupId>org.webjars</groupId>
 <artifactId>jquery</artifactId>
 <version>2.1.1</version>
 </dependency>
  • 在前端webjars.html页面中引入jquery
<script src="/webjars/jquery/2.1.1/jquery.js"></script>
  • 访问页面webjars.html,查看源码,可以链接到jquery.js的内容


版本号统一管理


如果我们有很多页面都是用了WebJars中的资源,而我们现在要升级WebJars的版本,岂不是要在每个页面中都改动一下,这样很麻烦啊,有没有简单的方法啊。此时,我们可以进行版本号统一管理。

  • 在pom.xml中引入jquery的WebJars的基础上添加:
 <dependency>
 <groupId>org.webjars</groupId>
 <artifactId>webjars-locator</artifactId>
 </dependency>
  • 添加版本号统一管理的控制器


  • 在页面中引入jquery的方式如下:
<script src="/webjarslocator/jquery/jquery.js"></script>

静态资源版本管理


当我们资源内容发生变化时,由于浏览器缓存,用户本地的静态资源还是旧的资源,为了防止这种情况导致的问题,我们可能会手动在请求url的时候加个版本号或者其他方式。

<script type="text/javascript" src="/lavor.js?v=1.1"></script>

SpringMVC提供了两种方式可以帮助我们很容易地解决这类问题。

MD5方式


  • 修改application.properties配置文件
spring.resources.chain.strategy.content.enabled=true
spring.resources.chain.strategy.content.paths=/**
  • 添加@ControllerAdvice注解,返回ResourceUrlProvider的对象,这样所有通过控制器返回的模板页面(jsp,thymeleaf,freeemarker等)就都可以在页面中使用该对象了


  • 在控制器返回的模板页面中,添加以下信息,我们这里的返回页面时jsp页面,lavor.js是webapp目录下面的js脚本文件。
<script src="${urls.getForLookupPath('/lavor.js') }"></script>
  • 通过浏览器访问控制器的请求url,查看页面源代码
<script src="/lavor-fdfa0502716d517c6cad4f2536aa02a1.js"></script>

请求/lavor-fdfa0502716d517c6cad4f2536aa02a1.js,我们MD5配置的paths=/**,所以SpringMVC会尝试url中是否包含-,如果包含会去掉后面这部分,然后去映射的目录(如webapp根目录,上面提到的四大静态映射目录)查找/lavor.js文件,如果能找到就返回。

版本号方式


  • 修改application.properties配置文件,注意MD5方式中的是content,这里是fixed
spring.resources.chain.strategy.fixed.enabled=true
#版本号处理的路径
spring.resources.chain.strategy.fixed.paths=/**
# 版本号,可以为所处理路径中的资源加上/v1.1目录前缀
spring.resources.chain.strategy.fixed.version=v1.1
  • 添加@ControllerAdvice注解,返回ResourceUrlProvider的对象,这样所有通过控制器返回的模板页面(jsp,thymeleaf,freeemarker等)就都可以在页面中使用该对象了


  • 在控制器返回的模板页面中,添加以下信息,我们这里的返回页面时jsp页面,lavor.js是webapp目录下面的js脚本文件.
<script src="${urls.getForLookupPath('/lavor.js') }"></script>
  • 通过浏览器访问控制器的请求url,查看页面源代码
<script src="/v1.1/lavor.js"></script>

请求/v1.1/lavor.js,会查看v1.1是不是版本号,如果是就去掉前缀目录,直接查找/lavor.js。

注意:我们发现如果添加了webapp目录,那么该目录也可以存放静态资源,并且默认情况下访问优先级比/META-INF/resources/还要高。

ndroid高阶开发专栏

Java高级开发进阶专栏

TCP连接的三次握手和四次挥手

一文搞懂DNS域名解析的详细流程

高并发与负载均衡:Nginx的反向代理和负载均衡

一文搞懂TCP/IP协议及Web基础知识

一文搞懂HTTP协议的核心知识点

一文掌握 HTTP协议报文 包含的信息类型

一文搞懂HTTP协议 返回结果的HTTP状态码

一文搞懂 HTTP协议的报文首部


作为网络专栏的开篇导文,本文概况介绍下经典案例:从输入一个网址到浏览器显示页面的全过程。

步骤概要介绍如下:

  • 1、输入网址
  • 2、DNS解析获取域名对应的IP地址
  • 3、建立TCP连接
  • 4、web浏览器向web服务器发送HTTP请求
  • 5、服务器的永久重定向响应
  • 6、浏览器跟踪重定向地址
  • 7、web服务器做出应答
  • 8、浏览器显示 HTML
  • 9、浏览器发送请求获取其他嵌入在 HTML 中的资源
  • 10、web服务器关闭TCP连接

1、输入网址

当在浏览器中输入网址时,浏览器其实就已在智能匹配 url 了,他会从历史记录,书签等地方,找到已经输入的字符串可能对应的 url,然后给出智能提示,让你可以补全url地址。

对于 google的chrome 的浏览器,他甚至会直接从缓存中把网页展示出来,就是说,你还没有按下 enter,页面就出来了。


2、DNS解析获取域名对应的IP地址

请求一旦发起,浏览器首先要做的事情就是解析这个域名。

  • 1、一般来说,浏览器会首先查看本地硬盘的 hosts 文件,看看其中有没有和这个域名对应的规则,如果有的话就直接使用 hosts 文件里面的 ip 地址。
  • 2、如果在本地的 hosts 文件没有能够找到对应的 ip 地址,浏览器会发出一个 DNS请求到本地DNS服务器 。本地DNS服务器一般都是你的网络接入服务器商提供,比如中国电信,中国移动。
  • 3、查询你输入的网址的DNS请求到达本地DNS服务器之后,本地DNS服务器会首先查询它的缓存记录,如果缓存中有此条记录,就可以直接返回结果,此过程是递归的方式进行查询。如果没有,本地DNS服务器还要向DNS根服务器进行查询。
  • 4、根DNS服务器没有记录具体的域名和IP地址的对应关系,而是告诉本地DNS服务器,你可以到域服务器上去继续查询,并给出域服务器的地址。这种过程是迭代的过程。
  • 5、本地DNS服务器继续向域服务器发出请求,在这个例子中,请求的对象是.com域服务器。.com域服务器收到请求之后,也不会直接返回域名和IP地址的对应关系,而是告诉本地DNS服务器,你的域名的解析服务器的地址。
  • 6、最后,本地DNS服务器向域名的解析服务器发出请求,这时就能收到一个域名和IP地址对应关系,本地DNS服务器不仅要把IP地址返回给用户电脑,还要把这个对应关系保存在缓存中,以备下次别的用户查询时,可以直接返回结果,加快网络访问。


3、建立TCP连接

在HTTP工作开始之前,web浏览器首先要通过网络与web服务器建立连接,该连接是通过TCP来完成的。

PS1:为什么要先建立TCP呢?

因为HTTP是比TCP更高层次的应用层协议,根据规则,只有低层协议建立之后才能进行更高层次协议的连接,因此要先建立TCP连接,一般TCP连接的端口号是80

PS2:扩展知识点:

TCP连接的三次握手和断开的四次挥手 参照站内文章:TCP 三次握手和四次挥手


4、web浏览器向web服务器发送HTTP请求

建立了TCP连接之后,web浏览器就会向web服务器发起一个http请求。

一个典型的 http request header 一般需要包括请求的方法,例如 GET 或者 POST 等,不常用的还有 PUT 和 DELETE 、HEAD、OPTION以及 TRACE 方法,一般的浏览器只能发起 GET 或者 POST 请求。

客户端向服务器发起http请求的时候,会有一些请求信息,请求信息包含三个部分:

  • 请求方法URI协议/版本
  • 请求头(Request Header)
  • 请求正文:

下面是一个完整的HTTP请求例子:

GET/sample.jspHTTP/1.1
Accept:image/gif.image/jpeg,*/*
Accept-Language:zh-cn
Connection:Keep-Alive
Host:localhost
User-Agent:Mozila/4.0(compatible;MSIE5.01;Window NT5.0)
Accept-Encoding:gzip,deflate

username=jinqiao&password=1234

4.1、请求行

请求的第一行是“方法URL议/版本”:GET/sample.jsp HTTP/1.1

4.2、请求头(Request Header)

请求头包含许多有关的客户端环境和请求正文的有用信息。例如,请求头可以声明浏览器所用的语言,请求正文的长度等。

Accept:image/gif.image/jpeg.*/*
Accept-Language:zh-cn
Connection:Keep-Alive
Host:localhost
User-Agent:Mozila/4.0(compatible:MSIE5.01:Windows NT5.0)
Accept-Encoding:gzip,deflate.

4.3、请求正文

请求头和请求正文之间是一个空行,这个行非常重要,它表示请求头已经结束,接下来的是请求正文。请求正文中可以包含客户提交的查询字符串信息:

username=jinqiao&password=1234

5、服务器的永久重定向响应

服务器给浏览器响应一个301永久重定向响应,这样浏览器就会访问“http://www.google.com/” 而非“http://google.com/”。

为什么服务器一定要重定向而不是直接发送用户想看的网页内容呢?其中一个原因跟搜索引擎排名有关。如果一个页面有两个地址,就像http://www.yy.com/和http://yy.com/,搜索引擎会认为它们是两个网站,结果造成每个搜索链接都减少从而降低排名。而搜索引擎知道301永久重定向是什么意思,这样就会把访问带www的和不带www的地址归到同一个网站排名下。还有就是用不同的地址会造成缓存友好性变差,当一个页面有好几个名字时,它可能会在缓存里出现好几次。

重定向原因:

  • 1、网站调整(如改变网页目录结构);
  • 2、网页被移到一个新地址;
  • 3、网页扩展名改变(如应用需要把.php改成.Html或.shtml)。

这种情况下,如果不做重定向,则用户收藏夹或搜索引擎数据库中旧地址只能让访问客户得到一个404页面错误信息,访问流量白白丧失;再者某些注册了多个域名的网站,也需要通过重定向让访问这些域名的用户自动跳转到主站点等。


6、浏览器跟踪重定向地址

现在浏览器知道了 "http://www.google.com/"才是要访问的正确地址,所以它会发送另一个http请求。这里没有啥好说的


7、web服务器做出应答

经过前面的步骤,服务器收到了我们的请求,也处理我们的请求,到这一步,它会把它的处理结果返回,也就是返回一个HTPP响应。

HTTP响应与HTTP请求相似,HTTP响应也由3个部分构成,分别是:

  • 状态行
  • 响应头(Response Header)
  • 响应正文
HTTP/1.1 200 OK
Date: Sat, 31 Dec 2005 23:59:59 GMT
Content-Type: text/html;charset=ISO-8859-1
Content-Length: 122

<html>
<head>
<title>http</title>
</head>
<body>
<!-- body goes here -->
</body>
</html>

7.1、状态行:

状态行由协议版本、数字形式的状态代码、及相应的状态描述,各元素之间以空格分隔。

格式: HTTP-Version Status-Code Reason-Phrase CRLF

例如: HTTP/1.1 200 OK \r\n

-- 协议版本:是用http1.0还是其他版本

-- 状态描述:状态描述给出了关于状态代码的简短的文字描述。比如状态代码为200时的描述为 ok

-- 状态代码:状态代码由三位数字组成,第一个数字定义了响应的类别,且有五种可能取值。

状态代码具体协议定义如下:

1xx:信息性状态码,表示服务器已接收了客户端请求,客户端可继续发送请求。
100 Continue
101 Switching Protocols

2xx:成功状态码,表示服务器已成功接收到请求并进行处理。
200 OK 表示客户端请求成功
204 No Content 成功,但不返回任何实体的主体部分
206 Partial Content 成功执行了一个范围(Range)请求

3xx:重定向状态码,表示服务器要求客户端重定向。
301 Moved Permanently 永久性重定向,响应报文的Location首部应该有该资源的新URL
302 Found 临时性重定向,响应报文的Location首部给出的URL用来临时定位资源
303 See Other 请求的资源存在着另一个URI,客户端应使用GET方法定向获取请求的资源
304 Not Modified 服务器内容没有更新,可以直接读取浏览器缓存
307 Temporary Redirect 临时重定向。与302 Found含义一样。302禁止POST变换为GET,但实际使用时并不一定,307则更多浏览器可能会遵循这一标准,但也依赖于浏览器具体实现

4xx:客户端错误状态码,表示客户端的请求有非法内容。
400 Bad Request 表示客户端请求有语法错误,不能被服务器所理解
401 Unauthonzed 表示请求未经授权,该状态代码必须与 WWW-Authenticate 报头域一起使用
403 Forbidden 表示服务器收到请求,但是拒绝提供服务,通常会在响应正文中给出不提供服务的原因
404 Not Found 请求的资源不存在,例如,输入了错误的URL

5xx:服务器错误状态码,表示服务器未能正常处理客户端的请求而出现意外错误。
500 Internel Server Error 表示服务器发生不可预期的错误,导致无法完成客户端的请求
503 Service Unavailable 表示服务器当前不能够处理客户端的请求,在一段时间之后,服务器可能会恢复正常

7.2、响应头:

响应头部:由关键字/值对组成,每行一对,关键字和值用英文冒号":"分隔。

Date: Sat, 31 Dec 2005 23:59:59 GMT
Content-Type: text/html;charset=ISO-8859-1
Content-Length: 122

典型的响应头字段:

7.3、响应正文

包含着我们需要的一些具体信息,比如cookie,html,image,后端返回的请求数据等等。这里需要注意,响应正文和响应头之间有一行空格,表示响应头的信息到空格为止。


8、浏览器显示 HTML

在浏览器没有完整接受全部HTML文档时,它就已经开始显示这个页面了,浏览器是如何把页面呈现在屏幕上的呢?

不同浏览器可能解析的过程不太一样,这里我们只介绍webkit的渲染过程。下图对应的就是WebKit渲染的过程,这个过程包括:

解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树:


9、浏览器发送请求获取嵌入在 HTML 中的资源(如图片、音频、视频、CSS、JS等等)

其实这个步骤可以并列在步骤8中,在浏览器显示HTML时,它会注意到需要获取其他地址内容的标签。这时,浏览器会发送一个获取请求来重新获得这些文件。比如我要获取外图片,CSS,JS文件等,类似于下面的链接:

图片:http://static.ak.fbcdn.net/rsrc.php/z12E0/hash/8q2anwu7.gif

CSS式样表:http://static.ak.fbcdn.net/rsrc.php/z448Z/hash/2plh8s4n.css

JavaScript 文件:http://static.ak.fbcdn.net/rsrc.php/zEMOA/hash/c8yzb6ub.js

这些地址都要经历一个和HTML读取类似的过程。所以浏览器会在DNS中查找这些域名,发送请求,重定向等等...

不像动态页面,静态文件会允许浏览器对其进行缓存。有的文件可能会不需要与服务器通讯,而从缓存中直接读取,或者可以放到CDN中


10、web服务器关闭TCP连接

一般情况下,一旦web服务器向浏览器发送了请求数据后,它就要关闭TCP连接,然后如果浏览器或者服务器在其头信息加入这行代码:

connection:keep-alive

这样TCP连接将依然保持打开状态,浏览器可以继续通过相同的连接发送请求,保持连接,节省了为每个请求建立新连接所需要的的事件,同时节省了宽带

实际上,在HTTP 1.1 版本的新特性中有一点是:默认持久连接节省通信量,只要客户端、服务端任意一端没有明确断开TCP连接,可以发送多次HTTP请求。



版权说明:摘录到部分网络资源,如存在版权问题,请私信联系处理,谢谢!


关注头条号“编程家园”,后续陆续会有更多技术领域(包括并不限于Android进阶、Java进阶、Kotlin、网络、Flutter、Python等),以及架构、职业规划、职业思考等方面资料的免费分享,期待您的关注!