More Related Content Similar to XHR2 Wonder Land (9) XHR2 Wonder Land2. WHO?
• 山田 順久 (Yukihisa YAMADA)
• Front-End Engineer @PixelGrid Inc.
12年11月22日木曜日
3. OUTLINE
• About XHR2
• CORS (Cross Origin Resource Sharing)
• Events
• Binary Data
12年11月22日木曜日
4. XHR...
• 異なるドメイン間の通信 → NG
•進 などの細かいイベント → NG
• バイナリデータの扱い → NG
12年11月22日木曜日
5. CROSS ORIGIN (XHR)
• Proxy
同じドメイン下のサーバーサイド言語に
取ってきてもらう
• JSONP
JSON データを引数にしたコールバック関数の
呼び出しが記述された外部スクリプトを読み込む
12年11月22日木曜日
8. XHR2!!!
• 異なるドメイン間の通信 → OK
•進 などの細かいイベント → OK
• バイナリデータの扱い → OK
12年11月22日木曜日
9. CROSS ORIGIN (XHR2)
• CORS (Cross Origin Resource Sharing)
• Access-Control-Allow-Origin
任意のリクエスト元のサイトに対して
クロスドメイン通信を許可
• Access-Control-Allow-Methods
任意のリクエスト元のサイトに対して
HTTP メソッドの使用を許可
12年11月22日木曜日
12. EVENTS (XHR2)
• onloadstart • ontimeout
• onprogress • onloadend
• onabort
• onerror
• onload
12年11月22日木曜日
13. EVENTS (XHR2)
• onloadstart • ontimeout
• onprogress • onloadend
• onabort
• onerror
開始イベ ントが取れる
• onload
12年11月22日木曜日
14. EVENTS (XHR2)
• onloadstart • ontimeout
• onprogress • onloadend
• onabort
• onerror
完了イベ ントが取れる
• onload
12年11月22日木曜日
15. EVENTS (XHR2)
• onloadstart • ontimeout
• onprogress • onloadend
• onabort
• onerror
ー系イベン トが取れる
中止・エラ
• onload
12年11月22日木曜日
16. EVENTS (XHR2)
• onloadstart • ontimeout
• onprogress • onloadend
• onabort
• onerror
進 イベ ントが取れる
• onload
12年11月22日木曜日
17. PROGRESS EVENT
progress = document.getElementById('progress');
xhr.onprogress = function(e) {
if (e.lengthComputable) {
progress.value = (e.loaded / e.total) * 100;
}
};
12年11月22日木曜日
18. PROGRESS EVENT
progress = document.getElementById('progress');
xhr.onprogress = function(e) { 全体量わかった
if (e.lengthComputable) {
progress.value = (e.loaded / e.total) * 100;
}
};
これだけ終わった 全部でこれだけ
12年11月22日木曜日
19. BINARY DATA (XHR2)
• バイナリデータの受信と送信が可能
• フォームの内容を非同期送信
• File API で取得したローカルファイルも扱える
12年11月22日木曜日
20. DOWNLOAD
xhr.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日木曜日
21. DOWNLOAD
xhr.open('GET', 'http://path.to/image.png', true);
xhr.responseType = 'blob';
xhr.onload = function(e) { ※ Blob = 生のバイナリデータ
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日木曜日
22. DOWNLOAD
xhr.open('GET', 'http://path.to/image.png', true);
xhr.responseType = 'blob';
xhr.onload = function(e) { ※ URL.createObjectURL
var blob, img; メモリ上の Blob
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日木曜日
23. UPLOAD
var 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日木曜日
24. UPLOAD
var 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日木曜日
25. FILE API
• ローカルのファイルを JavaScript で扱うには
File API を利用
• input 要素、drop イベントなどから
File オブジェクトを取得
12年11月22日木曜日
26. 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日木曜日
28. FORMDATA
• Drag & Drop UI • HTML Form UI
• FormData.append( • new FormData(
name, value HTMLFormElement
); );
どっちでもいけるぜ!
XMLHttpRequest.send(FormData)
12年11月22日木曜日
30. まとめ
• ハックに支えられていた感のある XHR が便利に進化
• 無理矢理じゃないドメイン間通信ができる
• 充実化したイベントやデータ形式をどう使っていくか
12年11月22日木曜日
31. LINK
• XMLHttpRequest2 に関する新しいヒント - HTML5 Rocks
http://www.html5rocks.com/ja/tutorials/file/xhr2/
• XMLHttpRequest
http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html
• Cross-Origin Resource Sharing
http://www.w3.org/TR/cors/
• File API
http://www.w3.org/TR/file-upload/
• File API: Directories and System
http://dev.w3.org/2009/dap/file-system/pub/FileSystem/
12年11月22日木曜日