Ajax二进制响应

Question

嗨,我想知道是否还有在AJAX中流式传输二进制响应？这将是一个终极解决方案,否则我需要将二进制映像实现为文件,然后使用不同的URL将该文件流式传输给用户.

new Ajax.Request('/viewImage?id=123', {
  // request returns a binary image inputstream
  onSuccess: function(transport) {
      // text example
      // alert(transport.responseText)

      // QUESTION: is there a streaming binary response?
      $('imgElem').src = transport.responseBinary;
  },
  onFailure: function(transport) {
      // handle failure
  }
});

Answer 1

可能无法传输二进制数据,但您可以使用Ajax来检索二进制数据.

这可以使用以下两种方法之一:Javascript Typed Arrays或XMLHttpResponse overrideMimeType hack.阅读一篇关于MDN的好文章 - 这些例子来自那里:发送和接收二进制数据

Typed Array方法如下所示:

var oReq = new XMLHttpRequest();
oReq.open("GET", "/myfile.png", true);
oReq.responseType = "arraybuffer";

oReq.onload = function (oEvent) {
  var arrayBuffer = oReq.response; // Note: not oReq.responseText
  if (arrayBuffer) {
    var byteArray = new Uint8Array(arrayBuffer);
    for (var i = 0; i < byteArray.byteLength; i++) {
      // do something with each byte in the array
    }
  }
};

oReq.send(null);

IE <10,Firefox <4,Chrome <7,Safari <5.1和Opera <11.6不支持类型化阵列,移动支持不稳定但有所改进.

第二种方法使用名为overrideMimeType的XMLHttpRequest方法,以允许二进制数据通过未修改的方式传递.

var req = new XMLHttpRequest();
req.open('GET', '/myfile.png', false);
// XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com]
req.overrideMimeType('text\/plain; charset=x-user-defined');
req.send(null);
if (req.status != 200) return '';
// do stuff with req.responseText;

您将获得一个未解析的二进制字符串,您可以使用该字符串var byte = filestream.charCodeAt(x) & 0xff;来检索特定字节.

Answer 2

这是Tom Ashworth的回应的延伸(这有助于让我走上正确的轨道,面对我所面临的问题).这允许你只获取文件流(FileStreamResult,如果你使用的是asp.net mvc)并将其设置为img src,这很酷.

var oReq = new XMLHttpRequest();
oReq.open("post", '/somelocation/getmypic', true );        
oReq.responseType = "blob";
oReq.onload = function ( oEvent )
{
    var blob = oReq.response;
    var imgSrc = URL.createObjectURL( blob );                        
    var $img = $( '<img/>', {                
        "alt": "test image",
        "src": imgSrc
    } ).appendTo( $( '#bb_theImageContainer' ) );
    window.URL.revokeObjectURL( imgSrc );
};
oReq.send( null );

基本思想是数据被返回到未被篡改,它被放置在blob中,然后在内存中为该对象创建一个url.看到这里和这里.注意支持的浏览器

Answer 3

如果您想即时生成图像，您可以做的就是：

<img src="http://myurl/myfile.php?id=3" />

然后您可以使用适当的 mimetype 发送数据。

如果您真的想发送图像，那么您可能需要查看 HTML5 canvas 标签，但我不确定 excanvas 将如何使用它，因为它是跨平台的。

您可以写入画布，但仅使用 img 标签会更有效。