JS 中 URL 编码的问题.

URL 编码

为何要对 URL 编码

1. 避免解析错误

咱们的 queryString 的形式是使用 ?开始, key=value 传递参数, key-value pairs 之间使用 & 链接.
好比:

?postid=5038412&t=1450591802326

服务器会

根据 & 解析 key-value pairs
根据 = 解析 key,value

那么若是 key或者 value 中存在 =,&, 那么就会解析挂掉,
好比 宝洁公司叫作 P&G

?name=P&G&t=123456

服务器解析的时候就会解析错误:

name=P
G     //到这里就挂掉了

2. 避免非法字符

URL 只能使用 ASCII 字符集, 全部的非 ASCII 码都算是非法字符.
在这个定义中, 全部的中文都算是非法字符.

URL 的编码规则

通常使用的是 百分号编码（percent-encoding）

规则:

是不是 ASCII 字符
    是
        取对应的字节编号, 好比 'a' 对应的是 '0x61', 那么编码以后就是 %61
    否
        使用 utf-8 对其进行编码
        好比"中文"使用UTF-8字符集获得的字节为 0xE4 0xB8 0xAD 0xE6 0x96 0x87,
        通过Url编码以后获得"%E4%B8%AD%E6%96%87".

实际情景

浏览器会默认给 URL 编码, 可是不一样浏览器的编码实现方式不一致, 因此最好的方式就是:
咱们本身经过 JS 对 URL 进行编码

JS 用来编码的函数有 3 个:

// escape()  // 不推荐使用, 缘由不明.
encodeURI()
encodeURIComponent()

encodeURI 会对整个 URL 中的非法字符编码 (它是为了解决非法字符)
encodeURIComponent 会对全部的保留字都编码 (解决解析错误的问题)

因此最终的编码方式是:

1. 对每个 key-value 进行 encodeURIComponent 编码

2. 对整个 URL 进行 encodeURI 编码

备注:
URL 中的字符能够分红三类:
保留字符 (reserved characters):
这类字符是URI中的保留关键字符，它们用于分割URI中的各个部分。
这些字符是： ;, /, ?, :, @, &, =, +, $, ,
Mark字符 (mark characters)
这类字符在RFC-2396中特别定义，可是没有特别说明用途,多是和别的RFC标准相关。
这些字符是：-, _, ., !, ~, *, ', (, )
普通字符

URL 编码解码的问题
既然浏览器会默认给 URL 进行编码, 那么服务器就会默认给URL 解码。
若是咱们仅仅是对 URL 进行 encodeURI, 那么服务器在解码的时候能够正常, 可是解析的时候依旧不能
区分 & 究竟是分割符仍是 value 中的一个普通字符, 因此咱们须要对 key-value pairs 进行编码的.

最终结论使用 encodeURIComponent 避免参数解析错误使用 encodeURI 避免非法字符