客户端js与服务端通过BASE64进行交互

某些场合，我们需要把服务端的内容通过BASE64编码后，输出到客户端后，在客户端通过JavaScript解码后还原该内容。

下面是一个示例：

 

客户端处理BASE64的JavaScript代码：

String.prototype.UTF16To8 = function() {
    var str = this;
    var ret = "", i, len, charCode;

    len = str.length;
    for (i = 0; i < len; i++) {
        charCode = str.charCodeAt(i);
        if ((charCode >= 0x0001) && (charCode <= 0x007F)) {
            ret += str.charAt(i);
        } else if (charCode > 0x07FF) {
            ret += String.fromCharCode(0xE0 | ((charCode >> 12) & 0x0F));
            ret += String.fromCharCode(0x80 | ((charCode >> 6) & 0x3F));
            ret += String.fromCharCode(0x80 | ((charCode >> 0) & 0x3F));
        } else {
            ret += String.fromCharCode(0xC0 | ((charCode >> 6) & 0x1F));
            ret += String.fromCharCode(0x80 | ((charCode >> 0) & 0x3F));
        }
    }
    return ret;
}

String.prototype.UTF8To16 = function() {
    var str = this;
    var ret = "", i = 0, len, charCode;
    var charCode2, charCode3;

    len = str.length;
    while (i < len) {
        charCode = str.charCodeAt(i++);
        switch (charCode >> 4) {
            case 0: case 1: case 2: case 3: case 4: case 5: case 6: case 7:
                ret += str.charAt(i - 1);
                break;
            case 12: case 13:
                charCode2 = str.charCodeAt(i++);
                ret += String.fromCharCode(((charCode & 0x1F) << 6) | (charCode2 & 0x3F));
                break;
            case 14:
                charCode2 = str.charCodeAt(i++);
                charCode3 = str.charCodeAt(i++);
                ret += String.fromCharCode(((charCode & 0x0F) << 12) | ((charCode2 & 0x3F) << 6) | ((charCode3 & 0x3F) << 0));
                break;
        }
    }

    return ret;
}

String.prototype.EncodeBase64 = function() {
    var str = this;
    str = str.UTF16To8();
    var base64EncodeChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";

    var ret="", i=0, len;
    var charCode1, charCode2, charCode3;
    
    len = str.length;
    while (i < len) {
        charCode1 = str.charCodeAt(i++) & 0xff;
        if (i == len) {
            ret += base64EncodeChars.charAt(charCode1 >> 2);
            ret += base64EncodeChars.charAt((charCode1 & 0x3) << 4);
            ret += "==";
            break;
        }
        charCode2 = str.charCodeAt(i++);
        if (i == len) {
            ret += base64EncodeChars.charAt(charCode1 >> 2);
            ret += base64EncodeChars.charAt(((charCode1 & 0x3) << 4) | ((charCode2 & 0xF0) >> 4));
            ret += base64EncodeChars.charAt((charCode2 & 0xF) << 2);
            ret += "=";
            break;
        }
        charCode3 = str.charCodeAt(i++);
        ret += base64EncodeChars.charAt(charCode1 >> 2);
        ret += base64EncodeChars.charAt(((charCode1 & 0x3) << 4) | ((charCode2 & 0xF0) >> 4));
        ret += base64EncodeChars.charAt(((charCode2 & 0xF) << 2) | ((charCode3 & 0xC0) >> 6));
        ret += base64EncodeChars.charAt(charCode3 & 0x3F);
    }
    return ret;
}

String.prototype.DecodeBase64 = function() {
    var str = this;
    str = str.UTF16To8();

    var base64DecodeChars = new Array(
    -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,
    -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,
    -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 62, -1, -1, -1, 63,
    52, 53, 54, 55, 56, 57, 58, 59, 60, 61, -1, -1, -1, -1, -1, -1,
    -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14,
    15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, -1, -1, -1, -1, -1,
    -1, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40,
    41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, -1, -1, -1, -1, -1);

    var charCode1, charCode2, charCode3, charCode4;
    var ret = "" ,i = 0, len;

    len = str.length;
    while (i < len) {
        do {
            charCode1 = base64DecodeChars[str.charCodeAt(i++) & 0xff];
        } while (i < len && charCode1 == -1);

        if (charCode1 == -1) break;

        do {
            charCode2 = base64DecodeChars[str.charCodeAt(i++) & 0xff];
        } while (i < len && charCode2 == -1);

        if (charCode2 == -1) break;

        ret += String.fromCharCode((charCode1 << 2) | ((charCode2 & 0x30) >> 4));

        do {
            charCode3 = str.charCodeAt(i++) & 0xff;
            if (charCode3 == 61) return ret;
            charCode3 = base64DecodeChars[charCode3];
        } while (i < len && charCode3 == -1);

        if (charCode3 == -1) break;

        ret += String.fromCharCode(((charCode2 & 0XF) << 4) | ((charCode3 & 0x3C) >> 2));

        do {
            charCode4 = str.charCodeAt(i++) & 0xff;
            if (charCode4 == 61) return ret;
            charCode4 = base64DecodeChars[charCode4];
        } while (i < len && charCode4 == -1);

        if (charCode4 == -1) break;

        ret += String.fromCharCode(((charCode3 & 0x03) << 6) | charCode4);
    }
    return ret;
}

 

服务端处理BASE64的类文件：

using System;
using System.Text;

namespace Rondi.Lucien.Common
{
    public class Base64Helper
    {

        public static string EncodeBase64(string code)
        {
            try
            {
                return Convert.ToBase64String(Encoding.UTF8.GetBytes(code));
            }
            catch
            {
                return code;
            }
        }

        public static string DecodeBase64(string code)
        {
            try
            {
                byte[] bytes = Convert.FromBase64String(code);
                return Encoding.UTF8.GetString(bytes);
            }
            catch
            {
                return code;
            }
        }
    }
}

 

进行展示的页面的aspx文件：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Base64Render.aspx.cs" Inherits="Base64Demo.Base64Render" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>测试BASE64编解码</title>

    <script src="js/Base64Helper.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="framdiv">
        <input id="Hidden1" runat="server" type="hidden" />
        <div id="divshow">
        </div>
    </div>
    </form>
    <script type="text/javascript" language="javascript">
        document.getElementById("divshow").innerHTML = document.getElementById("Hidden1").value.toString().DecodeBase64().UTF8To16();
    </script>
</body>
</html>

 

Base64Render.aspx对应的cs代码文件：

using System;

namespace Base64Demo
{
    public partial class Base64Render : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            //string strText = "国庆的记忆";
            //this.Hidden1.Value = Rondi.Lucien.Common.Base64Helper.EncodeBase64(strText);

            string strText = "5Zu95bqG55qE6K6w5b+G";
            this.Hidden1.Value = strText;

        }
    }
}

 

最后在页面输出的内容就是：国庆的记忆

 

ps:

服务端编解码代码示例：

using System;

namespace Base64Demo
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void btnSL_Click(object sender, EventArgs e)
        {
            this.txtSR.Text = Rondi.Lucien.Common.Base64Helper.EncodeBase64(this.txtSL.Text);
        }

        protected void btnSR_Click(object sender, EventArgs e)
        {
            this.txtSL.Text = Rondi.Lucien.Common.Base64Helper.DecodeBase64(this.txtSR.Text);
        }
    }
}

 

 

 

客户端编解码代码示例：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Base64Demo._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>测试BASE64编解码</title>
    <style type="text/css">
        table.solid
        {
            background-color: #808000;
        }
        table.solid td,table.solid th
        {
            background-color: White;
        }
        .txtcenter
        {
            text-align: center;
        }
        .btn
        {
            margin: 3px;
            display: block;
        }
    </style>

    <script src="js/Base64Helper.js" type="text/javascript"></script>

    <script type="text/javascript" language="javascript">
        function btnCL_Click() {
            document.getElementById("txtCR").value = document.getElementById("txtCL").value.toString().EncodeBase64();
        }
        function btnCR_Click() {
            document.getElementById("txtCL").value = document.getElementById("txtCR").value.toString().DecodeBase64().UTF8To16();
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table border="0" cellpadding="0" cellspacing="1" class="solid">
            <tr><th colspan="3">测试BASE64编解码</th></tr>
            <tr>
                <td style="width: 80px;">
                    &nbsp;
                </td>
                <td>
                    明文
                </td>
                <td>
                    码文
                </td>
            </tr>
            <tr>
                <td class="txtcenter">
                    服务端
                </td>
                <td>
                    <asp:TextBox ID="txtSL" runat="server" TextMode="MultiLine" Rows="4" Columns="40"></asp:TextBox>
                    <asp:Button ID="btnSL" runat="server" CssClass="btn" Text="编码" OnClick="btnSL_Click" />
                </td>
                <td>
                    <asp:TextBox ID="txtSR" runat="server" TextMode="MultiLine" Rows="4" Columns="40"></asp:TextBox>
                    <asp:Button ID="btnSR" runat="server" CssClass="btn" Text="解码" OnClick="btnSR_Click" />
                </td>
            </tr>
            <tr>
                <td class="txtcenter">
                    客户端
                </td>
                <td>
                    <textarea id="txtCL" cols="40" rows="4"></textarea>
                    <input id="btnCL" type="button" class="btn" value="编码" onclick="btnCL_Click();" />
                </td>
                <td>
                    <textarea id="txtCR" cols="40" rows="4"></textarea>
                    <input id="btnCR" type="button" class="btn" value="解码" onclick="btnCR_Click();" />
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>