xhr 二进制操作

XMLHttpRequest 最常用到的功能就是文本操作以及 xml 处理，但其实 xhr 还可用来对二进制进行直接操作，例如比较强悍的 linux in js .

 

 

1. responseText 方式读取

 

1.1 服务器干涉的全平台兼容

 

根据 xmlhttprequest w3 规范 ，对于返回体的处理会根据 charset 来decode 字节得到对应字符串，如果我们想要得到返回的二进制字节，就需要服务器端设置contentType text/plain ;charset 为 iso8859-1 （一个字节表示一个字符）再使用 charCodeAt(0) 来得到字符对应的字节表示。

 

服务器端：

 

public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/plain;charset=ios8859-1");
		byte[] b= new byte[3];
		b[0]=8;
		b[1]=4;
		b[2]=2;
		response.getOutputStream().write(b);
	}

 

客户端：

 

var req = new XMLHttpRequest();
req.open('GET', '/binary', true);
req.onreadystatechange = function (aEvt) {
    if (req.readyState == 4) {
        if (req.status == 200) {
            var content = (req.responseText);
            console.log(content.length);
            alert("第一个字节 : " + (content.charCodeAt(0) & 0xff).toString(2));
            alert("第二个字节 : " + (content.charCodeAt(1) & 0xff).toString(2));
            alert("倒数第二个字节 : " + (content.charCodeAt(content.length - 2) & 0xff).toString(2));
            alert("最后一个字节 : " + (content.charCodeAt(content.length - 1) & 0xff).toString(2));
        }

    }
};
req.send(null);

 

1.2 overrideMimeType

 

但这需要服务器端程序读取二进制文件并设置content-type为text/plain,charset 为 iso8859-1 ，常见的场景是直接由web server 返回二进制文件，这时头为 application/octet-stream ，如果按照规范，则会经过 utf-8 decode 为对应字符串，这时 charCode 是得不到对应原始二进制的，不过还好规范还支持客户端 overrideMimeType ，可以指定decode 方式，目前除了 ie 都支持

 

 

var req = new XMLHttpRequest();
req.open('GET', 'linuxstart.bin', true);
// XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com]
if (req.overrideMimeType) {    
    req.overrideMimeType('text/plain; charset=iso8859-1');
}
req.onreadystatechange = function (aEvt) {
    if (req.readyState == 4) {
        if (req.status == 200) {
            var content = (req.responseText);
            console.log(content.length);
            alert("第一个字节 : " + (content.charCodeAt(0) & 0xff).toString(2));
            alert("第二个字节 : " + (content.charCodeAt(1) & 0xff).toString(2));
            alert("倒数第二个字节 : " + (content.charCodeAt(content.length - 2) & 0xff).toString(2));
            alert("最后一个字节 : " + (content.charCodeAt(content.length - 1) & 0xff).toString(2));
        }

    }
};
req.send(null);

  2.直接读取二进制流

 

 

最新的 firefox 和 chrome 则提供了直接读取二进制数据的方式，这就涉及到了两个概念：

 

ArrayBuffer :

 

代表一段内存bytes数据，但是不可读。

 

Uint8Array :

 

ArrayBuffer 的读取接口（view），表示把 ArrayBuffer 的每 8 个字节类型化为成一个整数，类似还有 Uint32Array

 

 

firefox ，chrome 会通过 xhr.response 暴漏response  ArrayBuffer 类型的原始字节，程序可通过 Uint8Array 来读取每一个字节代表的整数信息。

 

该种方式则和 charset 以及 mimeType 完全没有关系了，但是还没有形成规范 :

 

var xhr = new XMLHttpRequest();
            xhr.open("GET", "/upload/binary", false);
            xhr.responseType = "arraybuffer";
            xhr.send(null);
            // no support for w3 xhr.responseBlob
            var buffer = xhr.responseBlob || xhr.response || xhr.mozResponseArrayBuffer;
            if (buffer) {
                var byteArray = new Uint8Array(buffer);
                console.log(byteArray.byteLength);
                alert("第一个字节 : " + byteArray[0].toString(2));
                alert("第二个字节 : " + byteArray[1].toString(2));
                alert("倒数第二个字节 : " + byteArray[byteArray.byteLength - 2].toString(2));
                alert("最后一个字节 : " + byteArray[byteArray.byteLength - 1].toString(2));
            }

 

 

3. 二进制数据写入

 

关于二进制数据写入传回 server 主要用于文件上传，可见：浏览器文件操作