HTTP 的手术室

分享

来客

时间定格在早上 6 点,伴随着 “哒哒哒” 的声响,浏览器地址栏出现了 https://breeze.red 浏览器知道,又是一个早高峰来袭。

“各部门就绪!” 浏览器老大,一声令下,各部门都开始做起了准备工作。

“去 HTTP 服务部,记住你的请求方式是 GET,还有这些请求头也一起拿走。” 伴随着 Enter 的输入,浏览器老大对新生成的 URL 说道。

“浏览器老大让我来找你!” URL 飞奔到我的办公室说道。

“好,请求方式?” 我一看时间,早上 6 点,知道早高峰即将来临,赶忙说道。

GET

“请求头有吗?”

“有!URL 拿出一个袋子说道。”

OK” 说着,我拿起放在一旁的麻醉针,一针下去,URL 进入了休眠。没错我的办公室就是我的手术室。

拿起一旁的手术刀,手起刀落,取出 URL<path>?<query> 部分,拿起一个袋子,扔入 GET 字符,取出的部分以及我记录的版本号 HTTP/1.1,胶带一卷,打包放在一旁。

“请求行 OK,接下来是请求头。” 我自言自语道,顺手拿起了 URL 带过来的袋子。

“让我检查检查。嗯,AcceptCookieUser-Agent...,然后加上 Host。” 我一边检查,一边再次拿出手术刀,把 URLHOST 部分切下,放入袋中。

OK” 确认无误后,打包,放到了刚刚打包好的请求行下面。

GET 没有请求体,直接生成报文。” 按照流程,我将打包好的请求行与请求头一并丢入了办公室一旁的通道中。

“接下来就交给 TCP 兄弟啦。” 我对着通道喊道。

duang ~” 通道一头发出物体碰撞的声音 “能不能事先通知下,我的脑袋禁不起你这么砸!” 通道另一侧来了句抱怨。

“下次一定注意,现在早高峰,急了点!”

回归

duang ~ ” 头上被撞了个大包,我愤怒的喊道:“TCP 你干嘛!!”

“早高峰,早高峰 ~” 通道的另一头传来了 TCP 略带报复的声音。“这是刚刚请求的响应,快处理吧!”

“行!” 我拿起了手术刀,将刚刚的 URL 进行了拼装,顺便把响应报文给大切八块。

伴随着一盆冷水泼下,URL 苏醒过来。

“这袋响应头信息,我已经按照键值对弄好了,这堆是响应体,我这处理不了,你就这样带走吧。” 对着刚刚苏醒的 URL 说道。

“能不能不是每次都泼水啊,我的发型!” URL 抱怨道。

“别啰嗦了,快去浏览器老大那!浏览器老大都快等不及了。”

“行吧!” 浏览器老大着急的样子他可是知道的,带着东西,URL 赶忙往浏览器那儿跑去。

开始忙碌

“我回来了,这是数据。” URL 跑的有点喘不过气来。

浏览器理都没理 URL,一头钻进了 URL 一旁的响应体中。

“文档解析器给我上,CSS 你也别闲着啊,没看到这有 style 吗?JavaScript 你也赶紧的动起来。” 浏览器老大指挥道。

“这有个 link 需要 CSS 资源!” 文档解析器说道。“这还有个 script 使用的是外部脚本,需要 xxx.js。”

“好的,我马上生成 URL 去请求资源。” 浏览器老大边说,边生成了一系列的 URL,命令他们去 HTTP 服务部。

看着蜂拥而至的 URL,我攥了攥手中的工具,知道,早高峰来了。

不久,HTTP 服务部排起了长队。一批批的 URL 来,又有一批批的 URL 带着包裹出去。

终于浏览器老大叫来了 GPU 显示了页面,忙碌的早高峰过去了。我拿起一旁还冒着热气的咖啡,喝了一口。

Post URL

JavaScript 让我到你这!” 一个 URL 跑了过来。不同与之前的 URL 这个 URL 除了带着一袋请求头,还带了一箱数据。

放下手中的咖啡,“请求方式?” 我问道。

POSTURL 说道。

“看来用户开始提交数据了啊。” 说着,我拿起了放在一旁的麻醉针。

“请求行:POST /create HTTP/1.1 没毛病。”

“请求头” 我拿起 URL 带过来的请求头,检查一遍后,加入了 Host 并打包。

“这些数据我控制不了,直接塞到请求体中吧。” 我把数据按请求行,请求头,请求体放好,打包后,扔进了一旁的通道里。再次端起了桌子上的咖啡喝了一口。

过了大约 5 秒,通道蹦出来一个报文,我知道这是刚刚的那个 Post URL,拿起我的工具,拆解了数据后,让 URL 回到 JavaScript 那。

我是谁

忙碌的早高峰终于过去,悠闲的时间开始,正式介绍下我自己,我,HTTP 服务,根据 HTTP(超文本传输协议)生成报文,报文也就是刚刚被我扔进通道的东西。

超文本传输协议将报文分成了 3 部分,根据报文的不同,格式也有所区别,也是我这间手术室存在的意义。

请求

内容 含义
请求行 请求方式 + 请求路径 + 协议版本。
请求头 代表浏览器信息以及当前请求的状态,比如 HostAcceptUser-Agent 等。
请求体 当前请求所携带的数据,提供给服务器上对应的处理程序使用。

大概就长这样吧。

请求报文

响应

内容 含义
响应行 协议版本 + 状态码 + 状态码解释短语
响应头 代表服务器信息以及当前响应的状态,比如 DateETagServer 等。
响应体 当前响应所携带的数据,提供给浏览器上的处理程序使用。

大概就长这样吧。

响应报文

请求方式

不同的请求方式代表了对资源不同的处理,虽然这个是 URL 直接给我的,但所代表的具体意义我还是知道的。

请求方式 含义
GET 返回请求路径所对应的资源。
HEAD 不需要返回资源,仅返回响应行和响应头即可。
POST 向请求路径提交数据,创建新的资源。
PUT 更新请求路径所对应的资源。
PATCH 更新请求路径所对应的部分资源。
DELETE 删除请求路径所对应的资源。
OPTIONS 获取请求路径对应资源的信息(是否可可跨域获取,可以支持哪些请求方式等)。
TRACE 直接返回请求,主要用于测试。

状态码

不同的响应状态码,对应了不同的资源状态。

状态码 含义
1** 服务器收到请求,需要请求者继续执行操作。
2** 请求成功。
3** 资源移动或是未发生变更,需要浏览器进行下一步操作,请求移动后的地址,或直接使用缓存资源。
4** 请求错误,包括请求语法错误,或是资源不存在。
5** 服务器错误,资源存在,但服务器处理时发生错误。

OK HTTP 大致内容也就这些,只是一个协议嘛,不是太复杂。

“还没介绍响应头、请求头啊!” 办公室里突然出现一个声音。

“等用到的时候说也来得及。” 我想也没想的回了,看着空荡荡的手术室,阴风吹过,顿时惊出一身冷汗。

“room 屠宰场。” 声音再次出现:“我是要成为海贼王的男人。”

“见鬼了??” 我有点慌张。“听着声音好像来着屏幕外?奇怪”

阅读更多

JavaScript 对象 & 原型

前言 这次的 why what or how 主题:JavaScript 对象 & 原型。 此类文章在百度上一搜一大把,其实不用再写了,但是本着把这个问题解释的清清楚楚明明白白,还是开始写了。 原因如下: 1. 面试宝典类文章,弄张图片一糊弄,让人觉得自己理解了。 2. 解释类文章,告诉你一堆语法,对语法一顿解释,告诉你就是这样的,还是没说清楚。 3. 很少有文章单独解释这个点!但这个点是基础!真的很重要! 所以本篇文章想说一说对象 & 原型,但为了确保能顺利理解,请先看完 JS 变量存储?栈 & 堆?NONONO!,因为该篇文章从变量存储的角度来解释 JavaScript 对象 & 原型,请确保看完,在看这篇文章。 什么是对象? 既然要说清楚,

By Breeze

浏览器下的 Event Loop

前言 javascript 是以单线程的形式运行在宿主环境下,javascript 采用了回调的形式来解决异步任务。 为什么是单线程? javascript 的最开始的出现是为了给 web 页面增添一些动态的效果,那么就避免不了获取页面上的元素信息,如果 javascript 是以多线程的形式运行在浏览器内,如果两个线程内的 javascript 同时去获取/修改,某个页面上的元素,那么浏览器该让哪个 javascript 线程拥有获取/修改该元素的权限呢?由于元素的信息会经常性的发生变化,那么又改如何去同步各个线程内所保存的元素信息呢? 所以综合以上问题, javascript 是单线程的原因就显示意见了,单线程在执行时,对于元素信息的引用在同一时间仅可能只有一个,那么以上所有的问题都不存在了。 什么是异步任务? 任何代码在执行时,都会碰到一些需要经过大量时间运算或是等待的代码,在浏览器的环境下,常见的就是 http 任务,比如:资源的加载(图片的 onload 事件),ajax 的请求(XMLHttpRequest 的 onLoad 事件)还有页面元素的点击事件以及

By Breeze

node 下的 Event Loop

前言 通过 浏览器下的 Event Loop ,可以得知 javascript 是一门事件驱动的语言, javascript 主线程通过不断的调用事件队列中的事件来完成异步任务。那么 Node 下是否也是如此? Node 下的事件队列 在 Node 官网有这样一篇文章:The Node.js Event Loop, Timers, and process.nextTick() 。 该文章主要讲述了 Node 中是如何处理以及实现 Node 下的 Event Loop。 主要包含以下内容: 事件队列 不同于浏览器,Node 下的有 6 个事件处理阶段,其执行顺序和队列名称如下: ┌───────────────────────────┐ ┌─>│ timers │ │ └─────────────┬─────────────┘ │ ┌─────────────┴─────────────┐ │ │ pending callbacks │ │ └─────────────┬─────────────┘ │

By Breeze

什么是 HTML 5?

前言 作为程序员,技术的落实与巩固是必要的,因此想到写个系列,名为 why what or how 每篇文章试图解释清楚一个问题。 这次的 why what or how 主题:现在几乎所有人都知道了 HTML5 ,那么 H5 到底相比于 HTML4 有什么区别呢? 升级版?标准版! HTML5 做为 HTML 标准的第 5 版,于 2014 年发布,相信关注过 HTML5 的发展史的朋友都知道该版本是 WHATWG 和 W3C 握手言和后诞生的,是 W3C 组织与浏览器厂商相互妥协的结果,其中的绝大部分规范都由 WHATWG 组织所制定,之后由 W3C 采纳并入标准中。

By Breeze