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 避免非法字符