js編碼處理(轉)

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=" 提交 " οnclick="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

實現方法如下：

Created by CAnca.2007.9.4

function LoadScript(url) {

document.write("<scr" + "ipt type=\"text/javascript\" src=\"" + url + "\" οnerrοr=\"alert('Error loading ' + this.src);\"></scr" + "ipt>");

}

function LoadCss(url) {

document.write("<link href=\"" + url + "\" type=\"text/css\" rel=\"stylesheet\" οnerrοr=\"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>

??????? 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 的編碼。