Ajax Réponse binaire

Question

Salut Je me demande s'il ya de toute façon à diffuser une réponse binaire en AJAX? Ce serait une solution ultime sinon je devrais réaliser l'image binaire dans un fichier puis diffuser ce fichier à l'utilisateur avec une URL différente.

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

Vous pouvez envoyer n'importe quelle réponse que vous voulez, qu'il s'agisse de texte brut, HTML, une image ... peu importe! C'est à vous de savoir comment le gérer quand vous le recevez. Mais ... vous ne pouvez pas affecter une image binaire à l'attribut <IMG> src. Il vaut mieux simplement renvoyer l'URL à l'image et l'affecter à la place - bien, pour être honnête, il y a des encodages pour incorporer des images dans le SRC, mais ils ne sont pas cross-browser donc vous voudrez rester loin d'eux .

Answer 2

Qu'est-ce que vous pouvez faire, si vous essayez de générer une image à la volée, est de faire simplement:

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

vous pouvez envoyer les données avec le type MIME approprié.

Si vous voulez vraiment envoyer une image, alors vous voudrez peut-être regarder la balise canvas HTML5, mais je ne suis pas certain comment excanvas fonctionnerait avec ceci, pour être multiplate-forme.

Vous pouvez écrire sur le canevas, mais il serait plus efficace d'utiliser simplement la balise img.

Answer 3

Il peut ne pas être possible de flux de données binaires, mais vous pouvez utiliser Ajax pour récupérer des données binaires.

Ceci est possible en utilisant l'une des deux méthodes suivantes: Javascript Typed Arrays ou XMLHttpResponse overrideMimeType hack. Avoir une lecture d'un bon article sur MDN - ces exemples sont tirés de là: Sending and Receiving Binary Data

La méthode Array dactylographié ressemble à ceci:

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

Les tableaux typés ne sont pas pris en charge dans IE < 10, Firefox < 4 , Chrome < 7, Safari < 5.1 et Opera < 11,6 et mobile support is shaky but improving.

La seconde méthode utilise une méthode XMLHttpRequest appelée overrideMimeType pour permettre aux données binaires d'être transmises sans être modifiées.

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; 

Vous obtenez une chaîne binaire unparsed, sur laquelle vous pouvez utiliser var byte = filestream.charCodeAt(x) & 0xff; pour récupérer un octet spécifique.

Answer 4

Ceci est une extension de la réponse de Tom Ashworth (qui m'a aidé à me mettre sur la bonne voie avec le problème auquel je faisais face). Cela vous permet d'obtenir juste le flux de fichiers (FileStreamResult si vous utilisez asp.net mvc) et le définir sur le imr src, ce qui est cool.

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

L'idée de base est que les données sont renvoyées bidouillé avec, il est placé dans un blob, puis une URL est créée à cet objet en mémoire. Voir here et here. Notez les navigateurs pris en charge.