Javascript URI 解析介绍_javascript技巧

解析URI是一个有意思的东西,之前没有意识到,原来这东西也可以这么复杂。

URI

在维基百科中对于URI的解释是这样子的:

复制代码 代码如下:

 在计算机术语中,统一资源标识符(Uniform Resource Identifier,或URI)是一个用于标识某一互联网资源名称的字符串。 该种标识允许用户对网络中(一般指万维网)的资源通过特定的协议进行交互操作。URI由包括确定语法和相关协议的方案所定义。

引自网络上对于URI组成的解释,而这些可以在稍后对于URI的解析中看出来。

URI一般由三部分组成:

1.访问资源的命名机制。
2.存放资源的主机名。
3.资源自身的名称,由路径表示。

或者可以说是这样子,两者看上去是一致的。

URL的格式由下列三部分组成:

1.协议(或称为服务方式)
2.存有该资源的主机IP地址(有时也包括端口号)
3.主机资源的具体地址。,如目录和文件名等

URI解析

复制代码 代码如下:

 “解析”一个URI意味着将一个相对URI引用转换为绝对形式,或者通过尝试获取一个可解引URI或一个URI引用所代表的资源来解引用这个URI。文档处理软件的“解析”部分通常同时提供这两种功能。

Javascript URI解析

简单地以博客中的搜索JS为例,下面就是其的URL,

http://www.jb51.net/search/?q=js&type=
然后便有了

复制代码 代码如下:

 var parser = document.createElement('a');
 parser.href = "http://www.jb51.net/search/?q=js&type="

我们便可以知道其的协议、端口号、主机、具体地址等

复制代码 代码如下:

 parser.protocol;
 parser.host;
 parser.pathname;
 parser.search;

返回的结果便是

复制代码 代码如下:

 protocol:http
 host:www.jb51.net
 pathname:/search/
 search:?q=js&type=

上面的结果加出来,便是一个完整的URI。只是对于parser.search这部分不是很理解,对于?号而言,应该是参数,用于搜索的参数。

如果是对就于一个邮件的URI来说,假设URI是

复制代码 代码如下:

 mailto:h@jb51.net?subject=hello
 

那么

复制代码 代码如下:

 var parser = document.createElement('a');
 parser.href = "mailto:h@jb51.net?subject=hello";

 > parser.protocol
 "mailto:"
 > parser.pathname
 "h@jb51.net"
 > parser.search
 "?subject=hello"
 

时间: 2024-10-26 13:46:59

Javascript URI 解析介绍_javascript技巧的相关文章

常用的JavaScript模板引擎介绍_javascript技巧

最近工作内容慢慢接近我的理想化(web前端),所以关注比较多的是前端性能!后台同事介绍使用ajax模板引擎,提高渲染速度! 下面介绍几款 JavaScript 模板引擎 1. Mustache 基于javascript 实现的模板引擎,类似于 Microsoft's jQuery template plugin,但更简单易用! 2. doT.js doT.js 包含为浏览器和Node.js 准备的 JavaScript 模板引擎. 3. jSmart jSmart 是著名的 PHP 模板引擎 S

JavaScript 命名空间 使用介绍_javascript技巧

使用过Java.C#的同学对命名空间非常的熟悉,在复杂的系统中会有N多的函数.对象,语言提供的.架构预定义的,这么多的函数和对象,由于编程规范要求起有实际意义的名字,难免会重名发生错误调用,而有了命名空间烦恼就没有了,不但可以分类组织函数与对象,还可以形成隔离,解决重名问题. 使用JavaScript就没有这么舒服了,Javascript只有函数作用域,什么块儿啊.神马文件啊统统都认为是一个命名空间的,有时候因为一些重名问题导致的错误让人莫名其妙,难以调试解决. 一个简单的例子 复制代码 代码如

javascript 事件处理程序介绍_javascript技巧

1.DOM0级事件处理程序 将一个函数值给一个事件处理程序属性. 例如: 复制代码 代码如下: var btn = document.getElementById("myBtn"); btn.onclick = funtion(){ alert(this.id); //"myBtn" } 删除事件,btn.onclick = null; -----------------------------------------------------------------

开源的javascript项目Kissy介绍_javascript技巧

kissy简介 kISSY是什么? KISSY是一个开源的javascript项目,其主体是一个前端UI开发框架,即KissyUI.本文所述的kissy是仅指其内核部分的kissy.js中的语言与框架设计思想.KISSY项目的开源网站是:http://kissyteam.github.com/ kissy怎么使用呢? 尽管在KissyUI向kissy内核化的过程中,我们提出了一些新的概念与框架模型,但事实上,我们并未改变KissyUI的任何使用惯例.从代码上来看,kissy.js和lang.js

javascript设计模式 接口介绍_javascript技巧

这本书中第一个重要的内容就是接口. 大家对接口应该都不陌生,简单的说接口就是一个契约或者规范.在强类型的面相对象语言中,接口可以很容易的实现.但是在javascript中并没有原生的创建或者实现接口的方式,或者判定一个类型是否实现了某个接口,我们只能利用js的灵活性的特点,模拟接口. 在javascript中实现接口有三种方式:注释描述.属性验证.鸭子模型. note:因为我看的是英文书,翻译水平有限,不知道有些词汇如何翻译,大家只能领会精神了. 1. 注释描述 (Describing Inte

JavaScript模板入门介绍_javascript技巧

比如要在一个列表中利用ajax插入一个li的时候,我会直接把数据跟html标签拼接成一句完整的html,然后插入到ul中.无论数据是从服务器端拿回的,或者是从用户的input输入中拿到的--无论哪种方法都是一样. 这个拼接过程放在JavaScript文件中,显得非常不优雅.如果还把style也放在JavaScript中,那数据.结构还有样式整个就是一锅粥了,要维护这样的代码会让人想自杀.最过分的就是把页面上最终要生成的HTML都直接放在服务器端,ajax吐出数据就包含了<li>标签,这样的页面

JavaScript 高级语法介绍_javascript技巧

(function($){})(jQuery); 其实比较简单,要理解几个概念: 1.(),在JavaScript里()表示执行一个方法,如: function x(){   alert("xxx"); } var a = x;   // 没有调用,a 是一个function var a = x(); //调用了函数,a 的值是调用的结果:undefined 2.jQuery是一个jQuery对象,表示调用函数时,传入一个参数是jQuery对象. 这个没什么好说的 3.(functio

JavaScript自定义事件介绍_javascript技巧

很多DOM对象都有原生的事件支持,向div就有click.mouseover等事件,事件机制可以为类的设计带来很大的灵活性,相信.net程序员深有体会.随着web技术发展,使用JavaScript自定义对象愈发频繁,让自己创建的对象也有事件机制,通过事件对外通信,能够极大提高开发效率. 简单的事件需求 事件并不是可有可无,在某些需求下是必需的.以一个很简单的需求为例,在web开发中Dialog很常见,每个Dialog都有一个关闭按钮,按钮对应Dialog的关闭方法,代码看起来大概是这样 复制代码

JavaScript prototype 使用介绍_javascript技巧

用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性,可以为其添加函数供实例访问,其它的就不清楚了,最近看了一些 JavaScript高级程序设计,终于揭开了其神秘面纱. 每个函数都有一个prototype属性,这个属性是指向一个对象的引用,这个对象称为原型对象,原型对象包含函数实例共享的方法和属性,也就是说将函数用作构造函数调用(使用new操作符调用)的时候,新创建的对象会从原型对象上继承属性和