Использование jquery ajax для загрузки двоичного файла

Я пытаюсь использовать jquery ajax для загрузки двоичного аудиофайла.

Обычно я просто выдавал бы такую команду:

 windows.location.href = 'http://marksdomain(dot)com/audioFile.wav' ;

Однако недавно наш сервер слишком долго ожидал ответа, и я получаю неприятное сообщение о тайм-ауте шлюза.

Было высказано предположение, что вместо этого я использую jquery-ajax, что имеет смысл с тех пор, когда я буду иметь больше контроля над таймаутом.

Вот код, который я играл до сих пор:

$.ajax(
    { url:   'http://marksdomain(dot)com/audioFile.wav'
    , timeout:      999999
    , dataType: 'binary'
    , processData:  false     // this one does not seem to do anything ?
    , success: function(result)  {
           console.log(result.length);
      }
    , error: function(result, errStatus, errorMessage){
            console.log(errStatus + ' -- ' + errorMessage);
      }

Когда я опускаю "dataType", двоичный файл проходит примерно в три раза больше, чем на самом деле на сервере. Однако, когда я делаю dataType равным "двоичному", ajax выдает ошибку:

"No conversion from text to binary"

Из некоторых ранних сообщений это звучит так, как будто jquery-ajax не может обрабатывать двоичные файлы таким образом.

Я обнаружил Delivery.js, который действительно работает достаточно хорошо для того, что я пытаюсь, но я бы предпочел не использовать решение node если возможно.

Любые предложения?

Ответ 1

Просто используйте XHR напрямую. Этот пример взят из MDN:

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

oReq.onload = function(oEvent) {
  var arrayBuffer = oReq.response;

  // if you want to access the bytes:
  var byteArray = new Uint8Array(arrayBuffer);
  // ...

  // If you want to use the image in your DOM:
  var blob = new Blob([arrayBuffer], {type: "image/png"});
  var url = URL.createObjectURL(blob);
  someImageElement.src = url;

  // whatever...
};

oReq.send();

Ответ 2

Вы можете настроить транспорт $.ajax для изменения настроек, как указано здесь: http://www.henryalgus.com/reading-binary-files-using-jquery-ajax/

// use this transport for "binary" data type

            $.ajaxTransport("+binary", function (options, originalOptions, jqXHR) {
                // check for conditions and support for blob / arraybuffer response type
                if (window.FormData && ((options.dataType && (options.dataType == 'binary')) || (options.data && ((window.ArrayBuffer && options.data instanceof ArrayBuffer) || (window.Blob && options.data instanceof Blob))))) {
                    return {
                        // create new XMLHttpRequest
                        send: function (headers, callback) {
                            // setup all variables
                            var xhr = new XMLHttpRequest(),
                                url = options.url,
                                type = options.type,
                                async = options.async || true,
                                // blob or arraybuffer. Default is blob
                                dataType = options.responseType || "blob",
                                data = options.data || null,
                                username = options.username || null,
                                password = options.password || null;

                            xhr.addEventListener('load', function () {
                                var data = {};
                                data[options.dataType] = xhr.response;
                                // make callback and send data
                                callback(xhr.status, xhr.statusText, data, xhr.getAllResponseHeaders());
                            });

                            xhr.open(type, url, async, username, password);

                            // setup custom headers
                            for (var i in headers) {
                                xhr.setRequestHeader(i, headers[i]);
                            }

                            xhr.responseType = dataType;
                            xhr.send(data);
                        },
                        abort: function () {
                            jqXHR.abort();
                        }
                    };
                }
            });

и затем сделайте ваш вызов AJAX:

 return $.ajax({
                    url: url,
                    method: 'GET',
                    dataType: 'binary',
                    processData: 'false',
                    responseType: 'arraybuffer',
                    headers: { 'X-Requested-With': 'XMLHttpRequest' }
                }).then(function (response) {
                    var data = new Uint8Array(response);
                    //do something with the data
                    return data;
                }, function (error) {
                    alertify.error('There was an error! Error:' + error.name + ':' + error.status)
                });

Ответ 3

Если вы должны использовать jQuery, вы можете использовать $.ajaxSetup() для изменения настроек низкого уровня.

Пример:

  // Set up AJAX settings for binary files:
  $.ajaxSetup({
    beforeSend: function (jqXHR, settings) {
      if (settings.dataType === 'binary') {
        settings.xhr().responseType = 'arraybuffer';
      }
    }
  })

  // Make the actual call:
  let result = await $.ajax({
    url: '/api/export/data',
    type: 'GET',
    contentType: 'application/json',
    dataType: 'binary',
    processData: false,
    headers: {
      token: localStorage.token,
    },
  });