借助了掌淘科技免费提供的 用户系统 API 和 K-V 数据存储API,实现用注册、登陆、个人信息增删改查等功能



说一下需求。我的壁纸网站需要升级一个云同步功能,同步用户收藏的图片信息。但是我的服务器后台由于配置等原因实在无力去实现这套功能。

那么无意中看到一个第三方API居然可以免费实现用户系统的功能。。。那么就稍微花了一丢丢时间,实现了一个围绕这个api的纯前端的demo。

另外还用到了2个纯前端的 md5 加密 和 base64 加密解密的js,代码一起贴在后面了。

 

使用了多个第三方接口,包括

掌淘科技提供的 用户系统 APIK-V 数据存储API

http://api.mob.com/product/api/detail/12

http://api.mob.com/product/api/detail/32

使用前需要去他们官网注册一个mod key 网址 http://reg.mob.com 

在此需要感谢一下 掌淘科技 http://www.mob.com 提供的非常强大的免费API


用户系统 API  官方说明如下

 

但是他的用户资料和用户数据都需要token,而实际测试发现每次登陆后token只能用一次就过期了,或者说第二次开始很大几率返回error

所以信息的增删改查使用另一个api实现  K-V 数据存储API 官方说明如下

 

首先说明一下,mob提供的接口,大部分都是针对安卓或者IOS上的APP或者小程序去设计的SDK。

但是!实际当中MOB API里的API都是通过HTTP GET方式请求的

所以前后端其实都可以实现,只是前端实现坑稍微多了一点

比如

直接用ajax调用会报错:No 'Access-Control-Allow-Origin' header 因为跨域了

那么如果不信邪非要用怎么办呢?

我的解决方案是用ajax jsonp来跨域

还是报错 Uncaught SyntaxError: Unexpected token : 因为用 jsoup不支持 返回 json 数据

那么如果不信邪非要用怎么办呢?

用yahoo提供的jsoup转json api可以实现 https://developer.yahoo.com/yql/?guccounter=1

(需要注意的是!这种实现方法显然是极不安全的!)


基本上就是这些,后面直接贴demo代码。

注意text.html里面的var key = ''; 需要填入你申请的mob的apikey,如果没有可以去免费申请一个 reg.mob.com

 

OK、那么直接上代码

text.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>test</title>
  6. </head>
  7. <body>
  8. <input type="text" name="username" id='username'><input type="password" name="password" id="password">
  9. <button id="login">登陆</button><button id="reg">注册</button>
  10. <input type="text" name="text" id="item"><input type="text" name="text" id="value">
  11. <button id='put' disabled="true">put</button>
  12. <button id='query' disabled="true">query</button>
  13. <button id='clear'>clear</button>
  14. <span id="msg">未登录</span>
  15. <br>
  16. <span id="span"></span>
  17.  
  18. <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  19. <script type="text/javascript" src="md5.js"></script>
  20. <script type="text/javascript" src="base64.js"></script>
  21. <script type="text/javascript">
  22. var key = '';//mod key 需要你自己去免费注册一个appkey 网址reg.mob.com
  23. var yql = 'http://query.yahooapis.com/v1/public/yql';//yahoo jsonp2json
  24. var times = 10;
  25. var uid = '';
  26. var token = '';
  27. var base = new Base64();
  28. $(function(){
  29. var username = localStorage.getItem("username");
  30. var password = localStorage.getItem("password");
  31. if(username && password){
  32. login(username,password);
  33. initToken();
  34. }
  35. $('#reg').on('click',function(){
  36. //这里的邮箱只是mob为了防止重复注册用的,没有任何功能,但一个邮箱只能注册一次
  37. rigister($('#username').val(),$('#password').val(),'666@123.cn');
  38. });
  39. $('#login').on('click',function(){
  40. login($('#username').val(),$('#password').val());
  41. initToken();
  42. });
  43. $('#put').on('click',function(){
  44. var item = $('#item').val();
  45. var value = $('#value').val();
  46. // put(uid,token,item,value);
  47. kvPut(uid,item,value);
  48. });
  49. $('#query').on('click',function(){
  50. var item = $('#item').val();
  51. // query(uid,item);
  52. kvGet(uid,item);
  53. });
  54. $('#clear').on('click',function(){
  55. $('#span').text('');
  56. });
  57. //rigister('tczmh2', '123456','123@123.cn');
  58. // login('tczmh2','123456');
  59. });
  60.  
  61. function kvPut(uid,k,v){
  62. = base.encode(k);
  63. = base.encode(v);
  64. var url  = "http://apicloud.mob.com/ucache/put";
  65. var query = 'select * from json where url="' + url + '?'
  66.            + 'key=' + key + '&'
  67.             + 'table=' + uid + '&'
  68.             + 'k=' + k + '&'
  69.             + 'v=' + v
  70.             +'"';
  71. show(query);
  72. $.ajax({
  73. url:yql,
  74. type:'get',
  75.        dataType: 'jsonp',
  76.        cache: false,
  77.        data: {
  78.            q: query,
  79.            format: 'json'
  80.        },
  81. success:function(data){
  82. var json = data.query.results.json;
  83. show(json.retCode);
  84. show(json.msg);
  85. }
  86. });
  87. }
  88. function kvGet(uid,k){
  89. = base.encode(k);
  90. var url  = "http://apicloud.mob.com/ucache/get";
  91. var query = 'select * from json where url="' + url + '?'
  92.            + 'key=' + key + '&'
  93.             + 'table=' + uid + '&'
  94.             + 'k=' + k
  95.             +'"';
  96. show(query);
  97. $.ajax({
  98. url:yql,
  99. type:'get',
  100.        dataType: 'jsonp',
  101.        cache: false,
  102.        data: {
  103.            q: query,
  104.            format: 'json'
  105.        },
  106. success:function(data){
  107. var json = data.query.results.json;
  108. show(json.retCode);
  109. show(json.msg);
  110. show(json.result.k);
  111. show(json.result.v);
  112. }
  113. });
  114. }
  115. /** 跟在登陆以后执行,因为登陆是异步操作,这里每秒1次共10次获取sessionStorage中的uid和token */
  116. function initToken(){
  117. uid = sessionStorage.getItem("uid");
  118. token = sessionStorage.getItem("token");
  119. if(times > 0){
  120. if(!uid || !token){
  121. times --;
  122. setTimeout('initToken()', 1000);
  123. show('initToken 不成功 '+times);
  124. }else{
  125. show('initToken 成功 '+times);
  126. show(uid);
  127. show(token);
  128. $('#put').attr('disabled',false);
  129. $('#query').attr('disabled',false);
  130. }
  131. }else{
  132. show('initToken超时');
  133. }
  134. }
  135. /** 登陆 */
  136. function login(username, password){
  137. var hash = hex_md5(password);
  138. var url  = "http://apicloud.mob.com/user/login";
  139. var query = 'select * from json where url="' + url + '?'
  140.             + 'key=' + key + '&'
  141.             + 'username=' + username + '&'
  142.             + 'password=' + hash
  143.             +'"';
  144.     show(query);
  145. $.ajax({
  146. url:yql,
  147. type:'get',
  148.         dataType: 'jsonp',
  149.         cache: false,
  150.         data: {
  151.             q: query,
  152.             format: 'json'
  153.         },
  154. success:function(data){
  155. var json = data.query.results.json;
  156. show(json.retCode);
  157. show(json.msg);
  158. // 异步存入 sessionStorage
  159. sessionStorage.setItem("uid", json.result.uid);
  160. sessionStorage.setItem("token", json.result.token);
  161. // 长期保存用户名密码,可以用来自动登陆
  162. localStorage.setItem("username",username);
  163. localStorage.setItem("password",password);
  164. $('#msg').text('已登录');
  165. }
  166. });
  167. }
  168. /** 注册 */
  169. function rigister(username, password, email){
  170. var hash = hex_md5(password);
  171. var url  = "http://apicloud.mob.com/user/rigister";
  172. var query = 'select * from json where url="' + url + '?'
  173.             + 'key=' + key + '&'
  174.             + 'username=' + username + '&'
  175.             + 'password=' + hash + '&'
  176.             + 'email=' + email
  177.             +'"';
  178.     show(query);
  179. $.ajax({
  180. url:yql,
  181. type:'get',
  182.         dataType: 'jsonp',
  183.         cache: false,
  184.         data: {
  185.             q: query,
  186.             format: 'json'
  187.         },
  188. success:function(data){
  189. var json = data.query.results.json;
  190. show(json.retCode);//状态码 200为正常 其余有错
  191. show(json.msg);//success为正常 其余为错误信息
  192. show(json.result);//uid
  193. }
  194. });
  195. }
  196. function show(msg){
  197. $('#span').append(msg+'<br>--------------------------<br>');
  198. }
  199. </script>
  200. </body>
  201. </html>

md5.js

  1. /*
  2.  * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message
  3.  * Digest Algorithm, as defined in RFC 1321.
  4.  * Version 2.1 Copyright (C) Paul Johnston 1999 - 2002.
  5.  * Other contributors: Greg Holt, Andrew Kepert, Ydnar, Lostinet
  6.  * Distributed under the BSD License
  7.  * See http://pajhome.org.uk/crypt/md5 for more info.
  8.  */
  9.  
  10. /*
  11.  * Configurable variables. You may need to tweak these to be compatible with
  12.  * the server-side, but the defaults work in most cases.
  13.  */
  14. var hexcase = 0;  /* hex output format. 0 - lowercase; 1 - uppercase        */
  15. var b64pad  = ""; /* base-64 pad character. "=" for strict RFC compliance   */
  16. var chrsz   = 8;  /* bits per input character. 8 - ASCII; 16 - Unicode      */
  17.  
  18. /*
  19.  * These are the functions you'll usually want to call
  20.  * They take string arguments and return either hex or base-64 encoded strings
  21.  */
  22. function hex_md5(s){ return binl2hex(core_md5(str2binl(s), s.length * chrsz));}
  23. function b64_md5(s){ return binl2b64(core_md5(str2binl(s), s.length * chrsz));}
  24. function str_md5(s){ return binl2str(core_md5(str2binl(s), s.length * chrsz));}
  25. function hex_hmac_md5(key, data) { return binl2hex(core_hmac_md5(key, data)); }
  26. function b64_hmac_md5(key, data) { return binl2b64(core_hmac_md5(key, data)); }
  27. function str_hmac_md5(key, data) { return binl2str(core_hmac_md5(key, data)); }
  28.  
  29. /*
  30.  * Perform a simple self-test to see if the VM is working
  31.  */
  32. function md5_vm_test()
  33. {
  34.   return hex_md5("abc") == "900150983cd24fb0d6963f7d28e17f72";
  35. }
  36.  
  37. /*
  38.  * Calculate the MD5 of an array of little-endian words, and a bit length
  39.  */
  40. function core_md5(x, len)
  41. {
  42.   /* append padding */
  43.   x[len >> 5] |= 0x80 << ((len) % 32);
  44.   x[(((len + 64) >>> 9) << 4) + 14] = len;
  45.  
  46.   var a =  1732584193;
  47.   var b = -271733879;
  48.   var c = -1732584194;
  49.   var d =  271733878;
  50.  
  51.   for(var i = 0; i < x.length; i += 16)
  52.   {
  53.     var olda = a;
  54.     var oldb = b;
  55.     var oldc = c;
  56.     var oldd = d;
  57.  
  58.     a = md5_ff(a, b, c, d, x[i+ 0], 7 , -680876936);
  59.     d = md5_ff(d, a, b, c, x[i+ 1], 12, -389564586);
  60.     c = md5_ff(c, d, a, b, x[i+ 2], 17,  606105819);
  61.     b = md5_ff(b, c, d, a, x[i+ 3], 22, -1044525330);
  62.     a = md5_ff(a, b, c, d, x[i+ 4], 7 , -176418897);
  63.     d = md5_ff(d, a, b, c, x[i+ 5], 12,  1200080426);
  64.     c = md5_ff(c, d, a, b, x[i+ 6], 17, -1473231341);
  65.     b = md5_ff(b, c, d, a, x[i+ 7], 22, -45705983);
  66.     a = md5_ff(a, b, c, d, x[i+ 8], 7 ,  1770035416);
  67.     d = md5_ff(d, a, b, c, x[i+ 9], 12, -1958414417);
  68.     c = md5_ff(c, d, a, b, x[i+10], 17, -42063);
  69.     b = md5_ff(b, c, d, a, x[i+11], 22, -1990404162);
  70.     a = md5_ff(a, b, c, d, x[i+12], 7 ,  1804603682);
  71.     d = md5_ff(d, a, b, c, x[i+13], 12, -40341101);
  72.     c = md5_ff(c, d, a, b, x[i+14], 17, -1502002290);
  73.     b = md5_ff(b, c, d, a, x[i+15], 22,  1236535329);
  74.  
  75.     a = md5_gg(a, b, c, d, x[i+ 1], 5 , -165796510);
  76.     d = md5_gg(d, a, b, c, x[i+ 6], 9 , -1069501632);
  77.     c = md5_gg(c, d, a, b, x[i+11], 14,  643717713);
  78.     b = md5_gg(b, c, d, a, x[i+ 0], 20, -373897302);
  79.     a = md5_gg(a, b, c, d, x[i+ 5], 5 , -701558691);
  80.     d = md5_gg(d, a, b, c, x[i+10], 9 ,  38016083);
  81.     c = md5_gg(c, d, a, b, x[i+15], 14, -660478335);
  82.     b = md5_gg(b, c, d, a, x[i+ 4], 20, -405537848);
  83.     a = md5_gg(a, b, c, d, x[i+ 9], 5 ,  568446438);
  84.     d = md5_gg(d, a, b, c, x[i+14], 9 , -1019803690);
  85.     c = md5_gg(c, d, a, b, x[i+ 3], 14, -187363961);
  86.     b = md5_gg(b, c, d, a, x[i+ 8], 20,  1163531501);
  87.     a = md5_gg(a, b, c, d, x[i+13], 5 , -1444681467);
  88.     d = md5_gg(d, a, b, c, x[i+ 2], 9 , -51403784);
  89.     c = md5_gg(c, d, a, b, x[i+ 7], 14,  1735328473);
  90.     b = md5_gg(b, c, d, a, x[i+12], 20, -1926607734);
  91.  
  92.     a = md5_hh(a, b, c, d, x[i+ 5], 4 , -378558);
  93.     d = md5_hh(d, a, b, c, x[i+ 8], 11, -2022574463);
  94.     c = md5_hh(c, d, a, b, x[i+11], 16,  1839030562);
  95.     b = md5_hh(b, c, d, a, x[i+14], 23, -35309556);
  96.     a = md5_hh(a, b, c, d, x[i+ 1], 4 , -1530992060);
  97.     d = md5_hh(d, a, b, c, x[i+ 4], 11,  1272893353);
  98.     c = md5_hh(c, d, a, b, x[i+ 7], 16, -155497632);
  99.     b = md5_hh(b, c, d, a, x[i+10], 23, -1094730640);
  100.     a = md5_hh(a, b, c, d, x[i+13], 4 ,  681279174);
  101.     d = md5_hh(d, a, b, c, x[i+ 0], 11, -358537222);
  102.     c = md5_hh(c, d, a, b, x[i+ 3], 16, -722521979);
  103.     b = md5_hh(b, c, d, a, x[i+ 6], 23,  76029189);
  104.     a = md5_hh(a, b, c, d, x[i+ 9], 4 , -640364487);
  105.     d = md5_hh(d, a, b, c, x[i+12], 11, -421815835);
  106.     c = md5_hh(c, d, a, b, x[i+15], 16,  530742520);
  107.     b = md5_hh(b, c, d, a, x[i+ 2], 23, -995338651);
  108.  
  109.     a = md5_ii(a, b, c, d, x[i+ 0], 6 , -198630844);
  110.     d = md5_ii(d, a, b, c, x[i+ 7], 10,  1126891415);
  111.     c = md5_ii(c, d, a, b, x[i+14], 15, -1416354905);
  112.     b = md5_ii(b, c, d, a, x[i+ 5], 21, -57434055);
  113.     a = md5_ii(a, b, c, d, x[i+12], 6 ,  1700485571);
  114.     d = md5_ii(d, a, b, c, x[i+ 3], 10, -1894986606);
  115.     c = md5_ii(c, d, a, b, x[i+10], 15, -1051523);
  116.     b = md5_ii(b, c, d, a, x[i+ 1], 21, -2054922799);
  117.     a = md5_ii(a, b, c, d, x[i+ 8], 6 ,  1873313359);
  118.     d = md5_ii(d, a, b, c, x[i+15], 10, -30611744);
  119.     c = md5_ii(c, d, a, b, x[i+ 6], 15, -1560198380);
  120.     b = md5_ii(b, c, d, a, x[i+13], 21,  1309151649);
  121.     a = md5_ii(a, b, c, d, x[i+ 4], 6 , -145523070);
  122.     d = md5_ii(d, a, b, c, x[i+11], 10, -1120210379);
  123.     c = md5_ii(c, d, a, b, x[i+ 2], 15,  718787259);
  124.     b = md5_ii(b, c, d, a, x[i+ 9], 21, -343485551);
  125.  
  126.     a = safe_add(a, olda);
  127.     b = safe_add(b, oldb);
  128.     c = safe_add(c, oldc);
  129.     d = safe_add(d, oldd);
  130.   }
  131.   return Array(a, b, c, d);
  132.  
  133. }
  134.  
  135. /*
  136.  * These functions implement the four basic operations the algorithm uses.
  137.  */
  138. function md5_cmn(q, a, b, x, s, t)
  139. {
  140.   return safe_add(bit_rol(safe_add(safe_add(a, q), safe_add(x, t)), s),b);
  141. }
  142. function md5_ff(a, b, c, d, x, s, t)
  143. {
  144.   return md5_cmn((& c) | ((~b) & d), a, b, x, s, t);
  145. }
  146. function md5_gg(a, b, c, d, x, s, t)
  147. {
  148.   return md5_cmn((& d) | (& (~d)), a, b, x, s, t);
  149. }
  150. function md5_hh(a, b, c, d, x, s, t)
  151. {
  152.   return md5_cmn(^ c ^ d, a, b, x, s, t);
  153. }
  154. function md5_ii(a, b, c, d, x, s, t)
  155. {
  156.   return md5_cmn(^ (| (~d)), a, b, x, s, t);
  157. }
  158.  
  159. /*
  160.  * Calculate the HMAC-MD5, of a key and some data
  161.  */
  162. function core_hmac_md5(key, data)
  163. {
  164.   var bkey = str2binl(key);
  165.   if(bkey.length > 16) bkey = core_md5(bkey, key.length * chrsz);
  166.  
  167.   var ipad = Array(16), opad = Array(16);
  168.   for(var i = 0; i < 16; i++)
  169.   {
  170.     ipad[i] = bkey[i] ^ 0x36363636;
  171.     opad[i] = bkey[i] ^ 0x5C5C5C5C;
  172.   }
  173.  
  174.   var hash = core_md5(ipad.concat(str2binl(data)), 512 + data.length * chrsz);
  175.   return core_md5(opad.concat(hash), 512 + 128);
  176. }
  177.  
  178. /*
  179.  * Add integers, wrapping at 2^32. This uses 16-bit operations internally
  180.  * to work around bugs in some JS interpreters.
  181.  */
  182. function safe_add(x, y)
  183. {
  184.   var lsw = (& 0xFFFF) + (& 0xFFFF);
  185.   var msw = (>> 16) + (>> 16) + (lsw >> 16);
  186.   return (msw << 16) | (lsw & 0xFFFF);
  187. }
  188.  
  189. /*
  190.  * Bitwise rotate a 32-bit number to the left.
  191.  */
  192. function bit_rol(num, cnt)
  193. {
  194.   return (num << cnt) | (num >>> (32 - cnt));
  195. }
  196.  
  197. /*
  198.  * Convert a string to an array of little-endian words
  199.  * If chrsz is ASCII, characters >255 have their hi-byte silently ignored.
  200.  */
  201. function str2binl(str)
  202. {
  203.   var bin = Array();
  204.   var mask = (1 << chrsz) - 1;
  205.   for(var i = 0; i < str.length * chrsz; i += chrsz)
  206.     bin[i>>5] |= (str.charCodeAt(/ chrsz) & mask) << (i%32);
  207.   return bin;
  208. }
  209.  
  210. /*
  211.  * Convert an array of little-endian words to a string
  212.  */
  213. function binl2str(bin)
  214. {
  215.   var str = "";
  216.   var mask = (1 << chrsz) - 1;
  217.   for(var i = 0; i < bin.length * 32; i += chrsz)
  218.     str += String.fromCharCode((bin[i>>5] >>> (% 32)) & mask);
  219.   return str;
  220. }
  221.  
  222. /*
  223.  * Convert an array of little-endian words to a hex string.
  224.  */
  225. function binl2hex(binarray)
  226. {
  227.   var hex_tab = hexcase ? "0123456789ABCDEF" : "0123456789abcdef";
  228.   var str = "";
  229.   for(var i = 0; i < binarray.length * 4; i++)
  230.   {
  231.     str += hex_tab.charAt((binarray[i>>] >> ((i%4)*8+4)) & 0xF) +
  232.            hex_tab.charAt((binarray[i>>2] >> ((i%4)*8  )) & 0xF);
  233.   }
  234.   return str;
  235. }
  236.  
  237. /*
  238.  * Convert an array of little-endian words to a base-64 string
  239.  */
  240. function binl2b64(binarray)
  241. {
  242.   var tab = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
  243.   var str = "";
  244.   for(var i = 0; i < binarray.length * 4; i += 3)
  245.   {
  246.     var triplet = (((binarray[i   >> 2] >> 8 * ( i   %4)) & 0xFF) << 16)
  247.                 | (((binarray[i+1 >> 2] >> 8 * ((i+1)%4)) & 0xFF) << 8 )
  248.                 |  ((binarray[i+2 >> 2] >> 8 * ((i+2)%4)) & 0xFF);
  249.     for(var j = 0; j < 4; j++)
  250.     {
  251.       if(* 8 + j * 6 > binarray.length * 32) str += b64pad;
  252.       else str += tab.charAt((triplet >> 6*(3-j)) & 0x3F);
  253.     }
  254.   }
  255.   return str;
  256. }

base64.js

  1. function Base64() {  
  2.     // private property  
  3.     _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";  
  4.     // public method for encoding  
  5.     this.encode = function (input) {  
  6.         var output = "";  
  7.         var chr1, chr2, chr3, enc1, enc2, enc3, enc4;  
  8.         var i = 0;  
  9.         input = _utf8_encode(input);  
  10.         while (< input.length) {  
  11.             chr1 = input.charCodeAt(i++);  
  12.             chr2 = input.charCodeAt(i++);  
  13.             chr3 = input.charCodeAt(i++);  
  14.             enc1 = chr1 >> 2;  
  15.             enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);  
  16.             enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);  
  17.             enc4 = chr3 & 63;  
  18.             if (isNaN(chr2)) {  
  19.                 enc3 = enc4 = 64;  
  20.             } else if (isNaN(chr3)) {  
  21.                 enc4 = 64;  
  22.             }  
  23.             output = output +  
  24.             _keyStr.charAt(enc1) + _keyStr.charAt(enc2) +  
  25.             _keyStr.charAt(enc3) + _keyStr.charAt(enc4);  
  26.         }  
  27.         return output;  
  28.     }  
  29.     // public method for decoding  
  30.     this.decode = function (input) {  
  31.         var output = "";  
  32.         var chr1, chr2, chr3;  
  33.         var enc1, enc2, enc3, enc4;  
  34.         var i = 0;  
  35.         input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");  
  36.         while (< input.length) {  
  37.             enc1 = _keyStr.indexOf(input.charAt(i++));  
  38.             enc2 = _keyStr.indexOf(input.charAt(i++));  
  39.             enc3 = _keyStr.indexOf(input.charAt(i++));  
  40.             enc4 = _keyStr.indexOf(input.charAt(i++));  
  41.             chr1 = (enc1 << 2) | (enc2 >> 4);  
  42.             chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);  
  43.             chr3 = ((enc3 & 3) << 6) | enc4;  
  44.             output = output + String.fromCharCode(chr1);  
  45.             if (enc3 != 64) {  
  46.                 output = output + String.fromCharCode(chr2);  
  47.             }  
  48.             if (enc4 != 64) {  
  49.                 output = output + String.fromCharCode(chr3);  
  50.             }  
  51.         }  
  52.         output = _utf8_decode(output);  
  53.         return output;  
  54.     }  
  55.     // private method for UTF-8 encoding  
  56.     _utf8_encode = function (string) {  
  57.         string = string.replace(/\r\n/g,"\n");  
  58.         var utftext = "";  
  59.         for (var n = 0; n < string.length; n++) {  
  60.             var c = string.charCodeAt(n);  
  61.             if (< 128) {  
  62.                 utftext += String.fromCharCode(c);  
  63.             } else if((> 127) && (< 2048)) {  
  64.                 utftext += String.fromCharCode((>> 6) | 192);  
  65.                 utftext += String.fromCharCode((& 63) | 128);  
  66.             } else {  
  67.                 utftext += String.fromCharCode((>> 12) | 224);  
  68.                 utftext += String.fromCharCode(((>> 6) & 63) | 128);  
  69.                 utftext += String.fromCharCode((& 63) | 128);  
  70.             }  
  71.  
  72.         }  
  73.         return utftext;  
  74.     } 
  75.     // private method for UTF-8 decoding  
  76.     _utf8_decode = function (utftext) {  
  77.         var string = "";  
  78.         var i = 0;  
  79.         var c = c1 = c2 = 0;  
  80.         while ( i < utftext.length ) {  
  81.             c = utftext.charCodeAt(i);  
  82.             if (< 128) {  
  83.                 string += String.fromCharCode(c);  
  84.                 i++;  
  85.             } else if((> 191) && (< 224)) {  
  86.                 c2 = utftext.charCodeAt(i+1);  
  87.                 string += String.fromCharCode(((& 31) << 6) | (c2 & 63));  
  88.                 i += 2;  
  89.             } else {  
  90.                 c2 = utftext.charCodeAt(i+1);  
  91.                 c3 = utftext.charCodeAt(i+2);  
  92.                 string += String.fromCharCode(((& 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));  
  93.                 i += 3;  
  94.             }  
  95.         }  
  96.         return string;  
  97.     }  
  98. }

 

 测试入口test.html 效果如下图