上一篇: Vue知识点整理下一篇: 常见的跨域解决方案

http请求


一、认识http请求

1.定义:

超文本传输协议(Hyper Text Transfer Protocol)是用于传输诸如HTML的超媒体文档的应用层协议。它被设计用于Web浏览器和Web服务器之间的通信。 HTTP遵循经典的客户端-服务端模型,客户端打开一个连接以发出请求,然后等待它收到服务器端响应。

2.特点:

(1)http是无状态传输协议,这也就意味着在一次http请求完成之后,再次发送http请求,服务器不会认得当前请求是否来自于之前的客户端;

(2)http位于osi模型的应用层,是建立于tcp/ip协议之上的网络传输协议,通过tcp三次握手建立连接,四次挥手断开连接.

二、http报文

http请求发送以后,在控制台或者命令行工具里能看到请求报文和响应报文.

1.请求报文

请求报文分为四部分:请求行,请求头,空行,请求数据.

请求行:请求方法 + 路径 + http协议版本号;

请求头:其包含的内容主要是对携带过去的数据的描述,定义可接受的数据类型的描述,以及与缓存相关的字段.默认携带的请求头有,Host(主机名),Content-Type(携带的数据类型),Content-Length(内容长度),Accept(可接受的内容类型),此外,还可以添加额外的请求头;

空行:不做解释,即空行;

请求数据:post请求中携带的数据原封不动的传递过去.

注意:此处的报文是通过curl命令请求得到

#----请求报文----
# curl命令发送一个post请求
curl --trace-ascii /dev/stdout \
    -d '{"username":"xyz","password":"xyz"}'\
    http://mikixing.com
# 得到的请求报文
POST / HTTP/1.1    #请求行
Host: mikixing.com  #请求头,表示主机名
Accept: */*  #请求头,表示可接受的数据类型
Content-Length: 35  #请求头,表示携带内容的长度
Content-Type: application/x-www-form-urlencoded   #请求头,表示携带过去的数据格式
#----此处为空行----
{"username":"xyz","password":"xyz"}  #请求数据



# step1:telnet连接远程主机:telnet + ip + 端口号
telnet 127.0.0.1 80
# 得到连接建立的提示后,进行step2
# step2: 发送http请求
GET / HTTP/1.1     #注意:方法和协议必须大写,否则将报错
HOST: mikixing.com  #请求头不区分大小写,因此此处主机名用小写也可以
#step3:
2.响应报文

响应报文和请求报文一样,分为四部分:状态行、消息报头、空行和响应正文.

状态行: http版本号 + 响应码 + 响应码的描述;

消息报头:主要包含对返回的数据的描述,如果涉及到跨域,还会返回跨域相关的字段.默认情况返回的字段,Content-Type(返回内容的类型),Content-Length(返回内容的长度)等;

空行:不做解释,即空行;

响应正文:服务器端返回的数据.

上文中的请求得到的响应报文:

# 得到的响应报文
HTTP/1.1 200 OK  #状态行
Content-Type: text/html #响应头,表示返回的数据类型
Content-Length: 174  #响应头,表示返回的数据长度
Connection: keep-alive  #响应头,保持tcp连接在一定的时间内不断开
#----此处为空行----
#响应正文...
3.与缓存相关的报文

Expires策略: Expires 是HTTP 1.0的东西,现在默认浏览器均默认使用HTTP 1.1,所以它的作用基本忽略.

Cache-Control(important):

Cache-Control与Expires的作用一致,都是指明当前资源的有效期,控制浏览器是否直接从浏览器缓存取数据还是重新发请求到服务器取数据.只不过Cache-Control的选择更多,设置更细致,如果同时设置的话,其优先级高于Expires.它的值有:

用法 描述
max-age=xxx 缓存资源将在xxx秒后过期
no-cache 不是不缓存,而是这个缓存需要在服务器验证才可以使用,本地和代理服务器都可以缓存.注意区别于no-store
no-store 彻底禁用缓存,每次都需要从服务器获取
private 客户端可以缓存,默认为private
public 客户端和代理服务器都可缓存

Etag,if-None-Match的优先级高于Last-Modified,if-Modified-Since

Etag:服务器响应时,告诉浏览器当前资源在服务器的唯一标识.

if-None-Match:

再次请求服务器时,通过此字段通知服务器客户端缓存数据的唯一标识.服务器收到if-None-Match后,与被请求资源的唯一标识进行比对,如果标识不一致,则返回响应码200,且返回响应体,否则,返回304,且不返回响应体.

Last-Modified:服务器在响应是告诉浏览器资源的最后修改时间.

if-Modified-Since:再次请求服务器时,通过此字段通知服务器上次请求时,服务器返回的资源的最后修改时间.服务器收到if-Modified-Since后,与被请求的资源时间进行对比,如果资源的最后修改时间大于if-Modified-Since,说明资源被改动过,则响应码返回200,且返回响应体,否则,服务器返回304,且不返回响应体.

三、浏览器缓存策略

阅读本部分之前,请先认真阅读第二部分中与缓存相关的字段

http缓存分为强缓存和弱缓存(协商缓存).默认情况下,浏览器会对不同的资源做不一样的缓存设置,chrome默认对图片资源做强缓存,对js,css做弱缓存.

假设,浏览器向服务器发起一个请求,第一次请求是这样的:

浏览器第一次请求

因为浏览器是第一次向服务器请求这个资源,所以,本地没有相关的缓存,服务器响应之后,如果服务器做了相关的缓存设置,那么,在浏览器第二次请求这个资源时,就会有相应的影响.以下是浏览器第二次请求这个资源时的流程图:

http不是第一次请求

总结:

(1)对于强缓存,服务器通知浏览器一个缓存时间,在缓存时间内,下次请求,直接用缓存,不在时间内,执行弱缓存策略.

(2)对于弱缓存,将缓存信息中的Etag和Last-Modified通过请求发送给服务器,由服务器校验,返回304状态码时,浏览器直接使用缓存.

301,302,304的区别

301和302主要是影响搜索引擎抓取资源时的权重,301永久重定向,302临时重定向,304则是利用本地缓存.

上一篇: Vue知识点整理下一篇: 常见的跨域解决方案