XHR2 Wonder Land

1,006 views
896 views

Published on

2012/11/22『HTML5実力テスト』答え合わせ勉強会! の発表資料です
http://atnd.org/event/jsdoit1122

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,006
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

XHR2 Wonder Land

  1. 1. 2012-11-22『HTML5実力テスト』答え合わせ勉強会! XHR2 WONDERLAND @ykhs12年11月22日木曜日
  2. 2. WHO? • 山田 順久 (Yukihisa YAMADA) • Front-End Engineer @PixelGrid Inc.12年11月22日木曜日
  3. 3. OUTLINE • About XHR2 • CORS (Cross Origin Resource Sharing) • Events • Binary Data12年11月22日木曜日
  4. 4. XHR... • 異なるドメイン間の通信 → NG •進 などの細かいイベント → NG • バイナリデータの扱い → NG12年11月22日木曜日
  5. 5. CROSS ORIGIN (XHR) • Proxy 同じドメイン下のサーバーサイド言語に 取ってきてもらう • JSONP JSON データを引数にしたコールバック関数の 呼び出しが記述された外部スクリプトを読み込む12年11月22日木曜日
  6. 6. EVENT (XHR) !!! onreadystatechange !!!12年11月22日木曜日
  7. 7. BINARY DATA (XHR) Nothing...12年11月22日木曜日
  8. 8. XHR2!!! • 異なるドメイン間の通信 → OK •進 などの細かいイベント → OK • バイナリデータの扱い → OK12年11月22日木曜日
  9. 9. CROSS ORIGIN (XHR2) • CORS (Cross Origin Resource Sharing) • Access-Control-Allow-Origin 任意のリクエスト元のサイトに対して クロスドメイン通信を許可 • Access-Control-Allow-Methods 任意のリクエスト元のサイトに対して HTTP メソッドの使用を許可12年11月22日木曜日
  10. 10. ACCESS-CONTROL-ALLOW-ORIGIN • Access-Control-Allow-Origin: http://example.com • http://example.com/ のサイトからの クロスドメイン通信を許可12年11月22日木曜日
  11. 11. ACCESS-CONTROL-ALLOW-METHODS • Access-Control-Allow-Methods: POST, GET, OPTIONS • POST, GET メソッドのみを許可12年11月22日木曜日
  12. 12. EVENTS (XHR2) • onloadstart • ontimeout • onprogress • onloadend • onabort • onerror • onload12年11月22日木曜日
  13. 13. EVENTS (XHR2) • onloadstart • ontimeout • onprogress • onloadend • onabort • onerror 開始イベ ントが取れる • onload12年11月22日木曜日
  14. 14. EVENTS (XHR2) • onloadstart • ontimeout • onprogress • onloadend • onabort • onerror 完了イベ ントが取れる • onload12年11月22日木曜日
  15. 15. EVENTS (XHR2) • onloadstart • ontimeout • onprogress • onloadend • onabort • onerror ー系イベン トが取れる 中止・エラ • onload12年11月22日木曜日
  16. 16. EVENTS (XHR2) • onloadstart • ontimeout • onprogress • onloadend • onabort • onerror 進 イベ ントが取れる • onload12年11月22日木曜日
  17. 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. 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. 19. BINARY DATA (XHR2) • バイナリデータの受信と送信が可能 • フォームの内容を非同期送信 • File API で取得したローカルファイルも扱える12年11月22日木曜日
  20. 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. 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. 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. 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. 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. 25. FILE API • ローカルのファイルを JavaScript で扱うには File API を利用 • input 要素、drop イベントなどから File オブジェクトを取得12年11月22日木曜日
  26. 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日木曜日
  27. 27. こういうことが できるのでは12年11月22日木曜日
  28. 28. FORMDATA • Drag & Drop UI • HTML Form UI • FormData.append( • new FormData( name, value HTMLFormElement ); ); どっちでもいけるぜ! XMLHttpRequest.send(FormData)12年11月22日木曜日
  29. 29. どっちでもいけるぜ! EXAMPLE - 500PX.COM12年11月22日木曜日
  30. 30. まとめ • ハックに支えられていた感のある XHR が便利に進化 • 無理矢理じゃないドメイン間通信ができる • 充実化したイベントやデータ形式をどう使っていくか12年11月22日木曜日
  31. 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日木曜日
  32. 32. THANK YOU @ykhs12年11月22日木曜日

×