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

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

Range 示例

Accept-Charset

Accept-Charset: utf-8

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

总结

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

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


HTTP总结
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,839评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,543评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,116评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,371评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,384评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,111评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,416评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,053评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,558评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,756评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,324评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2 345

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,600评论 18 139
  • 前端开发者丨http请求 https:www.rokub.com 前言见解有限, 如有描述不当之处, 请帮忙指出,...
    麋鹿_720a阅读 10,889评论 11 31
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,423评论 1 45
  • 当 app 和服务器进行通信的时候,大多数情况下,都是采用 HTTP 协议。HTTP 最初是为 web 浏览器而定...
    Flysss1219阅读 1,254评论 0 4
  • 我知道 总有一天我会变成你 无论我们是否联系 见或不见 这都不重要 只是你已经在我的体内留下烙印 我会循着它 从微...
    春下二虫阅读 166评论 0 0