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

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

下面是一个示例：

 

客户端处理BASE64的JavaScript代码：

代码：Base64Helper.js

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的类文件：

代码：Base64Helper.cs

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文件：

代码：Base64Render.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代码文件：

代码：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:

服务端编解码代码示例：

代码：Default.aspx.cs

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);
}
}
}

 

 

 

客户端编解码代码示例：

代码：Default.aspx

<% @ 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 >

 

 

 

转载于:https://www.cnblogs.com/lucienbao/archive/2010/10/15/javascript_base64.html