URL编码总结
URL編碼總結
? ? ? ? ??URL是Universal Resource Locator的簡稱。翻譯過來那就是統一資源定位符，好吧，我們常常會俗稱為網頁地址。
一個URL的格式一般是這種：協議類型://server地址（必要時需加上port號）/路徑/文件名稱?參數。比方http://zh.wikipedia.org:80/w/index.php?title=Special，協議是HTTP。server地址是zh.wikipedia.org，port是80，路徑和文件名稱是/w/index.php。參數是title=Special。還有個與URL相關的概念URI。URI是統一資源標示符，URL是URI的一種，用于標示互聯網資源，并指定了對資源的操作和獲取方法。URL大部分情況下都僅僅有英文字符，這樣也就不存在編碼問題。假設URL中有了中文。那么編碼規則是什么呢？實際上，RFC并沒有標準規定URL的編碼方式，所以不同的瀏覽器的表現可能是不同的。以下就總結下。主要參考了阮一峰的關于URL編碼一文，當然有些地方我測試的結果會有所不同，大家能夠依據自己的系統環境進行區分。
1 URL路徑中包括中文
? ? ? ?假設URL路徑中包括中文，經過測試發現無論IE6.0還是Chrome。編碼都是採用的UTF-8。其它瀏覽器臨時沒有測試。猜想應該一致。
? ? ? ?測試的URL是:http://zh.wikipedia.org/wiki/中文.在chrome的開發人員工具中能夠看到實際的URL是http://zh.wikipedia.org/wiki/%E4%B8%AD%E6%96%87，當中E4B8AD E69687正是"中文"的UTF-8編碼。
2 URL查詢參數中包括中文
? ? ? ?假設查詢參數中包括中文。則經過測試發現，IE6.0採用的是操作系統編碼，Chrome採用的是UTF-8編碼。
? ? ? ?測試的URL是:http://www.baidu.com/s?wd=中文。通過測試能夠發現。在IE6以下“中文”實際被轉成了%B0%D9%B6%C8。chrome以下則轉成了%E4%B8%AD%E6%96%87。
3 表單參數的中文編碼
? ? ? ?表單提交時，無論是IE6還是Chrome，參數中中文的編碼則依據HTML代碼中指定的字符編碼來決定(也就是html代碼中標簽指定的字符編碼)。
當然這是在form中沒有指定accept-charset的情況下，假設form中加了accept-charset="GBK”屬性，則表單參數則由accept-charset指定編碼進行編碼。
? ? ? ?測試代碼例如以下:
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>測試</title> </head> <body> <h2>表單中文編碼測試</h2> <form method="GET" action="http://www.baidu.com/s"> <input type="text" name="wd"> <input type="submit" value="OK"> </form> </body> </html>? ? ? ?能夠發現，當指定charset=UTF-8時，你在輸入項輸入“中文”。則實際提交后會用UTF-8編碼成%E4%B8%AD%E6%96%87，而假設charset=GBK。則輸入項會用GBK編碼成%D6%D0%CE%C4。
用POST方法也是一樣的。
? ? ? ?而假設加上accept-charset屬性。代碼改成以下這樣。則表單參數編碼由accept-charset中指定的編碼來決定。
例如以下所看到的，盡管meta中指定的是UTF-8編碼。可是表單參數是GBK編碼的。
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>測試</title> </head> <body> <h2>表單中文編碼測試</h2> <form method="GET" action="http://www.baidu.com/s" accept-charset="GBK"> <input type="text" name="wd"> <input type="submit" value="OK"> </form> </body> </html>另一點須要注意的是，假設輸入項包括空格，比方“中文 哈哈”，則空格會被編碼為+。4 Javascript HTTP的中文參數編碼
? ? ? ?之前說的是直接通過瀏覽器發HTTP請求的中文編碼情況，那假設是通過Javascript發送HTTP請求，會是什么情況呢？依據測試發現，通過Javascript發送的HTTP請求。IE6的為操作系統編碼。Chrome中文參數編碼是UTF-8。
? ? ? ?測試：能夠打開Chrome的http://zh.wikipedia.org/wiki/%E4%B8%AD%E6%96%87。在開發人員工具的控制臺輸入$.ajax("/wiki/英語")，能夠在網絡連接中發現"英語"採用的UTF-8編碼。IE中能夠另外編輯一個測試的網頁，用JS測試就可以。
5 Javascript編碼函數
? ? ? ?前面說的非常多種中文編碼情況。不同的瀏覽器處理方式也不盡同樣。這是件非常糾結的事情，一個好的方法是採用JS的函數在表單提交前對參數進行統一處理。
? ? ? ?第一個函數是escape，escape是一個全局函數。它使用十六進制的數字(%xx或%uxxxx)編碼字符串為unicode碼。
小于等于0xFF的字符將被轉義為%xx。大于0xFF的將被轉移為%uxxxx，能夠使用unescape函數解碼escape函數編碼的字符串。escape已被ecma標準拋棄。如今一般推薦使用encodeURI或encodeURIComponent函數取代。
? ? ? ?escape實例: escape(“中文”)的結果是"%u4E2D%u6587",escape("abc def")的結果是"abc%20def",空格編碼為0x20。
不管網頁編碼是什么，經過JS的escape操作后，都會變成unicode碼。如第3節提到的，因為表單提交時參數中的空格會被編碼為+，所以escape函數不正確"+"進行編碼，所以escape("abc+def")結果還是"abc+def"。
? ? ? ?第二個函數是encodeURI，它也是全局函數。encodeURI的目的是採用UTF-8給URI進行編碼。
ASCII的字母、數字不編碼。- _ . ! ~ * ' ( )也不編碼，URI中具有特殊意義的字符也不編碼(如; / ? : @ & = + $ , #等)。
參數中的其它字符將轉換成UTF-8編碼方式的字符。并使用十六進制轉義序列(%xx)生成替換。
相應的解碼函數是decodeURI。
? ? ? ?encodeURI實例：encodeURI("測試 http://www.baidu.com/test?v=ab cd+@#")結果為"%E6%B5%8B%E8%AF%95%20http://www.baidu.com/test?
v=ab%20cd+@#"。
? ? ? ?第三個函數是encodeURIComponent，與encodeURI不同的是，它會對特殊符號如"; / ?
: @ & = + $ , #"進行編碼。解碼函數是decodeURIComponent。
? ? ? ?encodeURIComponent實例：encodeURIComponent("測試 http://www.baidu.com/test?v=ab cd+@#")結果為%E6%B5%8B%E8%AF%95%20http%3A%2F%2Fwww.baidu.com%2Ftest%3Fv%3Dab%20cd%40%23%2B。
6 參考資料
- 關于URL編碼
- URL wiki
- Javascript教程
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀
總結
- 上一篇： POJ 1144 Network(无向图
- 下一篇： Laravel API记录