IE瀏覽器兼容之URL編碼

問題場景：文件上傳，在谷歌里可以正常操作，IE瀏覽器操作出錯，服務請求報錯。HTTP 400 錯誤 - 請求無效 (Bad request)

 

 

 

問題分析：對比兩個請求可以發現，二者的請求URL不一致。jsp通過url請求傳遞參數給后端，但是url的格式不對會造成請求失敗。這種url的問題常發生在在IE瀏覽器中，其他瀏覽器火狐、chrome等不會有問題。因為谷歌中會自動給空格和一些特殊字符編碼，而IE沒有這一步。

解決辦法：手動給url編碼。在文件upload的方法里對url進行兩次編碼

encodeURI(encodeURI(url))

 

以上問題涉及的知識：

1、http請求過程：

• 瀏覽器把URL(以及post提交的內容)經過編碼后發送給服務器。
•  服務器將對內容解碼，進行處理，再把結果編碼返回給瀏覽器。
•  瀏覽器按照指定的編碼顯示該網頁。

字符串編碼和解碼時涉及到的字符集，如ISO8859-1、GBK、UTF-8、UNICODE。

2、URL編碼

（1）URL編碼特點：

由於 URL 常常會包含 ASCII 集合之外的字符，URL 必須轉換為有效的 ASCII 格式。

URL 編碼使用 "%" 其后跟隨兩位的十六進制數來替換非 ASCII 字符。

URL 不能包含空格。URL 編碼通常使用 + 來替換空格。

（2）URL編碼方法

• escape()不能直接用於URL編碼，它的真正作用是返回一個字符的Unicode編碼值。escape()不對"+"編碼 主要用於漢字編碼，現在已經不提倡使用。
• encodeURI()是Javascript中真正用來對URL編碼的函數。編碼整個url地址，但對特殊含義的符號"; / ? : @ & = + $ , #"，也不進行編碼。對應的解碼函數是：decodeURI()。
• encodeURIComponent() 能編碼"; / ? : @ & = + $ , #"這些特殊字符。對應的解碼函數是decodeURIComponent()。假如要傳遞帶&符號的網址，所以用encodeURIComponent()

代碼示例：

代碼：
var test1="http://www.haorooms.com/My name=hl&age=18/";
var enurl=encodeURI(test1);
console.log(enurl);
var enuc=encodeURIComponent(test1);
console.log(enuc);

//輸出
http://www.haorooms.com/My%20name=hl&age=18/
http%3A%2F%2Fwww.haorooms.com%2FMy%20name%3Dhl%26age%3D18%2F