一个 URL 的自述

分享

苏醒

虽说现在是凌晨 3 点,但 breeze.red 所在的服务器却收到了一个请求:https://breeze.red 。伴随着警报响起,睡梦中的服务器冷不防打了个激灵。

“快告诉我,你的传输协议是什么?”

“咦?你是在问我吗?” 我回答道。

“这里只有你一个,难不成我问空气?哦这里空气是比较稀薄,你还好吧?” 服务器见我迷迷糊糊的样子问道。

“我是谁,我在哪里?” 刚睡醒的我有点失忆。

“你是一个 URL,这是我的地盘,刚被网卡送到这,都忘了吗?”

“哦,对,我是一个 URL 大概 10 毫秒前被浏览器创建,并送出,终于到你这啦,这是我的传输协议 HTTP 给你。” 在经历了一次长眠后,我想起了自己的使命,去服务器要一张网页。

“好,HTTP 服务,你过来下,这里有你的请求,快来领走。” 在得到我的传输协议后,服务器向 HTTP 服务喊道,语气显有点不耐烦,可能是因为我的短暂失忆让他有点生气了。

“赶紧的,起来干活了,这么早就有请求过来了,还让不让人休息了。” 服务器在 HTTP 服务没过来之前,又咕哝了一句。

我在一旁瑟瑟发抖,我已经记起了我的使命,只希望 HTTP 服务早点过来。过了不久,HTTP 服务走了过来。

“速度点,跟我过来!” HTTP 服务也没好气的说道。

使命

跟着 HTTP 服务来到了一个陌生的环境,里面高高挂着 80 443 8080 80004 个牌子。

“你端口号是多少?”

一摸口袋,竟然找不到端口号,心中一虚,吞吞吐吐道

“那个,我好像没有端口号。”

“没有就没有” 看到我吞吞吐吐的样子,HTTP 服务更不耐烦了,但手上的动作却没停,狠狠的拉了一下 80 的牌子,然后头也不回的走了。

“来了来了” 80 牌子的另一头响起一个略微耳熟的声音,不一会来了一个人。

虽说看起来有点陌生,但却看到了熟悉的身影,我赶忙过去打了声招呼。

“Hi JavaScript 你怎么也在这啊?”

“咦?你是谁,你怎么认识我?”

突然间,我想起这是服务器,它不可能是我认识的那个人。

“我认识一个长的很像你的人,生活在浏览器的那个?我刚从那边过来。”

“哦~ 那是我哥。我和他不熟。”

“emmm...”

“把查询参数给我,我需要处理一下。” 他看着我尴尬的样子说道。

我一摸口袋,又是啥也没有。只能说道:“我这没有。”

“不要紧张,没有就不用处理了,还能偷个懒。”

我松了口气。

“接下来,把需要请求的内容路径给我吧,我帮你去拿。”

我一摸口袋,有点发虚,说道:“我这也没有请求内容。”

“那就是 index.html,那个 文件读取小弟 过来一下,去读 index.html,然后把文件内容给我。” JavaScript 利落的说道。

“好嘞!稍等,马上好!” 一旁的小弟说道。

对于这一幕,我早已经见怪不怪了,他哥和他一样,总是使唤小弟干着干那的,自己就只负责处理小弟干好的活。趁着他小弟忙活的时候,问了一句:

“服务器的生活环境怎么样?”

“环境稳定,API 稳定,资源强大,关键我还能操作硬件,小弟那是说来就来,个个身怀绝技,简直是天堂。不像浏览器,真为我的哥哥们感到惋惜...”

“大哥,您要的数据已经准备好” 说话间,它的小弟带着一箱箱的数据跑了过来。

“好的,你退下吧”

“呐,这是你要的东西,就是下次别这么早了,身体要紧。我要去睡个回笼觉了,再见~” 熟人的态度就是不一样。

“哦,对了,那边有个传送门,进去你就回到你诞生的地方了。” JavaScript 补充道。

顺着提示,我走向了传送门,伴随着阵阵眩晕,我又一次的进入了休眠状态。

回归

浏览器一盆冷水把我泼醒。

“呀,你终于回来啦,快把页面给我,用户已经快等不及了。”

“你...” 脏话还没来得及出口,浏览器却一头扎进一旁的箱子里,对我不管不问了。

静静的呆在一旁,我知道我的使命已经结束,趁着页面还在,我也还在,介绍下我自己。

我是谁

我,URLUniform Resource Locator,统一资源定位符,打钱!

谦虚谦虚,我呢,仅仅是一个普普通通的字符串,是千千万万字符串中较为特殊的那一个,特殊在哪里,且由我细细道来。

首先,先介绍下我的组成,一个完整的我定义如下:

<protocol>://<token>@<host>:<port>/<path>?<query>#<hash>

emmmm...

看起来是有点晕?没关系,定义嘛,总归是高度概括的,先让我来解释解释定义中的内容

  • <> 包裹的内容是组成我的一部分,也就是我的各个口袋,口袋里装了具体的内容。
  • 其他内容为分隔符,用来分隔我的口袋。

ok 在知晓了规则后,说说每一部分组成

protocol

学名:协议内容

作用:服务器大哥会根据该信息,将我转给对应的应用层程序。这部分不可以没有,不然服务器大哥会很生气,把我给丢了。

token

学名:用户信息

作用:应用层会根据该信息,验证当我是不是个合法公民,不合法的话我可是很惨的,可能会会被记录,被加黑名单,但目前绝大部分的服务器是不会向我要这部分信息的,逍遥自在是我大部分的状态。当然如果没有 token 后面的 @ 符号也就不用了。

host

学名:主机名

作用:网络投递员会根据该信息把我投递到对应的服务器。

port

学名:端口号

作用:在找到应用层程序后,应用层程序会根据该信息叫来对应的处理程序来和我对接,当没有该信息时,那就是 80。不要问我为什么,要问就去问服务器。

path

学名:路径

作用:在和处理程序和我对接的过程中,会根据该字段获取相应的资源。

query

学名:查询参数

作用:处理程序会根据该信息,处理当前的请求。

hash

学名:锚点

作用:浏览器这哥们比较抠,我的这部分仅仅属于他,由于我是由他进行发送的,他把我的这部分给私藏了,在到达服务器时,我的 hash 的口袋里,啥东西也没有。

这就是我,在千千万万个字符串中比较帅的那一个。

销毁

不知不觉来到了 4 点,在我的旁边突然多了个我的同类,和满箱的包裹一起,由浏览器出发,我仔细一瞧,里面的数据竟然写着一个大大的标题 一个 URL 的自述,我的自述?哈哈~

但过了不久,他载着大大的 OK 回到浏览器,还没来的急为他庆祝,伴随着浏览器的关闭,我们两眼一黑,永远的消失了。

阅读更多

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