HTTP 每次学的时候都感觉有些痛苦,不是痛苦记不住,是感觉零零星星的,看着看着就不知道自己看的是啥了。其实都是只看到管中窥豹,没有一个全局的思想,下面就通过一个简单的显示网络上的图片展开讲一下 HTTP。给你打开一个 HTTP 的大门。
有关于 HTTP 的详细使用文档。可以在这里点击查看,如果没有 HTTP 基础的朋友或是有些迷糊的同学,建议先通过这个小例子,大概了解一下 HTTP,然后再去仔细的看每一个点。
通过网络获取一张图片
这是一张我的壁纸的缩略图,它的网址为:http://wx1.sinaimg.cn/mw690/986bd8b7gy1fuvkez49nkj211s0lchdt.jpg。
从 URL 出发
我们都知道,在浏览器地址栏中输入这个网址然后回车会得到一张图片,那么它是怎么显示出来的呢?
首先,我们把 URL 进行拆分一下,具体得到三个部分:
http:
wx1.sinaimg.cn
/mw690/986bd8b7gy1fuvkez49nkj211s0lchdt.jpg
这三个部分,分别对应的是我的壁纸的 URL 中的协议类型、服务器地址、具体路径。具体什么意思呢?
简单来说就是浏览器会向 wx1.sinaimg.cn 发送一个 Http 请求类型的请求,用于获取 /mw690/986bd8b7gy1fuvkez49nkj211s0lchdt.jpg 这个路径的文件。
说了简单的,再来看看复杂版的。
GET /mw690/986bd8b7gy1fuvkez49nkj211s0lchdt.jpg HTTP/1.1
Host: wx1.sinaimg.cn
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36
这个就是稍微复杂版的样子,实际的内容不止这些,我删去了部分内容。全部内容就是一个网络请求 Request 。这个 Request 就是浏览器通过在我们地址栏输入的内容以及它(浏览器)协助我们增加的部分内容之后构建出来的。如果是客户端开发者,在与后台开发人员确定了 URL 及具体的请求参数等信息后,是需要自己通过各种框架或是自己写来构建一个请求的。解释一下,第一行GET /mw690/986bd8b7gy1fuvkez49nkj211s0lchdt.jpg HTTP/1.1
为请求行,其中包括请求方法,请求资源的路径,Http 版本,其他部分为请求头也叫 Request HEAD。
请求行
请求行内容较少,就三种类型,分别对应请求方法,请求资源的路径,Http 版本,先看请求资源。
请求资源就是你所请求的目标服务器上的文件路径,就这么简单,再来看看 Http 版本,上面的请求行中表明了使用的是 Http 1.1 版本,也是目前使用较多的版本,Http 2.0 已经出来了,但还未大规模应用。
重点来了,请求方法,请求方法一共有 8 个,常用的只有那么几个,如果想了解更多点击这里。
GET:用于请求指定的页面信息,不发送 body;
POST:用于新增或修改服务器资源,内容写在 body 中。
PUT:用于修改服务器资源,内容放在 body 中。具有幂等性,即:一次和多次请求某一个资源服务器处理后的结果应为同样的。
DELETE:用于删除服务器资源,不发送 body。
HEAD:和 GET 请求使用方法相同,但服务器返回的响应报文中不包含 body。
讲到这里,我们算是把请求发送到服务器了,紧接着服务器接收到请求该处理了。
HTTP/1.1 200 OK
Date: Sun, 02 Sep 2018 15:29:53 GMT
Content-Type: image/jpeg
Content-Length: 110989
Cache-Control: max-age=7776000
状态行
上面就是服务器收到我们的请求后,给出的响应结果(Response)。以上就是服务器响应结果的一部分内容。与请求类似,响应也有一个叫做状态行的东西,就是第一行HTTP/1.1 200 Ok
,其中,HTTP/1.1
表示的 HTTP 的版本,200 表示的响应的状态码,Ok 为状态码对应的状态信息。不过 200 只是针对之前请求图片的结果为 成功,还有其他的状态码。下面列出几个,想了解更多点击这里。
-
1××,临时性消息。
100:目前为止一起正常,客户端可以继续请求;
101:同意客户端发来的切换到 HTTP2.0 的请求;
-
2××,成功。
200: ok
201: 成功创建
202: 该请求已被接受处理,但处理尚未完成。
-
3××,重定向
301: 永久性移动;
302: 暂时性移动;
304: 内容未修改;
-
4××,客户端错误。
400: 错误的请求,服务器不会处理。
401: 没认证或认证失败
403: 服务器拒绝处理;
404: 服务器找不到对应的资源信息;
-
5××,服务器错误。
500: 服务器内部错误;
501: 服务器要么不识别请求方法,要么无法满足请求。
这里的响应结果,是有 Body 的,Body 就是文章开头的那张图片,就不展示了,没有 Body 的响应也是有的,上面也讲了,就是当请求方法为HEAD
的时候是不会有响应 Body 的,只有响应HEAD
。
小结
-
客户端做了哪些事
浏览器将输入的图片 URL 解析为请求行;
客户端自定义构建请求头(HEAD);
组装数据向目标服务器发送请求;
-
服务器端做了哪些事
根据服务器处理结果构建响应(Response)响应头;
根据响应具体消息构建响应头(HEAD);
组装数据给客户端响应信息;
HEAD
仔细看,请求与响应他们都离不开一个他们都共有的东西,就是头部信息(HEAD)请求有请求头部,响应有响应头部,虽然内部不一定相同,但他们都是对 Body 或者说具体的请求内容的一种描述信息。怎么描述?比如,我的那张壁纸,在响应信息里Content-Type: image/jpeg
这个就表示,Body 内容为图片,Content-Length: 110989
这个就表示为内容长度为 110989 字节,即为 109 k。HEAD 的信息存储格式为 <key>: <Value>
的形式。下面就介绍一些常用的HEAD。
Content-Type
Content-Type: text/html;
image/jpeg 表示为 Body 为图片类型;
text/html 表示 Body 为 Html 文本类型;
x-www-form-urlencoded 表示 Body 纯文本表单提交类型
multitype/form-data 表示非纯文本(内容包含文件或其他非字符串形式的内容)表单提交类型。
-
application/json 表示 json 格式的二进制类型
- application 表示任意类型的二进制数据,json 则指定了具体的数据类型,类似的还有 application/pdf 表示 pdf 格式的二进制类型;
Location
Location: https://www.google.com/
在遇到 3×× 的请求状态码(重定向)时会遇到这个,它表示的内容为目标 URL。
Host
Host: wx1.sinaimg.cn
表示,目标服务器主机,常见的为 Host: wx1.sinaimg.cn
并且后面是可以加端口号的。
Transfer-Encoding
Transfer-Encoding: chunked
用于表示在网络传输中具体用了什么样的形式进行分块传输。与 Content-Length 不同时存在。如果它有几种类型,常用的有 chunked gzip。其中 chunked 用于分段传输内容,gzip 用于将数据压缩后进行传输。
Range
Range: bytes=0-5000
用于获取指定部分内容,如果使用上面的 HEAD 作为图片请求的一部分 HEAD 的话,我可以单独获取 0 到 5000 位置的字节信息,下面这张图就是加上这个 HEAD 之后的响应结果。Range 可以用在断电续传、多线程下载。
Accept-Charset
Accept-Charset: utf-8
表示客户端能接受的数据字符编码格式。
总结
通过这一个简单的获取网络上图片的例子,相信你也了解了一部分关于 HTTP 的内容,趁着这个劲头再去详细看一下开头提到那个 HTTP 的详细使用文档吧。
下面这个图,只是我自己画的一个简版的关于 HTTP 的思维导图,你也可以试试。