Phản ứng nhị phân Ajax

Question

Xin chào, tôi tự hỏi liệu có cách nào để truyền một phản hồi nhị phân trong AJAX không? Đây sẽ là một giải pháp tối ưu nếu không tôi sẽ cần phải nhận ra hình ảnh nhị phân vào một tệp, sau đó truyền tệp đó cho người dùng bằng một URL khác.

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

Bạn có thể gửi bất kỳ phản hồi nào bạn muốn, là văn bản thuần túy, HTML, hình ảnh ... bất cứ điều gì! Đó là vào bạn làm thế nào để xử lý nó khi bạn nhận được nó.

Nhưng ... bạn không thể chỉ định hình ảnh nhị phân cho thuộc tính src <IMG>. Tốt hơn là bạn chỉ cần trả lại URL cho hình ảnh và chỉ định thay thế - tốt, thành thật mà nói, có một số mã hóa để nhúng hình ảnh trong SRC, nhưng chúng không phải là trình duyệt chéo, do đó bạn sẽ muốn tránh xa chúng .

Answer 2

gì bạn có thể làm, nếu bạn đang cố gắng để tạo ra một hình ảnh một cách nhanh chóng, là chỉ cần làm:

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

sau đó bạn có thể gửi dữ liệu với Mimetype thích hợp.

Nếu bạn thực sự muốn gửi hình ảnh, thì bạn có thể muốn xem thẻ canvas HTML5, nhưng tôi không chắc chắn cách excanvas sẽ làm việc với điều này, vì là nền tảng chéo.

Bạn có thể ghi vào canvas, nhưng sẽ hiệu quả hơn khi chỉ sử dụng thẻ img.

Answer 3

Có thể không thể dòng dữ liệu nhị phân, nhưng bạn có thể sử dụng Ajax để truy xuất dữ liệu nhị phân.

Có thể sử dụng một trong hai phương pháp: Javascript Typed Arrays hoặc hack một lỗi XMLHttpResponse overrideMimeType. Có một chi của một bài viết tốt về MDN - những ví dụ được lấy từ đó: Sending and Receiving Binary Data

Phương pháp Mảng Typed trông như thế này:

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

Mảng Typed không được hỗ trợ trong IE < 10, Firefox < 4 , Chrome < 7, Safari < 5.1 và Opera < 11.6 và mobile support is shaky but improving.

Phương pháp thứ hai sử dụng phương thức XMLHttpRequest gọi là overrideMimeType để cho phép dữ liệu nhị phân được truyền qua chưa sửa đổi.

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; 

Bạn nhận được chuỗi nhị phân chưa được phân loại, khi đó bạn có thể sử dụng var byte = filestream.charCodeAt(x) & 0xff; để truy xuất một byte cụ thể.

Answer 4

Đây là phần mở rộng cho phản hồi của Tom Ashworth (đã giúp tôi đi đúng hướng với vấn đề tôi đang gặp phải). Điều này cho phép bạn chỉ nhận được các dòng phim (FileStreamResult nếu bạn đang sử dụng asp.net mvc) và đặt nó vào img src, đó là mát mẻ.

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

Ý tưởng cơ bản là dữ liệu được trả về không được sửa, nó được đặt trong một đốm màu và sau đó url được tạo cho đối tượng đó trong bộ nhớ. Xem here và here. Lưu ý các trình duyệt được hỗ trợ.