Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

XHR2 Wonder Land

1,310 views

Published on

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

  • Be the first to comment

  • Be the first to like this

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日木曜日

×