Двоичный ответ Ajax

Привет, мне интересно, если так или иначе нужно передать двоичный ответ в 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
  }
});

Ответы

Ответ 1

Возможно, не удастся выполнить поток двоичных данных, но вы можете использовать Ajax для извлечения двоичных данных.

Это возможно с использованием одного из двух методов: Javascript Типизированные массивы или XMLHttpResponse overrideMimeType взломать. Прочитайте хорошую статью о 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 и мобильная поддержка шаткая, но улучшенная.

Второй метод использует метод XMLHttpRequest, называемый overrideMimeType, позволяющий передавать двоичные данные через немодифицированный.

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; для получения определенного байта.

Ответ 2

Это расширение для ответа Тома Эшворта (что помогло поставить меня на правильный путь с проблемой, с которой я столкнулся). Это позволяет вам просто получить filestream (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. См. здесь и здесь. Обратите внимание на поддерживаемые браузеры.

Ответ 3

Что вы можете сделать, если вы пытаетесь создать изображение "на лету", это просто:

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

тогда вы можете отправить данные с соответствующим типом mimetype.

Если вы действительно хотите отправить изображение, вам может понадобиться посмотреть тэг canvas HTML5, но я не уверен, как excanvas будет работать с этим, для того, чтобы быть кросс-платформенным.

Вы можете написать на холст, но было бы более эффективно использовать тег img.

Ответ 4

Вы можете отправить любой ответ, который вам нужен, будь то простой текст, HTML, изображение... что угодно! Это зависит от вас, как обращаться с ним, когда вы его получите.

Но... вы не можете назначить двоичное изображение атрибуту <IMG> src. Вам лучше просто вернуть URL-адрес изображения и назначить его вместо этого - ну, честно говоря, есть некоторые кодировки для встраивания изображений в SRC, но они не являются кросс-браузерами, поэтому вы захотите держаться подальше от них.