Global(全局)对象中的encodeURL()和encodeURIComponent()方法可以对URI进行编码,以便发送给浏览器。有效的URI中不能包含某些字符,比如说空格。而这两个URI编码方法可以对URI进行编码,它们用特殊的UTF-8编码替换所有的无效字符,从而让浏览器可以接收和理解,下面以表格的形式来表达它们的作用和区别:
encodeURL() | encodeURIComponent() | |
主要区别 | 不会对本身属于URI特殊字符进行编码,例如冒号、正斜杠、问号和井字号(“:”、“/”、“?”、“#”.....) | 会对它所处理的URI中任何非标准字符字符进行编码 |
例子 | 如图 | |
作用 | encodeURI()主要用于整个URI的编码 | encodeURIComponent()主要用于某个URI片段的编码,如例中的问号之后的片段。Component(译:成分、组件); |
相应的解码方法 | decondeURI() | decodeURIComponent() |
备注:在实际运用中,常需要对查询字符串进行编码,所以我们运用encodeURIComponent()的情况比较多; |
<script type="text/javascript">
var uri="https://mp.youkuaiyun.com/post edit?not_checkout=1";
document.write(uri+"<br />");
//https://mp.youkuaiyun.com/post edit?not_checkout=1
document.write(encodeURI(uri)+"<br />");
//https://mp%20csdn%20net/postedit?not_checkout=1
document.write(encodeURIComponent(uri));
//https%3A%2F%2Fmp%20csdn%20net%2Fpostedit%3Fnot_checkout%3D1
</script>
location对象是常用的对象,它提供了与当前窗口中加载的文档的有关信息,还提供了一些导航功能。事实上,location对象既是window对象的属性,也是document对象的属性;换句话说,window.location和doument.location引用的是同一个对象。location保存着当前文档的信息,并且可以将URI解析成独立的片段,通过以下属性可以访问且获得这个片段:
属性名 | 例子 | 说明 | 片段名称及作用 |
hash | "#content" | 返回URI中的hash(#号之后的零或多个字符),如果URI中不包含散列,则返回空的字符串; | 片段标识符:在URI的末端,通常可标记出以获取资源中的子资源(文档内的某个位置)。为URI中的可选项; |
host | "www.wrox.com:80" | 返回服务器名称和端口(如果有); | 服务器地址的冒号之后为服务器端口号,服务器地址可以是类似wrox.com这种可解析的域名,或是192.168.1.1这类的IPv4地址名,还可以是[0:0:0:0:0:0:0:1]这样用方括号括起来的IPv6地址名; |
hostname | "www.wrox.com" | 单独返回服务器名称; | 返回不带端口号的服务器名称 |
href | "https://mp.youkuaiyun.com/postedit?not_checkout=1" | 返回当前加载页面的完整的URI,location.toString()方法也可以做到; | 完整的URI |
pathname (译:路径名) | "/WileyCDA/" | 返回URI中的目录和(或)文件名; | 带层次的文件路径:指定服务器上的文件路径来定位特指的资源。 |
port | "8080" | 返回URI中指定的端口号。如果URI中不包含端口号,则这个属性返回空字符串; | 端口号:指定服务器连接的网络端口号,此项在URI中也是可选部分;若用户省略则自动使用默认端口号; |
protocol | "http:" | 返回页面使用的协议,通常为http:或https:; | 协议方案名:不区分字母大小写,最后跟一个冒号;也可以使用data:或javascript:这类指定数据或脚本程序的方案名; |
search | "?q=javascript" | 返回URI的查询字符串。这个字符串以问号开头; | 查询字符串:针对已指定的文件路径内的资源,可以使用查询字符串传入任意的参数。此项可选。 |
虽然通过上面的location对象的属性可以获取URI中的大多数信息,但是获取查询字符串的属性并不方便,因为location.search获取的查询字符串还需要再进行处理才可以使用,所以可以创建这样一个函数来处理;
<script type="text/javascript">
function getQueryStringArgs(){
//取得查询字符串,并去掉开头的问号之后的所有字符;
var qs=(location.search.length>0?location.search.substring(1):""),
//创建一个用来保存数据的对象;
args={},
//如果qs的长度不是0,在&符号处将字符串分割开,化为数组;
items=qs.length?qs.split("&"):[],
item=null,
name=null,
value=null,
i=0,
len=itmes.length;
for(i=0;i<len;i++){
//遍历items数组,把items数组中的每一项在“=”处分开,化为数组,数组只有两项;
item=items[i].split("=",2);
name=decodeURIComponent(item[0]);
//查询字符串有可能是被编码过的,所以使用decodeURIComponent处理
value=decodeURIComponent(item[1]);
//将不是空值的name值作为属性赋给args,以相应的value为属性值;
if(name.length){
args[name]=value;
}
}
return args;
}
</script>
例
假设本地地址location的uri为https://www.baidu.com/baidu?tn=monline_3_dg&ie=utf-8&wd=优快云
获取到的查询字符串为 ?tn=monline_3_dg&ie=utf-8&wd=优快云
去掉问号为 tn=monline_3_dg&ie=utf-8&wd=优快云
第一次使用split("&")获得数组items ["tn=monline_3_dg","ie=utf-8","wd=优快云"]
每次遍历数组会得到一个元素项数为2的数组item例如: ["tn","monline_3_dg"]....
将第一项item[0]作为名,第二项item[1]作为值,增强arges对象;