Verwenden von jquery ajax zum Herunterladen einer Binärdatei

Question

Ich versuche, mit Jquery AJAX eine binäre Audiodatei herunterzuladen.

Normalerweise würde ich ausgeben nur einen Befehl wie folgt aus:

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

jedoch vor kurzem unseren Server zu lange gewartet hat, zu reagieren, und ich erhalte eine böse Gateway Timeout-Meldung.

Es wurde vorgeschlagen, dass ich stattdessen jquery-ajax verwende, was sinnvoll ist, da ich dann mehr Kontrolle über das Timeout haben würde.

Hier ist der Code, den ich mit bisher gespielt haben:

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

Wenn ich die „datatype“ weglassen, die binäre Datei über etwa dreimal so kommt größer als es tatsächlich auf dem Server ist. Allerdings, wenn ich den Datentyp gleich „binäre“ machen, wirft Ajax einen Fehler:

"No conversion from text to binary" 

Von einigen früheren Beiträge, klingt es, als ob Jquery-Ajax nicht binäre Dateien auf diese Weise handhaben kann.

Ich habe Delivery.js entdeckt, die tatsächlich recht gut funktioniert für das, was ich versuche, aber ich würde lieber keine Knotenlösung verwenden, wenn möglich.

Irgendwelche Vorschläge?

Answer 1

Verwenden Sie einfach XHR direkt. Dieses Beispiel ist aus MDN genommen:

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

Wenn Sie jQuery verwenden müssen, Sie $.ajaxSetup() verwenden können Low-Level-Einstellungen zu ändern.

Beispiel:

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