url的编码与解码

小Ge学前端

已于 2024-07-01 14:46:08 修改

阅读量2.5k

点赞数 25

分类专栏： JavaScript 文章标签：服务器前端 javascript

于 2022-07-26 21:53:28 首次发布

本文链接：https://blog.csdn.net/weixin_51351053/article/details/126003943

版权

JavaScript 专栏收录该内容

1 篇文章

订阅专栏

HTTP协议中参数组件的传输是“key=value”键值对的形式，如果要传输多个参数就需要用“&”符号对键值对进行分隔。例如?name1=value1&name2=$value2,这样在服务器收到这种字符串的时候，会用“&”分隔出每一个参数，然后再用“=”来分隔出参数值。

针对“name1=value1&name2=value2”我们来说一下客户端到服务器端的概念上解析过程：
上述字符串在计算机中用ASCII码（16进制）表示为：
6E616D6531 3D 76616C756531 26 6E616D6532 3D 76616C756532

ASCII码	含义
6E616D6531	name1
3D	=
76616C756531	value1
26	&
6E616D6532	name2
3D	=
76616C756532	value2

服务器端在接收到该数据后就可以遍历该字节流，首先一个字节一个字节的读取，当读到3D这个字节的时候，服务器端就知道前面读到的字节串表示一个key，继续读取，如果遇到了26，表示从刚才读到的3D到26字节之间的字节串是上一个key的value，按照此方法就可以解析出客户端传过来的参数。

现在又这样一个问题：如果我的参数值中就包含=或者&这样的特殊子字符的时候，该怎么办。比如说“name1=value1”,其中value1的值是“va&lu=e1”，那么在传输过程中就会变成“name1=va&lu=e1”。用户传输的本意是只有一个键值对，但是服务器端会解析成两个键值对，这样就自然的产生了歧义。

如何解决上述问题带来的歧义呢？解决之法就是对URL进行编码

URL编码只是简单的在特殊字符的各个字节（16进制）前加上”%”即可。例如，我们对上述会产生歧义的字符进行编码后的结果：name1=va%26lu%3D，这样服务器会把紧跟在”%”后的字节当成普通的字节，不会把它当成各个参数或键值对的分隔符。

另外一个问题是，为什么要用ASCII码传输，可不可以用别的编码？
当然可以用别的编码，你可以自己开发一套编码然后自己进行解析。就像大部分国家都有自己的语言一样。但是国家之间要怎么进行交流呢，用英语吧，英语的使用范围最广。

URL编码的原则就是使用安全的字符（没有特殊用途或者特殊意义的可打印字符）去表示那些不安全的字符

保留字符：RUL可以划分为干了组件，协议、主机、路径等。有一些字符（： / ? # [ ] @）是用作分隔不同组件的。例如：冒号用于分隔协议和主机组件，斜杠用于分隔主机和路径，问号用于分隔路径和查询参数，等等。还有一些字符（! $ & * + , ; =）用于在每个组件中起到分隔作用，如等号用于表示查询参数中的键值对，&符号用于分隔查询多个键值对。当组件中的普通数据包含这些特殊字符时，需要对其进行编码。
RFC3986中指定了以下字符为保留字符：！ * ’ ( ) ; : @ & = + $ , / ? # [ ]

不安全字符：还有一些字符，当他们直接放在URL中的时候，可能会引起解析程序的歧义。这些字符被视为不安全的字符，原因有很多。

空格：URL在传输的过程，或者用户在排版的过程中，或者文本处理程序在处理URL的过程，都有可能引入无关紧要的空格，或者将那些有意义的空格给去掉。
引号以及 <>：引号和尖括号通常用于在普通文本中起到分隔URL的作用。
#：通常用于表示书签或者锚点。
%：百分号本身用作对不安全的字符进行编码是使用的特殊字符，因此本身需要编码。
{ } | \ ^ [ ] ’ ~：某一些网关或者传输代理会篡改这些字符

需要注意的是，对于URL中的合法字符，编码和不编码是等价的，但是对于上边提到的这些字符，如果不经过编码，那么它们可能会造成URL语义的不同。因此对于URL而言，只有普通英文字符和数字，特殊字符$ - _ . + ! * ’ ( )还有保留字符，才能出现在未经编码的Url中，其他字符均需要编码之后才能出现在URL中。

但是由于历史原因，目前尚存在一些不标准的编码实现，例如对于”~”符号，虽然RFC3986文档规定，对于波浪号~不需要进行URL编码，但是还是有很多老的网关或者传输代理会进行编码。

由于历史原因，有一些Url编码实现并不完全遵循这样的原则
JS中提供3个函数对URL进行编码和解码 escape/unescape,encodeURI
/decodeURI,encodeURIComponent/decodeURIComponent. 提供了不同形式的编码格式

<body>
    <script>
        console.log(encodeURI('我是哥哥'));
        console.log(decodeURI('%E6%88%91%E6%98%AF%E5%93%A5%E5%93%A5'));

        console.log(escape('你是谁'));
        console.log(unescape('%u4F60%u662F%u8C01'))

        console.log(encodeURIComponent('你是谁'));
        console.log(decodeURIComponent('%E4%BD%A0%E6%98%AF%E8%B0%81'))
    </script>
</body>