URL结构分析

时间:2015-2-4 作者:剧中人

小伙伴们可能很惊奇,小剧你个贰货为毛说URL这么简单的东西。

其实还是有缘由的。一年半之前(2013年7月)小剧在写nodejs后端路由时,初次研究URL的结构,就感觉URL并没有想象中的简单;紧接着写前端路由lofox时,开始尝试拆分组合URL,发现浏览器处理URL的规则是如此简洁而丰富;最近(2015年一月)又在写基于传统页面的单页组件iframer时,对search、hash等URL的细枝末节做过不少处理的,深感URL是一个设计精妙的玩意儿。目前也算是和URL友好相gao处ji 过相当长时间。

URL结构分析

URL由哪几部分组成?

URL全称为统一资源定位器(Uniform Resoure Locator),其在b/s架构中起着桥梁作用。如上图标示,一个完整的URL主要由protocol、hostname、port、pathname、search 、hash这六部分组成,下面小剧分别介绍这几个部分。

protocol

访问协议(也称之为方案):它告诉浏览器如何处理将要打开的文件。web站点中最常用的模式是超文本传输协议http,其次为https协议。在URL中(http://xxx.xx/xx)协议的分隔符为//,匹配值包含:

hostname

域名一般由英文字母和阿拉伯数字以及横"-"组成,最长可达67个字符(包括后缀),并且字母的大小写没有区别,每个层次最长不能超过22个字母。这些符号构成了域名的前缀,主体和后缀等几个部分,组合在一起构成一个完整的域名。当然,IP也可以充当domain的作用。

port

端口对应的是服务器当前应用正在监听的网络接口,浏览器默认值为80。分隔符为hostname后的:

pathname

路径名部分,用于指明资源位于服务器的位置(相对的)。类似于分层级的文件系统。

查询,通过提供参数缩小数据库的检索范围,在url中search以?开始,每对参数以&分割,参数的键值分隔符为=,如?act=del&id=21

hash

hash作为锚点,用来标记文档内的位置,此段标记仅体现在浏览器上,http请求会忽略此段内容,修改hash不会触发页面的跳转刷新。也由于其特性,目前越来越多的用在单页组件中。

页面中的URL可以怎么简写?

浏览器允许资源的引用以一定方式简写,根据地址和基础地址计算出最终引用的URL。HTML与JS是以当前页面为基础地址,CSS则是以CSS文件为基础地址。

设定当前访问的地址为http://bh-lay.com/opus/index.html,链接到的完整地址为http://bh-lay.com/topic/aboutme/index.html可简写的方式就会有下面几种。

省略协议:使用和基础地址同样的协议,可不具体指定协议名//bh-lay.com/topic/aboutme/index.html

省略域名(含端口): 若相对于站点目录,地址以/开头即可,/topic/aboutme/index.html

省略路径:一般情况下,css内对图片的引用会图片与css的相对路径来书写,对应到这个例子则为../topic/aboutme/index.html

同源策略指的是什么?

前端小伙伴们或多或少都会碰到跨域的问题。其实跨域问题的存在就是因为浏览器的同源策略。同源策略是对Javascript代码能够操作哪些WEB内容的一条完整安全限制。

这里的同源指的是:同协议,同域名和同端口。

URL有哪些常用操作?

页面URL的获取和修改,全部囊括在全局的location中,但是和cookie一样,location下的方法都是封装程度不高的低级接口,项目中常会针对search进行封装。

当然,在js介入路径计算的时候还会有相对路径转换为绝对路径、search二级属性等方法,这里就不展开介绍了。

常用的解析search参数

function searchParser(){
    var searchStr = location.search.replace(/^\?/,''),
       resultObj = {};
    if(searchStr && searchStr.length > 1){
        var items = searchStr.split('&');
        for(var index = 0 ; index < items.length ; index++ ){
            if(! items[index]){
                continue;
            }
            var kv = items[index].split('=');
            resultObj[kv[0]] = typeof kv[1] === "undefined" ? "":kv[1];
        }
    }
    return resultObj;
}

PS:本文侧重于对http、https协议下的URl进行介绍,其他协议有更为丰富的路径规则,限于篇幅和经验,小剧不便展开。

PPS:本文的产生是基于下面三个项目的经验,有兴趣的话可以赏个光读一读。