XHR2 Wonder Land

2012-11-22『HTML5実力テスト』答え合わせ勉強会！

XHR2 WONDERLAND@ykhs

12年11月22日木曜日

WHO?

•山田 順久 (Yukihisa YAMADA)

• Front-End Engineer @PixelGrid Inc.

12年11月22日木曜日

OUTLINE

• About XHR2

• CORS (Cross Origin Resource Sharing)

• Events

• Binary Data

12年11月22日木曜日

XHR...

•異なるドメイン間の通信 → NG

•進捗などの細かいイベント → NG

•バイナリデータの扱い → NG

12年11月22日木曜日

CROSS ORIGIN (XHR)

• Proxy同じドメイン下のサーバーサイド言語に取ってきてもらう

• JSONPJSON データを引数にしたコールバック関数の呼び出しが記述された外部スクリプトを読み込む

12年11月22日木曜日

EVENT (XHR)

!!! onreadystatechange !!!

12年11月22日木曜日

BINARY DATA (XHR)

Nothing...

12年11月22日木曜日

XHR2!!!

•異なるドメイン間の通信 → OK

•進捗などの細かいイベント → OK

•バイナリデータの扱い → OK

12年11月22日木曜日

CROSS ORIGIN (XHR2)

• CORS (Cross Origin Resource Sharing)

• Access-Control-Allow-Origin任意のリクエスト元のサイトに対してクロスドメイン通信を許可

• Access-Control-Allow-Methods任意のリクエスト元のサイトに対してHTTP メソッドの使用を許可

12年11月22日木曜日

ACCESS-CONTROL-ALLOW-ORIGIN

• Access-Control-Allow-Origin:http://example.com

• http://example.com/ のサイトからのクロスドメイン通信を許可

12年11月22日木曜日

ACCESS-CONTROL-ALLOW-METHODS

• Access-Control-Allow-Methods:POST, GET, OPTIONS

• POST, GET メソッドのみを許可

12年11月22日木曜日

EVENTS (XHR2)

• onloadstart

• onprogress

• onabort

• onerror

• onload

• ontimeout

• onloadend

12年11月22日木曜日

EVENTS (XHR2)

• onloadstart

• onprogress

• onabort

• onerror

• onload

• ontimeout

• onloadend

開始イベントが取れる

12年11月22日木曜日

EVENTS (XHR2)

• onloadstart

• onprogress

• onabort

• onerror

• onload

• ontimeout

• onloadend

完了イベントが取れる

12年11月22日木曜日

EVENTS (XHR2)

• onloadstart

• onprogress

• onabort

• onerror

• onload

• ontimeout

• onloadend

中止・エラー系イベントが取れる

12年11月22日木曜日

EVENTS (XHR2)

• onloadstart

• onprogress

• onabort

• onerror

• onload

• ontimeout

• onloadend

進捗イベントが取れる

12年11月22日木曜日

PROGRESS EVENT

progress = document.getElementById('progress');

xhr.onprogress = function(e) { if (e.lengthComputable) { progress.value = (e.loaded / e.total) * 100;

}};

12年11月22日木曜日

PROGRESS EVENT

progress = document.getElementById('progress');

xhr.onprogress = function(e) { if (e.lengthComputable) { progress.value = (e.loaded / e.total) * 100;

}}; これだけ終わった 全部でこれだけ

全体量わかった

12年11月22日木曜日

BINARY DATA (XHR2)

•バイナリデータの受信と送信が可能

•フォームの内容を非同期送信

• File API で取得したローカルファイルも扱える

12年11月22日木曜日

DOWNLOADxhr.open('GET', 'http://path.to/image.png', true);xhr.responseType = 'blob';xhr.onload = function(e) { var blob, img; if (xhr.status === 200) { blob = xhr.response; img = document.createElement('img'); img.onload = function(e) { window.URL.revokeObjectURL(img.src); }; img.src = window.URL.createObjectURL(blob); document.body.appendChild(img); }};

12年11月22日木曜日

DOWNLOADxhr.open('GET', 'http://path.to/image.png', true);xhr.responseType = 'blob';xhr.onload = function(e) { var blob, img; if (xhr.status === 200) { blob = xhr.response; img = document.createElement('img'); img.onload = function(e) { window.URL.revokeObjectURL(img.src); }; img.src = window.URL.createObjectURL(blob); document.body.appendChild(img); }};

※ Blob = 生のバイナリデータ

12年11月22日木曜日

DOWNLOADxhr.open('GET', 'http://path.to/image.png', true);xhr.responseType = 'blob';xhr.onload = function(e) { var blob, img; if (xhr.status === 200) { blob = xhr.response; img = document.createElement('img'); img.onload = function(e) { window.URL.revokeObjectURL(img.src); }; img.src = window.URL.createObjectURL(blob); document.body.appendChild(img); }};

※ URL.createObjectURLメモリ上の Blobデータの参照を取得

12年11月22日木曜日

UPLOADvar formData, xhr;formData = new FormData();formData.append('upload_file', file);xhr = new XMLHttpRequest;xhr.open('POST', '/api', true);xhr.onload = function() { if (xhr.status === 200) { console.log('upload success: ' + file.name); }};xhr.send(formData);

12年11月22日木曜日

UPLOADvar formData, xhr;formData = new FormData();formData.append('upload_file', file);xhr = new XMLHttpRequest;xhr.open('POST', '/api', true);xhr.onload = function() { if (xhr.status === 200) { console.log('upload success: ' + file.name); }};xhr.send(formData);

12年11月22日木曜日

FILE API

•ローカルのファイルを JavaScript で扱うにはFile API を利用

• input 要素、drop イベントなどからFile オブジェクトを取得

12年11月22日木曜日

FORMDATA

• HTML の <form> を JavaScript 上で作成

• XMLHttpRequest.send(FormData) でmultipart/form-data リクエストを生成

• FormData.append(name, value)name - フィールド名value - フィールド値 (Blob, File, String)

• new FormData(HTMLFormElement) というのもアリ

12年11月22日木曜日

こういうことができるのでは

12年11月22日木曜日

FORMDATA

• Drag & Drop UI

• FormData.append( name, value);

• HTML Form UI

• new FormData( HTMLFormElement);

XMLHttpRequest.send(FormData)

どっちでもいけるぜ！

12年11月22日木曜日

EXAMPLE - 500PX.COM

どっちでもいけるぜ！

12年11月22日木曜日

まとめ

•ハックに支えられていた感のある XHR が便利に進化

•無理矢理じゃないドメイン間通信ができる

•充実化したイベントやデータ形式をどう使っていくか

12年11月22日木曜日

LINK

• XMLHttpRequest2 に関する新しいヒント - HTML5 Rocks http://www.html5rocks.com/ja/tutorials/file/xhr2/

• XMLHttpRequesthttp://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html

• Cross-Origin Resource Sharinghttp://www.w3.org/TR/cors/

• File APIhttp://www.w3.org/TR/file-upload/

• File API: Directories and Systemhttp://dev.w3.org/2009/dap/file-system/pub/FileSystem/

12年11月22日木曜日

THANK YOU@ykhs

12年11月22日木曜日