back
XMLHttpRequest Level 2(XHR2)による次世代Ajax通信 (3/5)
■バイナリデータのアクセス
XHR2の新機能の中でも注目すべきは「テキスト以外のデータ形式のサポート」でしょう。XHR2では、responseTypeにより、送信されるデータの種類を指定できます。この、responseTypeプロパティでは、以下のものが利用できます。
text――標準テキストです。単純なテキストをやり取りするのに用います。
json――JSON形式のテキストです。いくつかの値を構造化したデータに用います。
document――Documentオブジェクトデータです。Webのドキュメントを扱うのに用います。
arraybuffer――バイナリデータ配列です。各種バイナリデータを利用するためのものです。
blob――ファイルデータを扱うBlobオブジェクトデータです。各種のファイルを扱うためのものです。
バイナリデータを利用する場合、arraybufferかblobを利用することになるでしょう。また複雑なデータはjsonで送受するのがよいでしょう。
ここでは、一番馴染みのないblobを利用するサンプルを挙げておきます。下のリストは、image.jpgというイメージを読み込み画面に表示する例です。まず受信するイメージの種類を指定しておきます。
ArrayBufferやBlobは、ちょっと馴染みのないデータ形式なので戸惑いますが、基本的な使い方がわかれば、XHR2と組み合わせてバイナリデータやファイルを簡単にやり取りできるようになります。
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と組み合わせてバイナリデータやファイルを簡単にやり取りできるようになります。
(by. SYODA-Tuyano.)
※リストが表示されない場合
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();
}
| << 前へ | 次へ >> |