jquery ajaxを使用してバイナリファイルをダウンロードする

Question

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

、バイナリファイルは、それが実際にサーバ上にあるよりも大きな約3倍て来ています。 jqueryの-Ajaxは、このようにバイナリファイルを扱うことができないかのように聞こえる、いくつかの以前の記事から

"No conversion from text to binary" 

：iが等しいデータ型を作るときしかし、「バイナリ」、AJAXは、エラーがスローされます。

実際には私が試みているところではかなりうまく動作しますが、可能であればノードソリューションを使用したくありませんでしたが、Delivery.jsが見つかりました。

提案がありますか？

Answer 1

XHRを直接使用してください。この例ではMDNから取られている：あなたはjQueryのを使用する必要がある場合、あなたは低レベルの設定を変更する$.ajaxSetup()を使用することができます

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

。

例：

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