Używanie jquery ajax do pobrania pliku binarnego

Question

Próbuję użyć jquery ajax do pobrania binarnego pliku audio.

Normalnie ja po prostu wydać polecenie tak:

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

Jednak niedawno nasz serwer został zbyt długie oczekiwanie na odpowiedź, a ja się paskudny komunikat limit czasu bramy.

Zasugerowano, że zamiast tego używam jquery-ajax, co ma sens, ponieważ miałbym większą kontrolę nad czasem oczekiwania.

Oto kod mam grał do tej pory:

$.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); 
     } 

Kiedy pominąć „typ danych”, to plik binarny jest wpadające przez około trzy razy większy niż jest w rzeczywistości znajduje się na serwerze. Jednak, kiedy dokonać dataType równą „binarny”, ajax zgłasza błąd:

"No conversion from text to binary" 

z niektórych wcześniejszych postów, to brzmi jakby jquery-ajax nie obsługuje plików binarnych w ten sposób.

Odkryłem Delivery.js, który faktycznie działa całkiem dobrze dla tego, co próbuję, ale wolałbym nie używać rozwiązania węzła, jeśli to możliwe.

Wszelkie sugestie?

Answer 1

Po prostu użyj XHR bezpośrednio. Ten przykład pochodzi z 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(); 

Answer 2

Jeśli trzeba użyć jQuery, można użyć $.ajaxSetup() zmodyfikować ustawienia niskiego poziomu.

Przykład:

// 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, 
    }, 
    });