作为前端,每日与 URL 打交道是必不可少的。但是也许每天只是单纯的用,对其只是一知半解,随着工作的展开,我发现在日常抓包调试,接口调用,浏览器兼容等许多方面,不深入去理解URL与URL编码则会踩到很多坑。故写下此篇文章,详解一下 URL 。
URL 与 URI
很多人会混淆这两个名词。
URL:(Uniform/Universal Resource Locator 的缩写,统一资源定位符)。
URI:(Uniform Resource Identifier 的缩写,统一资源标识符)。
关系:
URI 属于 URL 更低层次的抽象,一种字符串文本标准。
就是说,URI 属于父类,而 URL 属于 URI 的子类。URL 是 URI 的一个子集。
二者的区别在于,URI 表示请求服务器的路径,定义这么一个资源。而 URL 同时说明要如何访问这个资源(http://)。
端口 与 URL标准格式
何为端口?端口(Port),相当于一种数据的传输通道。用于接受某些数据,然后传输给相应的服务,而电脑将这些数据处理后,再将相应的回复通过开启的端口传给对方。
端口的作用:因为 IP 地址与网络服务的关系是一对多的关系。所以实际上因特网上是通过 IP 地址加上端口号来区分不同的服务的。
端口是通过端口号来标记的,端口号只有整数,范围是从0 到65535。
URL 标准格式。
通常而言,我们所熟悉的 URL 的常见定义格式为:
scheme://host[:port#]/path/.../[;url-params][?query-string][#anchor]
1
2
3
4
5
6
7
|
scheme //有我们很熟悉的http、https、ftp以及著名的ed2k,迅雷的thunder等。
host //HTTP服务器的IP地址或者域名
port # //HTTP服务器的默认端口是80,这种情况下端口号可以省略。如果使用了别的端口,必须指明,例如tomcat的默认端口是8080 http://localhost:8080/
path //访问资源的路径
url-params //所带参数
query-string //发送给http服务器的数据
anchor //锚点定位
|
利用 <a> 标签自动解析 url
开发当中一个很常见的场景是,需要从 URL 中提取一些需要的元素,譬如 host 、 请求参数等等。
通常的做法是写正则去匹配相应的字段,当然,这里要安利下述这种方法,来自 James 的 blog,原理是动态创建一个 a 标签,利用浏览器的一些原生方法及一些正则(为了健壮性正则还是要的),完美解析 URL ,获取我们想要的任意一个部分。
代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
// This function creates a new anchor element and uses location // properties (inherent) to get the desired URL data. Some String // operations are used (to normalize results across browsers). function parseURL(url) {
var a = document.createElement( 'a' );
a.href = url;
return {
source: url,
protocol: a.protocol.replace( ':' , '' ),
host: a.hostname,
port: a.port,
query: a.search,
params: ( function (){
var ret = {},
seg = a.search.replace(/^\?/, '' ).split( '&' ),
len = seg.length, i = 0, s;
for (;i<len;i++) {
if (!seg[i]) { continue ; }
s = seg[i].split( '=' );
ret[s[0]] = s[1];
}
return ret;
})(),
file: (a.pathname.match(/([^/? #]+)$/i) || [,''])[1],
hash: a.hash.replace( '#' , '' ),
path: a.pathname.replace(/^([^/])/, '/$1' ),
relative: (a.href.match(/tps?:\/[^/]+(.+)/) || [, '' ])[1],
segments: a.pathname.replace(/^\ //,'').split('/')
};
} |
Usage 使用方法:
1
2
3
4
5
6
7
8
9
10
11
12
|
myURL.file; // = 'index.html'
myURL.hash; // = 'top'
myURL.host; // = 'abc.com'
myURL.query; // = '?id=255&m=hello'
myURL.params; // = Object = { id: 255, m: hello }
myURL.path; // = '/dir/index.html'
myURL.segments; // = Array = ['dir', 'index.html']
myURL.port; // = '8080'
myURL.protocol; // = 'http'
myURL.source; // = 'http://abc.com:8080/dir/index.html?id=255&m=hello#top'
|
利用上述方法,即可解析得到 URL 的任意部分。
URL 编码
为什么要进行URL编码?通常如果一样东西需要编码,说明这样东西并不适合直接进行传输。
1、会引起歧义:例如 URL 参数字符串中使用 key=value 这样的键值对形式来传参,键值对之间以 & 符号分隔,如 ?postid=5038412&t=1450591802326,服务器会根据参数串的 & 和 = 对参数进行解析,如果 value 字符串中包含了 = 或者 & ,如宝洁公司的简称为P&G,假设需要当做参数去传递,那么可能URL所带参数可能会是这样 ?name=P&G&t=1450591802326,因为参数中多了一个&势必会造成接收 URL 的服务器解析错误,因此必须将引起歧义的 & 和 = 符号进行转义, 也就是对其进行编码。
2、非法字符:又如,URL 的编码格式采用的是 ASCII 码,而不是 Unicode,这也就是说你不能在 URL 中包含任何非 ASCII 字符,例如中文。否则如果客户端浏览器和服务端浏览器支持的字符集不同的情况下,中文可能会造成问题。
那么如何编码?如下:
escape 、 encodeURI 、encodeURIComponent
escape()
首先想声明的是,W3C把这个函数废弃了,身为一名前端如果还用这个函数是要打脸的。
escape只是对字符串进行编码(而其余两种是对URL进行编码),与URL编码无关。编码之后的效果是以 %XX 或者 %uXXXX 这种形式呈现的。它不会对 ASCII字符、数字 以及 @ * / + 进行编码。
根据 MDN 的说明,escape 应当换用为 encodeURI 或 encodeURIComponent;unescape 应当换用为 decodeURI 或 decodeURIComponent。escape 应该避免使用。举例如下:
1
2
3
4
5
6
7
8
|
// "https%3A%2F%2Fwww.baidu.com%2F%20a%20b%20c" //而 escape 会编码成下面这样,eocode 了冒号却没 encode 斜杠,十分怪异,故废弃之 // "https%3A//www.baidu.com/%20a%20b%20c" |
encodeURI()
encodeURI() 是 Javascript 中真正用来对 URL 编码的函数。它着眼于对整个URL进行编码。
1
2
|
|
编码后变为上述结果,可以看到空格被编码成了%20,而斜杠 / ,冒号 : 并没有被编码。
是的,它用于对整个 URL 直接编码,不会对 ASCII字母 、数字 、 ~ ! @ # $ & * ( ) = : / , ; ? + ' 进行编码。
1
2
|
encodeURI( "~!@#$&*()=:/,;?+'" )
// ~!@#$&*()=:/,;?+' |
encodeURIComponent()
嘿,有的时候,我们的 URL 长这样子,请求参数中带了另一个 URL :
1
|
|
直接对它进行 encodeURI 显然是不行的。因为 encodeURI 不会对冒号 : 及斜杠 / 进行转义,那么就会出现上述所说的服务器接受到之后解析会有歧义。
1
2
|
encodeURI(URL) |
这个时候,就该用到 encodeURIComponent() 。它的作用是对 URL 中的参数进行编码,记住是对参数,而不是对整个 URL 进行编码。
因为它仅仅不对 ASCII字母、数字 ~ ! * ( ) ' 进行编码。
错误的用法:
1
2
3
4
|
encodeURIComponent(URL); // "http%3A%2F%2Fwww.a.com%3Ffoo%3Dhttp%3A%2F%2Fwww.b.com%3Ft%3D123%26s%3D456" // 错误的用法,看到第一个 http 的冒号及斜杠也被 encode 了 |
正确的用法:encodeURIComponent() 着眼于对单个的参数进行编码:
1
2
3
|
|
利用上述的使用<a>标签解析 URL 以及根据业务场景配合 encodeURI() 与 encodeURIComponent() 便能够很好的处理 URL 的编码问题。
相关推荐
在python中url,对于中文等非ascii码字符,需要进行参数的编码与解码。 二、关键代码 1、url编码 对字符串编码用urllib.parse包下的quote(string, safe=’/’, encoding=None, errors=None)方法。 对json格式的参数...
1. escape() 不能直接用于URL编码,它的真正作用是返回一个字符的Unicode编码值。比如“春节”的返回结果是%u6625%u8282,escape()不对”+”编码主要用于汉子编码,现在已经不提倡使用了。 2. encodeURI()是...
详细介绍各种常见编码的转换算法。通用字符集(UCS)、Unicode编码、UTF-8编码、UTF-7编码、GB2312编码、URL 解码
案例:爬取使用搜狗根据指定词条搜索到的页面数据...response = urllib.request.urlopen(url=url) # 3.获取响应对象中的页面数据:read函数可以获取响应对象中存储的页面数据(byte类型的数据值) page_text = respons
可以利用百度进行URL编码解码 默认gbk https://www.baidu.com/s?wd=中国 python3编码解码示例 # -*- coding: utf-8 -*- # @File : urldecode_demo.py # @Date : 2018-05-11 from urllib.request import quote, ...
中文字符编码研究系列第五期,详解 urlencode()与urldecode()函数字符编码原理,两个函数分别用于编码 URL 字符串和解码已编码的 URL 字符串,实现对中文字符的编码
前言 记得刚入门那个时候,自己处理编码转换问题往往是“百度:url解码、base64加密...url编码是一种浏览器用来打包表单输入的格式.可谓是一名作为web人员最熟悉的一种编码方式了。 >>> from urllib import * >>> qu
如何获取一个页面内所有URL链接?在Python中可以使用urllib对网页进行爬取,然后利用Beautiful Soup对爬取的页面进行解析,提取出所有的URL。 什么是Beautiful Soup? Beautiful Soup提供一些简单的、python式的函数...
关于中文URL已经是老话题了,到目前为止...不过需要注意的是最好使用UTF8编码,虽然百度有了“一定的识别能力”,不过不保证五花八门的编码不会出问题。 在百度搜索结果中显示了中文的URL,但是点开之后地址栏显示的
如果要在URL中传递特殊符号的原本意义,要对他们进行编码。编码的格式为:%加字符的ASCII码(16进制),例如空格的编码值是” ″。 URL中特殊符号的用途及普通意义的编码 + URL 中+号表示空格 + 空格 ...
解析url用的类库: python2版本: from urlparse import urlparse import urllib ...另外host为‘s.weibo.com’的url编码与其他不同要另做处理。 代码如下:有些网站的规则还不是很清楚,需要花大量时间
10-URI的基本格式以及与URL的区别 11-为什么要对URI进行编码? 12-详解HTTP的请求行 13-HTTP的正确响应码 14-HTTP的错误响应码 15-如何管理跨代理服务器的长短连接? 16-HTTP消息在服务器端的路由 17-代理服务器转发...
主要介绍了ASP编码和解码函数的相关资料,需要的朋友可以参考下
将图片转换为Base64编码,可以让你很方便地在没有上传文件的条件下将图片插入其它的网页、编辑器中。 这对于一些小的图片是极为方便的,因为你不需要再去寻找一个保存图片的地方。 将图片转换成base64编码的,在web...
php地址栏传中文$_GET下来后乱码,urlencode和urldecode用法详解url编码语法: string urlencode(string str);返回值: 字符串函数种类: 编码处理例如: 复制代码 代码如下:<?php$ChineseName=”我的名字,是中文的...
详解JSP中使用过滤器进行内容编码的解决办法 问题 当通过JSP页面,向数据库中插入记录的时候,可能因为JSP页面编码原因,导致插入到数据库中的新纪录出现乱码。因此需要对JSP页面中的内容进行编码操作,从而保证与...