1.       使用 JS 中的 encodeURIComponent encodeURI 方法。

說明:

 

encodeURIComponent(String)

對傳遞參數(shù)進行設置。不編碼字符有 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 方式,使用這個來發(fā)送內容 ?
    }
    </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>
   <%
   //
遍歷輸出參數(shù)內容。
   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("
請求參數(shù) : " + h + " = " + mm);
   }
    %>
   </body>
</html>
/////////////////////////////////////////////////////////////////////////////////////

 

說明:

java.net.URLencode java.net.URLDecode 分別對應于 JavaScript 中的 encodeURI decodeURI encodeURIComponent decodeURIComponent.

 

為什么要連續(xù)兩次調用 encodeURI(String) 方法呢?是因為 Java 中的 request.getParameter(String) 方法會進行一次 URI 的解碼過程,調用時內置的解碼過程會導致亂碼出現(xiàn)。而 URI 編碼兩次后, request.getParameter(String) 函數(shù)得到的是原信息 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("
請求參數(shù) : " + 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 實現(xiàn) java 中的 URLencode URLdecode.

說明:

這種方法服務器端代碼不必修改。直接 request.getParameter() 來獲取就可以了。

 

JavaScript 中的 URLencode URLdecode 實現(xiàn)如下:

 

/////////////////////////////////////////////////////////////////////////////////////

(UrlEncodeUrlDecode_gecko.js) IE 實現(xiàn)方法如下:

完整代碼可到這里下載:

http://www.blueidea.com/user/qswh/qswhU2GB.js

/////////////////////////////////////////////////////////////////////////////////////

var qswhU2GB = […..]; // 此數(shù)組為 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 實現(xiàn)方法如下:

/////////////////////////////////////////////////////////////////////////////////////

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) 自動識別瀏覽器動態(tài)導入 JS/CSS

實現(xiàn)方法如下:

/////////////////////////////////////////////////////////////////////////////////////

/*

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 實現(xiàn)不亂碼,可以不用這三種方案,用這三種方案,只是迫不得已的做法。通常造成亂碼的原因有以下幾點:

1. xmlhttp  返回的數(shù)據默認的字符編碼是 utf-8 ,如果前臺頁面是 gb2312 或者其它編碼數(shù)據就會產生亂碼。

2. post 方法提交數(shù)據默認的字符編碼是 utf-8 ,如果后臺是 gb2312 或其他編碼數(shù)據就會產生亂碼。

 

解決方法:

 

­ 推薦方法:由于 Javascript 沿用 java 的字符處理方式,內部是使用 unicode 來處理所有字符的。 前臺后臺都用 utf-8 編碼,這樣可以省不少麻煩,從根本上解決了亂碼問題 . 優(yōu)點是效率高,而且符合目前的形式, utf-8 編碼本身就是一種比較優(yōu)秀的編碼,沒有語言限制 . 缺點只能調用自己的后臺編碼或者其他的 utf-8 的編碼。

 

前臺更改為

 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 

后臺 asp 中第一行加入如下代碼

span------君臨天下,舍我其誰------