从图片上传讲到HTTP

HTTP 每次学的时候都感觉有些痛苦,不是痛苦记不住,是感觉零零星星的,看着看着就不知道自己看的是啥了。其实都是只看到管中窥豹,没有一个全局的思想,下面就通过一个简单的显示网络上的图片展开讲一下 HTTP。给你打开一个 HTTP 的大门。

有关于 HTTP 的详细使用文档。可以在这里 点击查看,如果没有 HTTP 基础的朋友或是有些迷糊的同学,建议先通过这个小例子,大概了解一下 HTTP,然后再去仔细的看每一个点。

通过网络获取一张图片

图片缩略图

这是一张我的壁纸的缩略图,它的网址为:http://wx1.sinaimg.cn/mw690/986bd8b7gy1fuvkez49nkj211s0lchdt.jpg。

从 URL 出发

我们都知道,在浏览器地址栏中输入这个网址然后回车会得到一张图片,那么它是怎么显示出来的呢?

首先,我们把 URL 进行拆分一下,具体得到三个部分:

  1. http:
  2. wx1.sinaimg.cn
  3. /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 个,常用的只有那么几个,如果想了解更多点击这里

  1. GET:用于请求指定的页面信息,不发送 body;
  2. POST:用于新增或修改服务器资源,内容写在 body 中。
  3. PUT:用于修改服务器资源,内容放在 body 中。具有幂等性,即:一次和多次请求某一个资源服务器处理后的结果应为同样的。
  4. DELETE:用于删除服务器资源,不发送 body。
  5. 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

小结

  • 客户端做了哪些事
    1. 浏览器将输入的图片 URL 解析为请求行;
    2. 客户端自定义构建请求头(HEAD);
    3. 组装数据向目标服务器发送请求;
  • 服务器端做了哪些事
    1. 根据服务器处理结果构建响应(Response)响应头;
    2. 根据响应具体消息构建响应头(HEAD);
    3. 组装数据给客户端响应信息;

仔细看,请求与响应他们都离不开一个他们都共有的东西,就是头部信息(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 可以用在断电续传、多线程下载。

Rang示例

Accept-Charset

Accept-Charset: utf-8

表示客户端能接受的数据字符编码格式。

总结

通过这一个简单的获取网络上图片的例子,相信你也了解了一部分关于 HTTP的内容,趁着这个劲头再去详细看一下开头提到那个 HTTP 的详细使用文档吧。

下面这个图,只是我自己画的一个简版的关于 HTTP 的思维导图,你也可以试试。

HTTP总结

本文题图:Photo by Caspar Camille Rubin on Unsplash