我正在尝试使用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等于" binary"时,ajax会抛出错误:
"No conversion from text to binary"
从一些早期的帖子中,听起来好像jquery-ajax无法以这种方式处理二进制文件。
我确实发现Delivery.js实际上对我正在尝试的内容非常有效,但如果可能的话,我宁愿不使用节点解决方案。
有什么建议吗?
答案 0 :(得分:16)
直接使用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();
答案 1 :(得分:1)
如果必须使用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,
},
});
答案 2 :(得分:1)
您可以设置$ .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)
});