Embed Size (px)
DESCRIPTION
2012/11/22『HTML5実力テスト』答え合わせ勉強会！ の発表資料です http://atnd.org/event/jsdoit1122
Citation preview
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日木曜日
