Submit Search
Upload
XHR2 Wonder Land
•
0 likes
•
1,263 views
ykhs
Follow
2012/11/22『HTML5実力テスト』答え合わせ勉強会! の発表資料です http://atnd.org/event/jsdoit1122
Read less
Read more
Report
Share
Report
Share
1 of 32
Download now
Download to read offline
Recommended
PerlとJavaScriptとAndroidとiOSとのんのんバアとオレ
PerlとJavaScriptとAndroidとiOSとのんのんバアとオレ
Naosuke Yokoe
Parse introduction
Parse introduction
Tamura Koya
Integrated Water Resource Management (Iwrm)
Integrated Water Resource Management (Iwrm)
Business Innovation Research Development
Tell us your story
Tell us your story
furiousisland
Digital marketing and Employee Advocacy
Digital marketing and Employee Advocacy
Ray Hiltz
Vauban and stairs
Vauban and stairs
Business Innovation Research Development
2010 Chevy Coevette in El Paso, TX
2010 Chevy Coevette in El Paso, TX
Viva Chevrolet
10012010 palnning and crisis
10012010 palnning and crisis
Business Innovation Research Development
Recommended
PerlとJavaScriptとAndroidとiOSとのんのんバアとオレ
PerlとJavaScriptとAndroidとiOSとのんのんバアとオレ
Naosuke Yokoe
Parse introduction
Parse introduction
Tamura Koya
Integrated Water Resource Management (Iwrm)
Integrated Water Resource Management (Iwrm)
Business Innovation Research Development
Tell us your story
Tell us your story
furiousisland
Digital marketing and Employee Advocacy
Digital marketing and Employee Advocacy
Ray Hiltz
Vauban and stairs
Vauban and stairs
Business Innovation Research Development
2010 Chevy Coevette in El Paso, TX
2010 Chevy Coevette in El Paso, TX
Viva Chevrolet
10012010 palnning and crisis
10012010 palnning and crisis
Business Innovation Research Development
150309 cotton open letter to iranian leaders
150309 cotton open letter to iranian leaders
Anochi.com.
Trabajo de tic (conte)
Trabajo de tic (conte)
lautaro
2010 Chevy Traverse in El Paso, TX
2010 Chevy Traverse in El Paso, TX
Viva Chevrolet
Portfolio Samples
Portfolio Samples
nethaneel
דיווח לוועדת התרבות מרץ 2015 (2)
דיווח לוועדת התרבות מרץ 2015 (2)
Anochi.com.
911 dias
911 dias
rogerfacil
Proyecto PP Grupo 3
Proyecto PP Grupo 3
bhodeler
Costs of oil impacts and equilibrium of oil price
Costs of oil impacts and equilibrium of oil price
Business Innovation Research Development
Susan alex july
Susan alex july
MaherBirdAssociates
Optimizing Facebook Engagement
Optimizing Facebook Engagement
stu.Dio
bmxを普及させるための方法 ー
bmxを普及させるための方法 ー
rhmnsjkkk29
H:\Bca\Cars
H:\Bca\Cars
z179488
Deliver every two days
Deliver every two days
Alexandru Bolboaca
21st century innovation
21st century innovation
Tim Harper
Falconjsの始め方 (share)
Falconjsの始め方 (share)
Jun Funakura
第一回Miim勉強会
第一回Miim勉強会
Yuri Kawamoto
Movable Type 6 Overview - New York Perl Mongers Tech Talk
Movable Type 6 Overview - New York Perl Mongers Tech Talk
Yuji Takayama
SolrとElasticsearchの比較
SolrとElasticsearchの比較
genta kaneyama
GDK48総選挙の裏側
GDK48総選挙の裏側
Kiyotaka Oku
Aiming study#6pdf
Aiming study#6pdf
Koutaro Chikuba
物理エンジンを使って 3Dに息を吹き込む
物理エンジンを使って 3Dに息を吹き込む
Kazuya Hiruma
Infrastructure as code for azure
Infrastructure as code for azure
Keiji Kamebuchi
More Related Content
Viewers also liked
150309 cotton open letter to iranian leaders
150309 cotton open letter to iranian leaders
Anochi.com.
Trabajo de tic (conte)
Trabajo de tic (conte)
lautaro
2010 Chevy Traverse in El Paso, TX
2010 Chevy Traverse in El Paso, TX
Viva Chevrolet
Portfolio Samples
Portfolio Samples
nethaneel
דיווח לוועדת התרבות מרץ 2015 (2)
דיווח לוועדת התרבות מרץ 2015 (2)
Anochi.com.
911 dias
911 dias
rogerfacil
Proyecto PP Grupo 3
Proyecto PP Grupo 3
bhodeler
Costs of oil impacts and equilibrium of oil price
Costs of oil impacts and equilibrium of oil price
Business Innovation Research Development
Susan alex july
Susan alex july
MaherBirdAssociates
Optimizing Facebook Engagement
Optimizing Facebook Engagement
stu.Dio
bmxを普及させるための方法 ー
bmxを普及させるための方法 ー
rhmnsjkkk29
H:\Bca\Cars
H:\Bca\Cars
z179488
Deliver every two days
Deliver every two days
Alexandru Bolboaca
21st century innovation
21st century innovation
Tim Harper
Viewers also liked
(14)
150309 cotton open letter to iranian leaders
150309 cotton open letter to iranian leaders
Trabajo de tic (conte)
Trabajo de tic (conte)
2010 Chevy Traverse in El Paso, TX
2010 Chevy Traverse in El Paso, TX
Portfolio Samples
Portfolio Samples
דיווח לוועדת התרבות מרץ 2015 (2)
דיווח לוועדת התרבות מרץ 2015 (2)
911 dias
911 dias
Proyecto PP Grupo 3
Proyecto PP Grupo 3
Costs of oil impacts and equilibrium of oil price
Costs of oil impacts and equilibrium of oil price
Susan alex july
Susan alex july
Optimizing Facebook Engagement
Optimizing Facebook Engagement
bmxを普及させるための方法 ー
bmxを普及させるための方法 ー
H:\Bca\Cars
H:\Bca\Cars
Deliver every two days
Deliver every two days
21st century innovation
21st century innovation
Similar to XHR2 Wonder Land
Falconjsの始め方 (share)
Falconjsの始め方 (share)
Jun Funakura
第一回Miim勉強会
第一回Miim勉強会
Yuri Kawamoto
Movable Type 6 Overview - New York Perl Mongers Tech Talk
Movable Type 6 Overview - New York Perl Mongers Tech Talk
Yuji Takayama
SolrとElasticsearchの比較
SolrとElasticsearchの比較
genta kaneyama
GDK48総選挙の裏側
GDK48総選挙の裏側
Kiyotaka Oku
Aiming study#6pdf
Aiming study#6pdf
Koutaro Chikuba
物理エンジンを使って 3Dに息を吹き込む
物理エンジンを使って 3Dに息を吹き込む
Kazuya Hiruma
Infrastructure as code for azure
Infrastructure as code for azure
Keiji Kamebuchi
オンプレでPrivate Registry使ったDockerイメージの運用について
オンプレでPrivate Registry使ったDockerイメージの運用について
YASUKAZU NAGATOMI
Similar to XHR2 Wonder Land
(9)
Falconjsの始め方 (share)
Falconjsの始め方 (share)
第一回Miim勉強会
第一回Miim勉強会
Movable Type 6 Overview - New York Perl Mongers Tech Talk
Movable Type 6 Overview - New York Perl Mongers Tech Talk
SolrとElasticsearchの比較
SolrとElasticsearchの比較
GDK48総選挙の裏側
GDK48総選挙の裏側
Aiming study#6pdf
Aiming study#6pdf
物理エンジンを使って 3Dに息を吹き込む
物理エンジンを使って 3Dに息を吹き込む
Infrastructure as code for azure
Infrastructure as code for azure
オンプレでPrivate Registry使ったDockerイメージの運用について
オンプレでPrivate Registry使ったDockerイメージの運用について
XHR2 Wonder Land
1.
2012-11-22『HTML5実力テスト』答え合わせ勉強会!
XHR2 WONDERLAND @ykhs 12年11月22日木曜日
2.
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日木曜日
6.
EVENT (XHR)
!!! onreadystatechange !!! 12年11月22日木曜日
7.
BINARY DATA (XHR)
Nothing... 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日木曜日
10.
ACCESS-CONTROL-ALLOW-ORIGIN •
Access-Control-Allow-Origin: http://example.com • http://example.com/ のサイトからの クロスドメイン通信を許可 12年11月22日木曜日
11.
ACCESS-CONTROL-ALLOW-METHODS •
Access-Control-Allow-Methods: POST, GET, OPTIONS • POST, GET メソッドのみを許可 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日木曜日
27.
こういうことが
できるのでは 12年11月22日木曜日
28.
FORMDATA •
Drag & Drop UI • HTML Form UI • FormData.append( • new FormData( name, value HTMLFormElement ); ); どっちでもいけるぜ! XMLHttpRequest.send(FormData) 12年11月22日木曜日
29.
どっちでもいけるぜ!
EXAMPLE - 500PX.COM 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日木曜日
32.
THANK YOU
@ykhs 12年11月22日木曜日
Download now