關(guān)于URL編碼

HitenDev 發(fā)布于2019-08-20 18:21 / 3352人閱讀

摘要：基本概念編碼不能直接使用需要編碼領(lǐng)杉果紅包，享更多優(yōu)惠點擊領(lǐng)取問題的由來就是網(wǎng)址只要上網(wǎng)就一定會用到只有字母和數(shù)字一些特殊符號以及某些保留字才可以不經(jīng)過編碼直接用于這意味著如果中有漢字就必須編碼后使用但是麻煩的是沒有規(guī)定具體的編碼方

基本概念

1.encodeComponent編碼url,url不能直接使用,需要編碼

var rlt = "http://service.weibo.com/share/share.php?";
var url = "http://www.baidu.com";
var params = {
    appkey: "379570494",
    title: "領(lǐng)杉果紅包，享更多優(yōu)惠！點擊領(lǐng)取：",
    url: url
};
for (var i in params) {
    rlt += i + "=" + params[i] + "&";
}
for (var i in params) {
    rlt += i + "=" + encodeURIComponent(params[i]) + "&";
}
console.log(rlt);

問題的由來

1.URL就是網(wǎng)址,只要上網(wǎng),就一定會用到.
只有字母和數(shù)字[0-9a-zA-Z],一些特殊符號$-_.+!*"(),以及某些保留字,才可以不經(jīng)過編碼直接用于URL.
2.這意味著,如果URL中有漢字,就必須編碼后使用,但是麻煩的是,RFC1738沒有規(guī)定具體的編碼方法,
而是交給應(yīng)用程序(瀏覽器)自己決定,這導(dǎo)致"URL編碼"成為了一個混亂的領(lǐng)域.
3.包括:ajax請求url地址,瀏覽器上直接用get或post發(fā)出http請求,網(wǎng)址路徑中包含漢字,查詢字符串包含漢字.
4.使用js先對URL編碼,然后再向服務(wù)器提交,不給瀏覽器插手的機會,
因為js的輸出總是一致的,所以就保證了服務(wù)器得到的數(shù)據(jù)是格式統(tǒng)一的.

escape,unescape

escape()不能直接用于URL編碼,他的真正作用是返回一個字符串的Unicode編碼值.

encodeURI和decodeURI

1.encodeURI()是js中真正用來對URL編碼的函數(shù)
2.它著眼于對整個URL進行編碼,因此除了常見的符號以外,對其他一些在網(wǎng)址中有特殊含義的符號;/?:@&=+$,#也不進行編碼,
編碼后,它輸出符號的utf-8形式,并且在每個字節(jié)前加上%

encodeURIComponent和decodeURIComponent

與encodeURI()的區(qū)別是,它用于對URL的組成部分進行個別編碼,而不用于對整個URL進行編碼.
因此,;/?:@&=+$,#這些在encodeURI()中不被編碼的符號,在encodeURIComponent中統(tǒng)統(tǒng)會被編碼.

var test = "http://www.baidu.com/my app?search=a&b=3#2哈哈";
var test1 = encodeURIComponent(test);
var test2 = encodeURI(test);
console.log(test);  // http://www.baidu.com
console.log(test1); // http%3A%2F%2Fwww.baidu.com%2Fmy%20app%3Fsearch%3Da%26b%3D3%232%E5%93%88%E5%93%88,瀏覽器無法解析這個地址
console.log(test2); // http://www.baidu.com/my%20app?search=a&b=3#2%E5%93%88%E5%93%88,瀏覽器無法解析這個地址

var test3 = decodeURIComponent(test1);
var test4 = decodeURI(test2);
console.log(test3);
console.log(test4);

var test5 = escape(test);
var test6 = unescape(test5);
console.log(test5); // http%3A//www.baidu.com/my%20app%3Fsearch%3Da%26b%3D3%232%u54C8%u54C8
console.log(test6); // http://www.baidu.com/my app?search=a&b=3#2哈哈