Ajax Binary Response

Question

Hola, me pregunto si hay alguna forma de transmitir una respuesta binaria en AJAX. Esta sería una solución definitiva; de lo contrario, necesitaría realizar la imagen binaria en un archivo y luego transmitir ese archivo al usuario con una URL diferente.

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

Puede enviar la respuesta que desee, ya sea texto sin formato, HTML, una imagen ... ¡lo que sea! Depende de usted cómo manejarlo cuando lo reciba.

Pero ... no puede asignar una imagen binaria al atributo <IMG> src. Será mejor que solo devuelva la URL a la imagen y la asigne en su lugar. Bueno, para ser sincero, hay algunas codificaciones para incrustar imágenes en el SRC, pero no son cruzadas, por lo que querrá mantenerse alejado de ellas. .

Answer 2

Lo que puede hacer, si usted está tratando de generar una imagen sobre la marcha, es simplemente hacer:

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

entonces usted puede enviar los datos con el tipo MIME adecuado.

Si realmente desea enviar una imagen, entonces es posible que desee ver la etiqueta canvas de HTML5, pero no estoy seguro de cómo funcionaría Excanvas con esto, por ser multiplataforma.

Podría escribir en el lienzo, pero sería más eficiente usar la etiqueta img.

Answer 3

Puede que no sea posible transmitir datos binarios, pero puede usar Ajax para recuperar datos binarios.

Esto es posible utilizando uno de dos métodos: Javascript Typed Arrays o un XMLHttpResponse overrideMimeType piratear. Tiene una lectura de un buen artículo sobre MDN - estos ejemplos se toman de allí: Sending and Receiving Binary Data

El método conjunto de tipos se ve así:

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); 

matrices con tipo no son compatibles con IE < 10, Firefox < 4 , Chrome < 7, Safari < 5.1 y Opera < 11.6 y mobile support is shaky but improving.

El segundo método usa un método XMLHttpRequest llamado overrideMimeType para permitir que los datos binarios se pasen sin modificaciones.

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; 

se obtiene una cadena binaria no analizada, sobre la cual se puede utilizar para recuperar var byte = filestream.charCodeAt(x) & 0xff; un byte específico.

Answer 4

Esta es una extensión de la respuesta de Tom Ashworth (que me ayudó a ponerme en el camino correcto con el problema al que me enfrentaba). Esto le permite obtener el filestream (FileStreamResult si está usando asp.net mvc) y configurarlo en el img src, lo cual es genial.

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); 

La idea básica es que los datos se devuelven con untampered, se coloca en una burbuja y luego se crea una URL a ese objeto en la memoria. Ver here y here. Tenga en cuenta los navegadores compatibles.