JavaScript Base64编码和解码,实现URL参数传递。


Posted in Javascript onSeptember 18, 2006

为什么需要对参数进行编码?相信有过开发的经验的广大程序员都知道,在Web中,若是直接在Url地址上传递参数值,若是中文,或者+等什么的就会出现乱码现象,若是数字或者英文的好象没有什么问题,简言之,传递过来的参数是需要进行编码的。
在这里,也许有人会说,为什么不直接用Server.UrlDecode和Server.UrlEncode这两个来进行编码和解码的操作呢?

的确,这两个服务器端对象很好使用,用起来也很方便,但是,若在客户端是HTML的Input,查询的时候页面是HTML或者其他的,反正不是.NET的,那这个对象还可以用吗?

我现在就遇到这样的问题,查询的东东放在页面,而且那个页面我根本不想让他是.aspx结尾的,哈,感觉HTML的挺不错,而且里面的控件也是用HTML对象的。

下面先来看两个函数,UTF16转UTF8和UTF8转Utf16的。
function utf16to8(str) {
    var out, i, len, c;

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

function utf8to16(str) {
    var out, i, len, c;
    var char2, char3;

    out = "";
    len = str.length;
    i = 0;
    while(i < len) {
 c = str.charCodeAt(i++);
 switch(c >> 4)
 {
   case 0: case 1: case 2: case 3: case 4: case 5: case 6: case 7:
     // 0xxxxxxx
     out += str.charAt(i-1);
     break;
   case 12: case 13:
     // 110x xxxx   10xx xxxx
     char2 = str.charCodeAt(i++);
     out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
     break;
   case 14:
     // 1110 xxxx  10xx xxxx  10xx xxxx
     char2 = str.charCodeAt(i++);
     char3 = str.charCodeAt(i++);
     out += String.fromCharCode(((c & 0x0F) << 12) |
        ((char2 & 0x3F) << 6) |
        ((char3 & 0x3F) << 0));
     break;
 }
    }

    return out;
}

那么为什么需要进行转化呢?因为在JavaScript中获得的中文字符是用UTF16进行编码的,和我们统一的页面标准格式UTF-8可不一样哦,所以需要先进行转化,上面的函数UTF-16到UTF8,然后再进行Base64的编码。

下面是关于Js进行Base64编码和解码的相关操作:

var base64EncodeChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
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);
//客户端Base64编码
function base64encode(str) {
    var out, i, len;
    var c1, c2, c3;

    len = str.length;
    i = 0;
    out = "";
    while(i < len) {
 c1 = str.charCodeAt(i++) & 0xff;
 if(i == len)
 {
     out += base64EncodeChars.charAt(c1 >> 2);
     out += base64EncodeChars.charAt((c1 & 0x3) << 4);
     out += "==";
     break;
 }
 c2 = str.charCodeAt(i++);
 if(i == len)
 {
     out += base64EncodeChars.charAt(c1 >> 2);
     out += base64EncodeChars.charAt(((c1 & 0x3)<< 4) | ((c2 & 0xF0) >> 4));
     out += base64EncodeChars.charAt((c2 & 0xF) << 2);
     out += "=";
     break;
 }
 c3 = str.charCodeAt(i++);
 out += base64EncodeChars.charAt(c1 >> 2);
 out += base64EncodeChars.charAt(((c1 & 0x3)<< 4) | ((c2 & 0xF0) >> 4));
 out += base64EncodeChars.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >>6));
 out += base64EncodeChars.charAt(c3 & 0x3F);
    }
    return out;
}
//客户端Base64解码
function base64decode(str) {
    var c1, c2, c3, c4;
    var i, len, out;

    len = str.length;
    i = 0;
    out = "";
    while(i < len) {
 /* c1 */
 do {
     c1 = base64DecodeChars[str.charCodeAt(i++) & 0xff];
 } while(i < len && c1 == -1);
 if(c1 == -1)
     break;

 /* c2 */
 do {
     c2 = base64DecodeChars[str.charCodeAt(i++) & 0xff];
 } while(i < len && c2 == -1);
 if(c2 == -1)
     break;

 out += String.fromCharCode((c1 << 2) | ((c2 & 0x30) >> 4));

 /* c3 */
 do {
     c3 = str.charCodeAt(i++) & 0xff;
     if(c3 == 61)
  return out;
     c3 = base64DecodeChars[c3];
 } while(i < len && c3 == -1);
 if(c3 == -1)
     break;

 out += String.fromCharCode(((c2 & 0XF) << 4) | ((c3 & 0x3C) >> 2));

 /* c4 */
 do {
     c4 = str.charCodeAt(i++) & 0xff;
     if(c4 == 61)
  return out;
     c4 = base64DecodeChars[c4];
 } while(i < len && c4 == -1);
 if(c4 == -1)
     break;
 out += String.fromCharCode(((c3 & 0x03) << 6) | c4);
    }
    return out;
}

这样传递过去的值就可以在服务器端解码操作了。
下面是C#的Base64加码和解码的相关类:
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

namespace CNVP.Base64
{
    /// <summary>
    /// MyBase64 的摘要说明
    /// </summary>
    public class MyBase64
    {
        public MyBase64()
        {
            //
            // TODO: 在此处添加构造函数逻辑
            //
        }
        /// <summary>
        /// 服务器端Base64编码
        /// </summary>
        /// <param name="data"></param>
        /// <returns></returns>
        public string base64Encode(string data)
        {
            try
            {
                byte[] encData_byte = new byte[data.Length];
                encData_byte = System.Text.Encoding.UTF8.GetBytes(data);
                string encodedData = Convert.ToBase64String(encData_byte);
                return encodedData;
            }
            catch (Exception e)
            {
                throw new Exception("Error in base64Encode" + e.Message);
            }
        }
        /// <summary>
        /// 服务器端Base64解码
        /// </summary>
        /// <param name="data"></param>
        /// <returns></returns>
        public string base64Decode(string data)
        {
            try
            {
                System.Text.UTF8Encoding encoder = new System.Text.UTF8Encoding();
                System.Text.Decoder utf8Decode = encoder.GetDecoder();
                byte[] todecode_byte = Convert.FromBase64String(data);
                int charCount = utf8Decode.GetCharCount(todecode_byte, 0, todecode_byte.Length);
                char[] decoded_char = new char[charCount];
                utf8Decode.GetChars(todecode_byte, 0, todecode_byte.Length, decoded_char, 0);
                string result = new String(decoded_char);
                return result;
            }
            catch (Exception e)
            {
                throw new Exception("Error in base64Decode" + e.Message);
            }
        }
    }
}


        var Keyword=base64encode(utf16to8(document.all.Keyword.value));
        Keyword=Keyword.replace("+","%2B");//替换+,否则在服务器解码的时候会出错

服务器端使用以下代码调用:
            CNVP.Base64.MyBase64 base64 = new CNVP.Base64.MyBase64();
            Keyword=base64.base64Decode(Keyword);

Javascript 相关文章推荐
做网页的一些技巧(续)
Feb 01 Javascript
用dom+xhtml+css制作的一个相册效果代码打包下载
Jan 24 Javascript
javascript获取鼠标点击元素对象(示例代码)
Dec 20 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 Javascript
javascript自定义滚动条实现代码
Apr 20 Javascript
Javascript的表单验证长度
Mar 16 Javascript
Bootstrap布局之栅格系统详解
Jun 13 Javascript
JavaScript实现换肤功能
Sep 15 Javascript
JavaScript实现打印星型金字塔功能实例分析
Sep 27 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
May 07 Javascript
原生js实现公告滚动效果
Jan 10 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
Oct 29 Javascript
JavaScript静态的动态
Sep 18 #Javascript
基于Web标准的UI组件 — 树状菜单(2)
Sep 18 #Javascript
JavaScript中的私有成员
Sep 18 #Javascript
javascript的事件描述
Sep 08 #Javascript
由浅到深了解JavaScript类
Sep 08 #Javascript
js常用函数 不错
Sep 08 #Javascript
Javascript 不能释放内存.
Sep 07 #Javascript
You might like
php时区转换转换函数
2014/01/07 PHP
php实现水仙花数的4个示例分享
2014/04/08 PHP
php parse_str() 函数的定义和用法
2016/05/23 PHP
PHP+Ajax异步带进度条上传文件实例
2016/11/01 PHP
PHP封装的验证码工具类定义与用法示例
2018/08/22 PHP
基于Laravel-admin 后台的自定义页面用法详解
2019/09/30 PHP
javascript实现二分查找法实现代码
2007/11/12 Javascript
var与Javascript变量隐式声明
2009/09/17 Javascript
JavaScript中各种编码解码函数的区别和注意事项
2010/08/19 Javascript
JavaScript中的bold()方法使用详解
2015/06/08 Javascript
javascript表单事件处理方法详解
2016/05/15 Javascript
javascript 广告移动特效的实现代码
2016/06/25 Javascript
JavaScript基础——使用Canvas绘图
2016/11/02 Javascript
微信小程序实现红包雨功能
2018/07/11 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
2019/01/05 jQuery
JS实现的贪吃蛇游戏完整实例
2019/01/18 Javascript
微信小程序实现左滑动删除效果
2020/03/30 Javascript
原生js代码能实现call和bind吗
2019/07/31 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
解决layui的input独占一行的问题
2019/09/10 Javascript
详解ES6实现类的私有变量的几种写法
2021/02/10 Javascript
python的类变量和成员变量用法实例教程
2014/08/25 Python
Python3 socket同步通信简单示例
2017/06/07 Python
Python常用爬虫代码总结方便查询
2019/02/25 Python
Python如何爬取实时变化的WebSocket数据的方法
2019/03/09 Python
Python虚拟环境的原理及使用详解
2019/07/02 Python
python字符串的index和find的区别详解
2020/06/20 Python
Python进行特征提取的示例代码
2020/10/15 Python
恒华伟业笔试面试题
2015/02/26 面试题
高中生评语大全
2014/04/25 职场文书
党员民主生活会整改措施
2014/09/26 职场文书
2014年社区个人工作总结
2014/12/02 职场文书
教师节获奖感言
2015/07/31 职场文书
JPA如何使用entityManager执行SQL并指定返回类型
2021/06/15 Java/Android
Redis Cluster集群动态扩容的实现
2021/07/15 Redis
MongoDB数据库部署环境准备及使用介绍
2022/03/21 MongoDB