Sending and Receiving Binary Data
使用JavaScript类型数组接受二进制数据Edit
可以通过设置一个XMLHttpRequest对象的r
esponseType
属性来改变一个从服务器上返回的响应的数据类型.可用的属性值为空字符串 (默认), "arraybuffer", "blob", "document", 和 "text". r
esponse属性的值会根据
r
esponseType属性的值的不同而不同
, 可能会是一个 ArrayBuffer
, Blob
, Document
, string,或者为NULL(如果请求未完成或失败)
下例读取了一个二进制图像文件,并且由该文件的二进制原生字节创建了一个8位无符号整数的数组.
var oReq = new XMLHttpRequest();
oReq.open("GET", "/myfile.png", true);
oReq.responseType = "arraybuffer";
oReq.onload = function (oEvent) {
var arrayBuffer = oReq.response;
if (arrayBuffer) {
var byteArray = new Uint8Array(arrayBuffer);
for (var i = 0; i < byteArray.byteLength; i++) {
}
}
};
oReq.send(null);
除了上面的方法,还可以使用 BlobBuilder API 直接将arraybuffer数据添加进一个Blob对象中, 由于该API还在试验阶段,所以需要加上特定的前缀:
var BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder || window.MSBlobBuilder || window.BlobBuilder;
var oReq = new XMLHttpRequest();
oReq.open("GET", "/myfile.png", true);
oReq.responseType = "arraybuffer";
oReq.onload = function(oEvent) {
var blobBuilder = new BlobBuilder();
blobBuilder.append(oReq.response);
var blob = blobBuilder.getBlob("image/png");
};
oReq.send();
Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 给
XMLHttpRequest对象添加了一个私有的非标准属性mozResponseArrayBuffer
,在Gecko 6 (Firefox 6 / Thunderbird 6 / SeaMonkey 2.3)之后不应该再使用了.
在老的浏览器中接受二进制数据Edit
下面的load_binary_resource()方法
可以从指定的URL那里加载二进制数据,并将数据返回给调用者.
function load_binary_resource(url) {
var req = new XMLHttpRequest();
req.open('GET', url, false);
req.overrideMimeType('text/plain; charset=x-user-defined');
req.send(null);
if (req.status != 200) return '';
return req.responseText;
}
最为奇妙的操作在第五行,该行重写了默认的MIME类型,强制浏览器将该响应当成纯文本文件来对待, 使用一个用户自定义的字符集.这样就是告诉了浏览器,不要去解析数据,直接返回未处理过的字节码.
var filestream = load_binary_resource(url);
var abyte = filestream.charCodeAt(x) & 0xff;
上例从请求回来的二进制数据中得到偏移量为x处的字节.有效的偏移量范围是0到filestream.length-1
.
查看 使用XMLHttpRequest下载文件 了解详情,查看下载文件.
XMLHttpRequest对象的send方法
已被增强,可以通过简单的传入一个ArrayBuffer
, Blob
, 或者 File
对象来发送二进制数据.
下例创建了一个文本文件,并使用POST方法将该文件发送到了服务器上
.你也可以使用文本文件之外的其他二进制数据类型.
var oReq = new XMLHttpRequest();
oReq.open("POST", url, true);
oReq.onload = function (oEvent) {
};
var bb = new BlobBuilder();
bb.append('abc123');
oReq.send(bb.getBlob('text/plain'));
将类型数组作为二进制数据发送Edit
你可以将JavaScript类型数组作为二进制数据发送出去.
var myArray = new ArrayBuffer(512);
var longInt8View = new Uint8Array(myArray);
for (var i=0; i< longInt8View.length; i++) {
longInt8View[i] = i % 255;
}
var xhr = new XMLHttpRequest;
xhr.open("POST", url, false);
xhr.send(myArray);
上例新建了一个512字节的8位整数数组并发送它,当然,你也可以发送任意的二进制数据.
注意: 从Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6)开始,添加了使用XMLHttpRequest发送
ArrayBuffer
对象的功能.
Firefox私有方法Edit
下面的例子使用了POST
请求,用Firefox私有的非标准方法sendAsBinary()
将二进制数据以异步模式传输了出去.
var req = new XMLHttpRequest();
req.open("POST", url, true);
req.setRequestHeader("Content-Length", 741);
req.sendAsBinary(aBody);
第四行将Content-Length请求头设置为741,表示发送的数据长度为741个字节.你应该根据你要发送的数据的大小改变这个值.
第五行使用sendAsBinary()
方法发送这个请求.
你也可以通过将一个nsIFileInputStream
对象实例传给send()
方法来发送二进制内容,这样的话,你不需要自己去设置Content-Length请求头
的大小,程序会自动设置:
var stream = Components.classes["@mozilla.org/network/file-input-stream;1"]
.createInstance(Components.interfaces.nsIFileInputStream);
stream.init(file, 0x04 | 0x08, 0644, 0x04);
var mimeType = "text\/plain";
try {
var mimeService = Components.classes["@mozilla.org/mime;1"]
.getService(Components.interfaces.nsIMIMEService);
mimeType = mimeService.getTypeFromFile(file);
}
catch (oEvent) { }
var req = Components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"]
.createInstance(Components.interfaces.nsIXMLHttpRequest);
req.open('PUT', url, false);
req.setRequestHeader('Content-Type', mimeType);
req.send(stream);