libro
www.tuyano.com
JavaScriptによるHTML5プログラミング入門

XMLHttpRequest Level 2(XHR2)による次世代Ajax通信 (3/5)

作成:2013-02-24 10:06
更新:2013-02-24 10:06

■バイナリデータのアクセス

XHR2の新機能の中でも注目すべきは「テキスト以外のデータ形式のサポート」でしょう。XHR2では、responseTypeにより、送信されるデータの種類を指定できます。この、responseTypeプロパティでは、以下のものが利用できます。

text――標準テキストです。単純なテキストをやり取りするのに用います。
json――JSON形式のテキストです。いくつかの値を構造化したデータに用います。
document――Documentオブジェクトデータです。Webのドキュメントを扱うのに用います。
arraybuffer――バイナリデータ配列です。各種バイナリデータを利用するためのものです。
blob――ファイルデータを扱うBlobオブジェクトデータです。各種のファイルを扱うためのものです。

バイナリデータを利用する場合、arraybufferかblobを利用することになるでしょう。また複雑なデータはjsonで送受するのがよいでしょう。

ここでは、一番馴染みのないblobを利用するサンプルを挙げておきます。下のリストは、image.jpgというイメージを読み込み画面に表示する例です。まず受信するイメージの種類を指定しておきます。
xhr.responseType = 'blob';
そしてデータを受信したら、それをもとにURLを生成して<img>タグのsrcに設定します。
document.querySelector("#img").src = 
        window.URL.createObjectURL(this.response);
これでおしまい。信じられないくらいに簡単にイメージファイルをやりとりできます。ちなみに、参考例としてarraybufferを利用した場合の処理も挙げておきました。responseTypeをarraybufferにしておき、受信した後でちょっとした処理をします。
var blob = new Blob([this.response], {type: 'image/jpg'});
document.querySelector("#img").src = 
    window.URL.createObjectURL(blob);
ArrayBufferは、文字通りバイナリデータを扱うものです。ここでは、ArrayBufferからBlobオブジェクトを作成して利用しています。ArrayBufferからBlobへの変換はこのように簡単にできます。

ArrayBufferやBlobは、ちょっと馴染みのないデータ形式なので戸惑いますが、基本的な使い方がわかれば、XHR2と組み合わせてバイナリデータやファイルを簡単にやり取りできるようになります。

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

※Blobによるイメージファイルの受信

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>タイトル</title>
    <style>
    h1 { font-size: 18pt; background: #AAAAEE; padding: 5px;}
    </style>
<script type="text/javascript">
function doAction(e){
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/image.jpg', true);
    xhr.responseType = 'blob';
    xhr.onload = function(e) {
        if (this.status == 200) {
            document.querySelector("#img").src = 
                window.URL.createObjectURL(this.response);
        }
    };

    xhr.send();
}
</script>
</head>
<body>
    <header>
        <h1>XHR2 Sample</h1>
    </header>
    <article>
        <p id="msg"></p>
        <img id="img" src="" />
        <button onclick="doAction();">Click</button>
    </article>
</body>
</html>


※ArrayBufferを利用する場合

function doAction(e){
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/image.jpg', true);
    xhr.responseType = 'arraybuffer';
    xhr.onload = function(e) {
        if (this.status == 200) {
            var blob = new Blob([this.response], {type: 'image/jpg'});
            document.querySelector("#img").src = 
                window.URL.createObjectURL(blob);
        }
    };

    xhr.send();
}
※関連コンテンツ

「JavaScriptによるHTML5プログラミング入門」に戻る