Does jQuery $.ajax or $.load allow for responseType arrayBuffer?
Actually there is an easier way to do this using jQuery and the native XMLHttpRequest
without having to use only the XMLHttpRequest
or having to use a plugin, so you can still code in jQuery style/syntax. One of the options for $.ajax()
is xhr
, which the jQuery documentation describes as (emphasis mine):
xhr
(default: ActiveXObject when available (IE), the XMLHttpRequest otherwise)
Type: Function()
Callback for creating the XMLHttpRequest object. Defaults to the ActiveXObject when available (IE), the XMLHttpRequest otherwise. Override to provide your own implementation for XMLHttpRequest or enhancements to the factory.
So, in order to get an ArrayBuffer
as a response to a $.ajax()
request, all you have to do is:
var xhrOverride = new XMLHttpRequest();
xhrOverride.responseType = 'arraybuffer';
$.ajax({
url: '/url/of/your/binary/data',
method: 'GET',
xhr: function() {
return xhrOverride;
}
}).then(function (responseData) {
// responseData is an ArrayBuffer!
});
I used Dylan's answer and it worked, but the resulting $.ajax
request is not a full Promise anymore (I couldn't combine it with Promise.all
anymore). Instead, I achieved the same by using the xhrFields
setting from the documentation.
$.ajax({
url: url,
method: 'GET',
xhrFields: { responseType: 'arraybuffer'}
})
About your question, it seems jQuery does not support it yet. Before using it as I suggested below, consider checking if the feature is available.
With XHTMLRequest, you can trick your server and receive a binary string representing the bytes you want from the server. It works perfectly.
var xhr = new XMLHttpRequest();
xhr.open('GET', '/your/audio/file.wav', true);
// Here is the hack
xhr.overrideMimeType('text/plain; charset=x-user-defined');
xhr.onreadystatechange = function(event) {
if ( this.readyState == 4 && this.status == 200 ) {
var binaryString = this.responseText;
for (var i = 0, len = binaryString.length; i < len; ++i) {
var c = binaryString.charCodeAt(i);
var byte = c & 0xff; //it gives you the byte at i
//Do your cool stuff...
}
}
};
xhr.send();
It works, it's common... but... it is still a hack.
With XHTML Request Level 2, you can specify the responseType as 'arraybuffer' and receive the ArrayBuffer actually. It is much nicer. The problem is to check if your browser support this feature.
var xhr = new XMLHttpRequest();
xhr.open('GET', '/your/audio/file.wav', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
if (this.status == 200) {
//Do your stuff here
}
};
xhr.send();
Hope I helped.