url编码 及 js中url编码的api和应用

2022-07-30,,,

在因特网上传送URL,只能采用ASCII字符集,即是常说的get请求只能使用ASCII 字符

也就是说URL只能使用字母和数字[0-9a-zA-Z]、一些特殊符号$-_.+!*’()[不包括双引号]、以及某些保留字(空格转换为+),才可以不经过编码直接用于URL

RFC文档的建议:

这意味着 如果URL中有汉字或者不在ASCII字符集中的特殊符号,就必须编码后才能使用。
对于非ASCII字符RFC文档建议使用utf-8对其进行编码得到相应的字节,然后对每个字节执行百分号编码

可以看到a!@$%%5E&*() 都可以在ASCII对照表中查得到,而¥符号在ASCII对照表中是没有的,那么就会进行转换,首先会在UTF-8字符集中找到¥符号的16进制编码,经过Url编码之后得到%EF%BF%A5

url编码混乱的原因:

麻烦的是,建议始终都是建议,没有统一的一套标准,难免有些人会不听取建议。

标准的国际组织并没有规定具体的编码方法,而是交给应用程序(浏览器)自己决定。 这导致"URL编码"成为了一个混乱的领域不同的浏览器对于非ASCII字符可能采用不同的转换方式,有的听取建议按照utf-8处理url上非ASCII字符,有的则使用GB2312编码。

如何做到统一:

不同的浏览器将导致完全不同的编码结果。如果程序员要把每一种结果都考虑进去,是不是太恐怖了?有没有办法,能够保证客户端只用一种编码方法向服务器发出请求?

回答是有的,就是使用Javascript先对URL编码,然后再向服务器提交,不要给浏览器插手的机会。因为Javascript的输出总是一致的,所以就保证了服务器得到的数据是格式统一的。

实现统一的方式:

Javascript中提供了3对函数用来对Url编码以得到合法的Url
它们分别是:

  • escape / unescape
  • encodeURI / decodeURI
  • encodeURIComponent / decodeURIComponent

由于解码和编码的过程是可逆的,因此这里只解释编码的过程。

这三个编码的函数——escape,encodeURI,encodeURIComponent——都是用于将不安全不合法的Url字符转换为合法的Url字符表示,它们有以下几个不同点。

  1. 安全字符不同:

下面列出了这三个函数的安全字符(即函数不会对这些字符进行编码)

escape(69个):    */@+-._0-9a-zA-Z
encodeURI(82个):    !#$&'()*+,/:;=?@-._~0-9a-zA-Z
encodeURIComponent(71个):    !'()*-._~0-9a-zA-Z
  1. 对Unicode字符的编码方式不同:

这三个函数对于ASCII字符的编码方式相同,均是使用百分号+两位十六进制字符来表示。但是对于Unicode字符,escape的编码方式是%uxxxx,其中的xxxx是用来表示unicode字符的4位十六进制字符。这种方式已经被W3C废弃了。但是在ECMA-262标准中仍然保留着escape的这种编码语法。encodeURI和encodeURIComponent则使用UTF-8对非ASCII字符进行编码,然后再进行百分号编码。这是RFC推荐的。因此建议尽可能的使用这两个函数替代escape进行编码。

  1. 适用场合不同:

encodeURI被用作对一个完整的URI进行编码,而encodeURIComponent被用作对URI的一个组件进行编码。从上面提到的安全字符范围表格来看,我们会发现,encodeURIComponent编码的字符范围要比encodeURI的大

encodeURI():

  • encodeURI()是Javascript中真正用来对URL编码的函数

着眼于对整个URL进行编码,因此除了常见的符号以外,对其他一些在网址中有特殊含义的符号"; / ? : @ & = + $ , #",也不进行编码。编码后,它输出符号的utf-8形式,并且在每个字节前加上%。

encodeURIComponent()

  • 它用于对URL的组成部分进行个别编码,而不用于对整个URL进行编码。

因此,"; / ? : @ & = + $ , #",这些在encodeURI()中不被编码的符号,在encodeURIComponent()中统统会被编码。至于具体的编码方法,两者是一样。

encodeURIComponent() 和 encodeURI() 的区别演示:

console.log(encodeURI("?name=zhangsan&age=21"))
console.log(encodeURIComponent("?name=zhangsan&age=21")) 

总结:

开发中大部分情况下使用encodeURI / decodeURI完全可以了

本文地址:https://blog.csdn.net/fesfsefgs/article/details/107888978

《url编码 及 js中url编码的api和应用.doc》

下载本文的Word格式文档,以方便收藏与打印。