1. 使用 JS 中的 encodeURIComponent 或 encodeURI 方法。
說明:
encodeURIComponent(String)
對傳遞參數進行設置。不編碼字符有 71 個: ! , ' , ( , ) , * , - , . , _ , ~ , 0-9 , a-z , A-Z 。
例:
var url = “<a href=’http://cancait.blog.163.com/name=” + encodeURIComponent(“ 中國 ”) + “’> 中國 </a>”;
encodeURI(String)
對 URL 整體轉換。不編碼字符有 82 個: ! , # , $ , & , ' , ( , ) , * , + ,,, - , . , / , : , ; , = , ? , @ , _ , ~ , 0-9 , a-z , A-Z 。
例:
var url = “<a href=’” + encodeURI(“http://cancait.blog.163.com/name= 中國 ”) + “’> 中國 </a>”;
亂碼處理實例:
/////////////////////////////////////////////////////////////////////////////////////
初始頁面內容如下 (hello.jsp) :
/////////////////////////////////////////////////////////////////////////////////////
<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%String path = request.getContextPath();%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>AJAX 提交頁面 </title>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<script type="text/javascript">
function justdo(){
var post="name= 王力猛 &email=wallimn@sohu.com&bokee=http://wallimn.bokee.com ";
post = encodeURI(post);
post = encodeURI(post);// 兩次,很關鍵
var xmlObj = new ActiveXObject('Msxml2.XMLHTTP');
var URL = '<%= path%>/page/act.jsp';// 文件名需要調整成測試時的相應位置 ?
xmlObj.open ('post' , URL , true);
xmlObj.setrequestheader("cache-control" , "no-cache");
xmlObj.setrequestheader("Content-Type" , "application/x-www-form-urlencoded");
xmlObj.send (post);// 注意 :POST 方式,使用這個來發送內容 ?
}
</script>
</head>
<body>
<input type="button" value=" 提交 " onclick="justdo()"/>
</body>
</html>
/////////////////////////////////////////////////////////////////////////////////////
ajax 請求處理頁面( act.jsp )的內容如下 :
/////////////////////////////////////////////////////////////////////////////////////
<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%String path = request.getContextPath();%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
< %@page import="java.net.URLDecoder"%>
<html>
<head>
<title>ajax deal</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
</head>
<body>
<%
// 遍歷輸出參數內容。
for (Enumeration e = request.getParameterNames(); e.hasMoreElements();) {
String h = (String) e.nextElement();
String v = request.getParameter(h);
String mm = java.net.URLDecoder.decode(v , "UTF-8");
System.out.println(" 請求參數 : " + h + " = " + mm);
}
%>
</body>
</html>
/////////////////////////////////////////////////////////////////////////////////////
說明:
java.net.URLencode 和 java.net.URLDecode 分別對應于 JavaScript 中的 encodeURI 和 decodeURI 、 encodeURIComponent 和 decodeURIComponent.
為什么要連續兩次調用 encodeURI(String) 方法呢?是因為 Java 中的 request.getParameter(String) 方法會進行一次 URI 的解碼過程,調用時內置的解碼過程會導致亂碼出現。而 URI 編碼兩次后, request.getParameter(String) 函數得到的是原信息 URI 編碼一次的內容。接著用 java.net.URLDecoder.decode(String str,String codename) 方法,將已經編碼的 URI 轉換成原文。
2. 使用 JS 中的 escape 方法。
說明:
escape(String)
對 0-255 以外的 unicode 值進行編碼時輸出 %u**** 格式,其它情況下 escape , encodeURI , encodeURIComponent 編碼結果相同。
例:
var url = “<a href=’http://cancait.blog.163.com/name=” + escape (“ 中國 ”) + “’> 中國 </a>”;
亂碼處理實例:
/////////////////////////////////////////////////////////////////////////////////////
例子跟上面一樣。只有這里不同。
(hello.jsp)
post = escape(post);
post = escape (post);// 兩次,很關鍵
(act.jsp)
String h = (String) e.nextElement();
String v = request.getParameter(h);
String mm = EscapeUnescape.unescape( v , "UTF-8");
System.out.println(" 請求參數 : " + h + " = " + mm);
/////////////////////////////////////////////////////////////////////////////////////
(EscapeUnescape.java)Java 中的 escape 和 unescape. 內容如下:
/////////////////////////////////////////////////////////////////////////////////////
package cn.kgnews.util;
public class EscapeUnescape {
public static String escape(String src) {
int i;
char j;
StringBuffer tmp = new StringBuffer();
tmp.ensureCapacity(src.length() * 6);
for (i = 0; i < src.length(); i++) {
j = src.charAt(i);
if (Character.isDigit(j) || Character.isLowerCase(j)
|| Character.isUpperCase(j))
tmp.append(j);
else if (j < 256) {
tmp.append("%");
if (j < 16)
tmp.append("0");
tmp.append(Integer.toString(j , 16));
} else {
tmp.append("%u");
tmp.append(Integer.toString(j , 16));
}
}
return tmp.toString();
}
public static String unescape(String src) {
StringBuffer tmp = new StringBuffer();
tmp.ensureCapacity(src.length());
int lastPos = 0 , pos = 0;
char ch;
while (lastPos < src.length()) {
pos = src.indexOf("%" , lastPos);
if (pos == lastPos) {
if (src.charAt(pos + 1) == 'u') {
ch = (char) Integer.parseInt(src
.substring(pos + 2 , pos + 6) , 16);
tmp.append(ch);
lastPos = pos + 6;
} else {
ch = (char) Integer.parseInt(src
.substring(pos + 1 , pos + 3) , 16);
tmp.append(ch);
lastPos = pos + 3;
}
} else {
if (pos == -1) {
tmp.append(src.substring(lastPos));
lastPos = src.length();
} else {
tmp.append(src.substring(lastPos , pos));
lastPos = pos;
}
}
}
return tmp.toString();
}
}
/////////////////////////////////////////////////////////////////////////////////////
說明:
EscapeUnescape.java 類是 Java 中的 escape 和 unescape 。
原理跟上例一樣。
3. 用 JavaScript 實現 java 中的 URLencode 跟 URLdecode.
說明:
這種方法服務器端代碼不必修改。直接 request.getParameter() 來獲取就可以了。
JavaScript 中的 URLencode 跟 URLdecode 實現如下:
/////////////////////////////////////////////////////////////////////////////////////
(UrlEncodeUrlDecode_gecko.js) 非 IE 實現方法如下:
完整代碼可到這里下載:
http://www.blueidea.com/user/qswh/qswhU2GB.js
/////////////////////////////////////////////////////////////////////////////////////
var qswhU2GB = […..]; // 此數組為 GB Unicode 對照表
function UrlEncode(str){
var i , c , ret="" , strSpecial="!\"#$%&'()*+ , /:;<=>?@[\]^`{|}~%";
for(i=0;i<str.length;i++){
if(str.charCodeAt(i)>=0x4e00){
c=qswhU2GB[str.charCodeAt(i)-0x4e00];
ret+="%"+c.slice(0 , 2)+"%"+c.slice(-2);
}
else{
c=str.charAt(i);
if(c==" ")
ret+="+";
else if(strSpecial.indexOf(c)!=-1)
ret+="%"+str.charCodeAt(i).toString(16);
else
ret+=c;
}
}
return ret;
}
function UrlDecode(str){
var i , c , d , t , p , ret = "";
function findPos(str){
for(var j = 0; j < qswhU2GB.length; j++){
if(qswhU2GB[j] == str){
return j;
}
}
return -1;
}
for(i = 0;i < str.length;){
c = str.charAt(i);i++;
if(c != "%"){
if(c == "+"){
ret += " ";
}else{
ret += c;
}
}else{
t = str.substring(i , i+2);i += 2;
if(("0x" + t) > 0xA0){
d = str.substring(i+1 , i+3);i += 3;
p = findPos(t + d);
if(p != -1){
ret += String.fromCharCode(p + 0x4e00);
}
}else{
ret += String.fromCharCode("0x" + t);
}
}
}
return ret;
}
function getSpell(str , sp){
var i , c , t , ret="";
if(sp==null)sp="";
for(i=0;i<str.length;i++){
if(str.charCodeAt(i)>=0x4e00){
c=parseInt(qswhU2GB[str.charCodeAt(i)-0x4e00] , 16);
if(c<55290){
for(t=qswhSpell.length-1;t>0;t=t-2)if(qswhSpell[t]<=c)break;
if(t>0)ret+=qswhSpell[t-1]+sp;
}
}
}
return ret.substr(0 , ret.length-sp.length);
}
/////////////////////////////////////////////////////////////////////////////////////
(UrlEncodeUrlDecode_ie.js)IE 實現方法如下:
/////////////////////////////////////////////////////////////////////////////////////
function UrlEncode(str) {
var ret = "";
var strSpecial = " ~!\"#$%&'()*+- , /:;<=>?[]^`{|}~%";
for (var i = 0; i < str.length; i++) {
var chr = str.charAt(i);
strstr = chr;
execScript("c = hex(asc(strstr))" , "VBScript");
if (parseInt("0x" + c) > 127) {
ret += "%" + c.slice(0 , 2) + "%" + c.slice(-2);
} else {
if (strSpecial.indexOf(chr) != -1) {
ret += "%" + c.toString(16);
} else {
ret += chr;
}
}
}
return ret;
}
function UrlDecode(str) {
var ret = "";
for (var i = 0; i < str.length; i++) {
var chr = str.charAt(i);
if (chr == "+") {
ret += " ";
} else {
if (chr == "%") {
var asc = str.substring(i + 1 , i + 3);
if (parseInt("0x" + asc) > 127) {
temp = parseInt("0x" + asc + str.substring(i + 4 , i + 6));
execScript("rt = chr(temp)" , "VBScript");
ret += rt;
i += 5;
} else {
temp = parseInt("0x" + asc);
execScript("ret = ret + chr(temp)" , "VBScript");
i += 2;
}
} else {
ret += chr;
}
}
}
return ret;
}
/////////////////////////////////////////////////////////////////////////////////////
(loadcssorjs.js) 自動識別瀏覽器動態導入 JS/CSS
實現方法如下:
/////////////////////////////////////////////////////////////////////////////////////
/*
CopyRight(C)CAnca Software Office.
Created by CAnca.2007.9.4
*/
function LoadScript(url) {
document.write("<scr" + "ipt type=\"text/javascript\" src=\"" + url + "\" onerror=\"alert('Error loading ' + this.src);\"></scr" + "ipt>");
}
function LoadCss(url) {
document.write("<link href=\"" + url + "\" type=\"text/css\" rel=\"stylesheet\" onerror=\"alert('Error loading ' + this.src);\" />");
}
var sSuffix = /msie/.test(navigator.userAgent.toLowerCase()) ? "ie" : "gecko";
LoadScript("js/UrlEncodeUrlDecode_" + sSuffix + ".js");
使用方法:
將三個 JS 文件放在同目錄。在頁面導入 loadcssorjs.js 。在要進行編碼的地方使用 UrlEncode 方法即可。
例:
//index.html
<html>
<head>
<script language=”javascript” src=”js/loadcssorjs.js”></script>
<script language=”javascript”>
var url = “ http://cancait.blog.163.com/name= ” + UrlEncode (“ 中國人 ”);
window.open(url);
</script>
</head>
<body>
…..
</body>
</html>
三種解決方案的比較:
第一種, 在服務器端需要一次 java.net.URLdecode(String) 轉碼。使用起來,不太方便。
第二種, 要建立 Java 版的 escape 跟 uncape 。在服務器端還是需要一次 uncape 轉碼。使用起來,不太方便。
第三種, 是最方便的一種方法。只需要客戶端進行編碼。服務器端可以不做任何修改。唯一缺點的是: firefox 瀏覽網頁時,要加載一個 150K 的 UrlEncodeUrlDecode_gecko.js 文件。影響了瀏覽速度。(但本人還是推薦使用這方案。)
總結:
當然, Ajax 實現不亂碼,可以不用這三種方案,用這三種方案,只是迫不得已的做法。通常造成亂碼的原因有以下幾點:
1. xmlhttp 返回的數據默認的字符編碼是 utf-8 ,如果前臺頁面是 gb2312 或者其它編碼數據就會產生亂碼。
2. post 方法提交數據默認的字符編碼是 utf-8 ,如果后臺是 gb2312 或其他編碼數據就會產生亂碼。
解決方法:
推薦方法:由于 Javascript 沿用 java 的字符處理方式,內部是使用 unicode 來處理所有字符的。 前臺后臺都用 utf-8 編碼,這樣可以省不少麻煩,從根本上解決了亂碼問題 . 優點是效率高,而且符合目前的形式, utf-8 編碼本身就是一種比較優秀的編碼,沒有語言限制 . 缺點只能調用自己的后臺編碼或者其他的 utf-8 的編碼。
前臺更改為
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
后臺 asp 中第一行加入如下代碼
span------君臨天下,舍我其誰------