Posted at

バイナリファイルをAjaxで取得する際に注意する点

More than 3 years have passed since last update.

サーバ上のバイナリファイルを jQuery の $.ajax() を使用して取得しようとしたところ思わぬ罠に嵌まったので対処法を記載します。


jQuery の $.ajax() を使うと発生する問題点

jQueryを使って、バイナリファイルをAjaxで取得しようとする際、まず思いつくコードは以下のようになると思います。


test1.js

$(function(){

$.ajax({
url : 'http://example.com/foobar.jpg',
cache : false,
success : function(data, status, xhr){
console.log(arguments);
}
});
});

一見、これでバイナリが取得できそうです。しかし、このコードの console.log で出力される中身を確認すればわかりますが、バイナリがテキストとして扱われてしまうため、バイナリを使用するには扱いづらい状態になってしまいます。ここから、TypedArrayに変換しようとしても、Blobでないというエラーが出てしまったりするため、jQueryの$.ajax() だけではバイナリを扱うのが厳しい状況になってしまいます。


解決策

バイナリを扱う際は、先人の知恵(その1その2)によると、XMLHttpRequestを使ってバイナリを呼び出すのが一番簡単だと思われます。


test2.js

$(function(){

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/foobar.jpg', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
// ArrayBufferで返ってくる
console.log(this.response.byteLength);
};

xhr.send();
})();


一応、$.ajax()を使用しても、$.ajaxTransport()に追記することで扱えるようにする方法もあるようですが、コードの行数も上記より増えてしまうため、XMLHttpRequestを使った方が良いかと思われます。


参考文献


  1. JavaScriptでバイナリファイルを扱う方法

  2. Javascriptでバイナリデータを取得する

  3. Reading binary data using jQuery Ajax