Utilizzo di jquery ajax per scaricare un file binario

Question

Sto tentando di utilizzare jquery ajax per scaricare un file audio binario.

Normalmente vorrei solo emettere un comando come questo:

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

Tuttavia, recentemente il nostro server ha aspettato troppo tempo per rispondere, ed ottengo un messaggio di gateway timeout brutto.

È stato suggerito di utilizzare invece jquery-ajax, il che ha senso da allora avrei più controllo sul timeout.

Ecco il codice che ho giocato con finora:

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

Quando ho Tralascio il "dataType", il file binario è in arrivo attraverso circa tre volte più grande di quello che in realtà si trova sul server. Tuttavia, quando faccio il dataType uguale a "binario", ajax genera un errore:

"No conversion from text to binary" 

Da alcuni post precedenti, suona come se jquery-ajax non può gestire i file binari in questo modo.

Ho scoperto Delivery.js che in realtà funziona abbastanza bene per quello che sto tentando, ma preferirei non utilizzare una soluzione di nodo, se possibile.

Qualche suggerimento?

Answer 1

Basta usare XHR direttamente. Questo esempio è tratto da 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

Se è necessario utilizzare jQuery, è possibile utilizzare $.ajaxSetup() per modificare le impostazioni di basso livello.

Esempio:

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