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 主要用於文件上傳，可見：瀏覽器文件操作