JAVASCRIPT之ArrayBuffer初探
考虑到用JAVASCRIPT来接收和处理服务器传来的二进制数据,则可以提高速度和节省带宽。作了一些实验,总结如下:. 本例中var str模拟接收到的二进制原始数据,四字节。所以使用ArrayBuffer定义var bin作为二进制容器来进行转换。使用charCodeAt来读取str中的内码,使用Uint8Array对bin赋值。使用Uint16Array、Uint32Array来理解数据。用ajax获取服务器端的二进制数据,指定responseType为arraybuffer即可。困难在于提取其中的utf-8字符串。function ab2str(u,f) { //u 为arraybuffer, f为回调函数,接收转化后的数据。以上为事后总结,可能有些地方不准确。考虑到用JAVASCRIPT来接收和处理服务器传来的二进制数据,则可以提高速度和节省带宽。作了一些实验,总结如下:
本例中var str模拟接收到的二进制原始数据,四字节。如果直接处理会被当做普通字符串,显示乱码。
所以使用ArrayBuffer定义var bin作为二进制容器来进行转换。
使用charCodeAt来读取str中的内码,使用Uint8Array对bin赋值。
使用Uint16Array(相当于short)、Uint32Array(相当于long)来理解数据。
如果读取成两个short类型的整数就是0xffff,0x8080,它们的值用十进制显示出来是65536,32896。
如果读取成long就是0xffff8080,显示出来就是2155937791.
以上是最简单的例子,更多字节的二进制数据,增加数组长度即可。
获取arraybuffer的长度:
var binlen=bin.byteLength;
截取arraybuffer的部分:
var sub_bin=bin.slice(start,end);
还可以使用dataview来获取指定位置的数值:
var view=new DataView(bin);
var int32=view.getInt32(pos,4);
var int16=view.getInt16(pos,2);
var int8=view.getInt8(pos);
用ajax获取服务器端的二进制数据,指定responseType为arraybuffer即可。
xmlhttp.open("GET", Url,true);
xmlhttp.responseType = 'arraybuffer';
xmlhttp.onreadystatechange = Recieve;
xmlhttp.send(null);
接下来本人做了一个复杂一些的实验,服务器发送过来混合数据,包含单字节整数、4字节整数和utf-8中英文字符串。
困难在于提取其中的utf-8字符串。网上高手的办法,可以成功:
var bin_str=raw.slice(start,end);//raw为接收的混合数据
var carr=new Uint8Array(bin_str);
var cstr=String.fromCharCode.apply(null,carr);
var str=decodeURIComponent(escape(cstr));
如果原始二进制流是用utf16编码的话,处理起来会简单:
var str=String.fromCharCode.apply(null, new Uint16Array(buf));
还有大神用这种办法,使用Blob:
function ab2str(u,f) { //u 为arraybuffer, f为回调函数,接收转化后的数据
var b = new Blob();
var r = new FileReader();
r.readAsText(b, 'utf-8');
r.onload = function (){if(f)f.call(null,r.result)}
}
以上为事后总结,可能有些地方不准确。
页:
[1]