Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
XHR2 WONDERLAND
Search
ykhs
November 22, 2012
Programming
1
190
XHR2 WONDERLAND
2012/11/22『HTML5実力テスト』答え合わせ勉強会! の発表資料です
http://atnd.org/event/jsdoit1122
ykhs
November 22, 2012
Tweet
Share
Other Decks in Programming
See All in Programming
CSC307 Lecture 13
javiergs
PRO
0
150
Cloudflare Workers x AWS Lambdaの組み合わせユースケース / Cloudflare Workers x AWS Lambda Combination Use Case
seike460
PRO
2
310
Advanced App Shrinking Techniques
cbeyls
2
150
Google's Recipe for Scaling (Web) Security – LocoMocoSec 2024
lweichselbaum
0
170
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
100
DMMプラットフォームにおけるTiDBの導入から運用まで
pospome
7
3k
3 Effective Rules for Success with Signals in Angular
manfredsteyer
PRO
0
120
継続的な活動で築く地方エンジニアの道
myamashii
2
350
Rubyのパフォーマンスプロファイリングの改善 / Enhancing performance profiling for Ruby
osyoyu
1
410
Rust.Nagoya #1
codemountains
0
170
開発部に不満を持っていたCSがエンジニアにジョブチェンしてわかった「勝手に諦めない」ことの大切さ
sakuraikotone
28
16k
CSC307 Lecture 14
javiergs
PRO
0
220
Featured
See All Featured
Building an army of robots
kneath
301
42k
Raft: Consensus for Rubyists
vanstee
134
6.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
229
130k
Visualization
eitanlees
139
14k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
35
6.3k
Teambox: Starting and Learning
jrom
130
8.6k
A Philosophy of Restraint
colly
200
16k
Thoughts on Productivity
jonyablonski
64
4.1k
How to train your dragon (web standard)
notwaldorf
79
5.5k
Principles of Awesome APIs and How to Build Them.
keavy
124
16k
The World Runs on Bad Software
bkeepers
PRO
63
11k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
44
4.7k
Transcript
ʰ)5.-࣮ྗςετʱ͑߹Θͤษڧձʂ XHR2 WONDERLAND @ykhs 1211݄22༵
WHO? w ࢁాॱٱ :VLJIJTB:"."%" w 'SPOU&OE&OHJOFFS!1JYFM(SJE*OD 1211݄22༵
OUTLINE w "CPVU9)3 w $034 $SPTT0SJHJO3FTPVSDF4IBSJOH w &WFOUT w #JOBSZ%BUB
1211݄22༵
XHR... w ҟͳΔυϝΠϯؒͷ௨৴ˠ/( w ਐḿͳͲͷࡉ͔͍Πϕϯτˠ/( w όΠφϦσʔλͷѻ͍ˠ/( 1211݄22༵
CROSS ORIGIN (XHR) w 1SPYZ ಉ͡υϝΠϯԼͷαʔόʔαΠυݴޠʹ औ͖ͬͯͯΒ͏ w +40/1 +40/σʔλΛҾʹͨ͠ίʔϧόοΫؔͷ
ݺͼग़͕͠هड़͞Εͨ֎෦εΫϦϓτΛಡΈࠐΉ 1211݄22༵
EVENT (XHR) !!! onreadystatechange !!! 1211݄22༵
BINARY DATA (XHR) Nothing... 1211݄22༵
XHR2!!! w ҟͳΔυϝΠϯؒͷ௨৴ˠ0, w ਐḿͳͲͷࡉ͔͍Πϕϯτˠ0, w όΠφϦσʔλͷѻ͍ˠ0, 1211݄22༵
CROSS ORIGIN (XHR2) w $034 $SPTT0SJHJO3FTPVSDF4IBSJOH w "DDFTT$POUSPM"MMPX0SJHJO ҙͷϦΫΤετݩͷαΠτʹରͯ͠ ΫϩευϝΠϯ௨৴ΛڐՄ
w "DDFTT$POUSPM"MMPX.FUIPET ҙͷϦΫΤετݩͷαΠτʹରͯ͠ )551ϝιουͷ༻ΛڐՄ 1211݄22༵
ACCESS-CONTROL-ALLOW-ORIGIN w "DDFTT$POUSPM"MMPX0SJHJO IUUQFYBNQMFDPN w IUUQFYBNQMFDPNͷαΠτ͔Βͷ ΫϩευϝΠϯ௨৴ΛڐՄ 1211݄22༵
ACCESS-CONTROL-ALLOW-METHODS w "DDFTT$POUSPM"MMPX.FUIPET 1045 (&5 015*0/4 w 1045 (&5ϝιουͷΈΛڐՄ 1211݄22༵
EVENTS (XHR2) w POMPBETUBSU w POQSPHSFTT w POBCPSU w POFSSPS
w POMPBE w POUJNFPVU w POMPBEFOE 1211݄22༵
EVENTS (XHR2) w POMPBETUBSU w POQSPHSFTT w POBCPSU w POFSSPS
w POMPBE w POUJNFPVU w POMPBEFOE ։࢝Πϕϯτ͕औΕΔ 1211݄22༵
EVENTS (XHR2) w POMPBETUBSU w POQSPHSFTT w POBCPSU w POFSSPS
w POMPBE w POUJNFPVU w POMPBEFOE ྃΠϕϯτ͕औΕΔ 1211݄22༵
EVENTS (XHR2) w POMPBETUBSU w POQSPHSFTT w POBCPSU w POFSSPS
w POMPBE w POUJNFPVU w POMPBEFOE தࢭɾΤϥʔܥΠϕϯτ͕औΕΔ 1211݄22༵
EVENTS (XHR2) w POMPBETUBSU w POQSPHSFTT w POBCPSU w POFSSPS
w POMPBE w POUJNFPVU w POMPBEFOE ਐḿΠϕϯτ͕औΕΔ 1211݄22༵
PROGRESS EVENT progress = document.getElementById('progress'); xhr.onprogress = function(e) { if
(e.lengthComputable) { progress.value = (e.loaded / e.total) * 100; } }; 1211݄22༵
PROGRESS EVENT progress = document.getElementById('progress'); xhr.onprogress = function(e) { if
(e.lengthComputable) { progress.value = (e.loaded / e.total) * 100; } }; ͜Ε͚ͩऴΘͬͨ શ෦Ͱ͜Ε͚ͩ શମྔΘ͔ͬͨ 1211݄22༵
BINARY DATA (XHR2) w όΠφϦσʔλͷड৴ͱૹ৴͕Մೳ w ϑΥʔϜͷ༰Λඇಉظૹ৴ w 'JMF"1*Ͱऔಘͨ͠ϩʔΧϧϑΝΠϧѻ͑Δ 1211݄22༵
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); } }; 1211݄22༵
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); } }; ˞#MPCੜͷόΠφϦσʔλ 1211݄22༵
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); } }; ˞63-DSFBUF0CKFDU63- ϝϞϦ্ͷ#MPC σʔλͷࢀরΛऔಘ 1211݄22༵
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); 1211݄22༵
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); 1211݄22༵
FILE API w ϩʔΧϧͷϑΝΠϧΛ+BWB4DSJQUͰѻ͏ʹ 'JMF"1*Λར༻ w JOQVUཁૉɺESPQΠϕϯτͳͲ͔Β 'JMFΦϒδΣΫτΛऔಘ 1211݄22༵
FORMDATA w )5.-ͷGPSNΛ+BWB4DSJQU্Ͱ࡞ w 9.-)UUQ3FRVFTUTFOE 'PSN%BUB Ͱ NVMUJQBSUGPSNEBUBϦΫΤετΛੜ w 'PSN%BUBBQQFOE
OBNF WBMVF OBNFϑΟʔϧυ໊ WBMVFϑΟʔϧυ #MPC 'JMF 4USJOH w OFX'PSN%BUB )5.-'PSN&MFNFOU ͱ͍͏ͷΞϦ 1211݄22༵
͜͏͍͏͜ͱ͕ Ͱ͖ΔͷͰ 1211݄22༵
FORMDATA w %SBH%SPQ6* w 'PSN%BUBBQQFOE OBNF WBMVF w )5.-'PSN6*
w OFX'PSN%BUB )5.-'PSN&MFNFOU 9.-)UUQ3FRVFTUTFOE 'PSN%BUB ͲͬͪͰ͍͚Δͥʂ 1211݄22༵
EXAMPLE - 500PX.COM ͲͬͪͰ͍͚Δͥʂ 1211݄22༵
·ͱΊ w ϋοΫʹࢧ͑ΒΕ͍ͯͨײͷ͋Δ9)3͕ศརʹਐԽ w ແཧཧ͡Όͳ͍υϝΠϯؒ௨৴͕Ͱ͖Δ w ॆ࣮Խͨ͠ΠϕϯτσʔλܗࣜΛͲ͏͍͔ͬͯ͘ 1211݄22༵
LINK w 9.-)UUQ3FRVFTUʹؔ͢Δ৽͍͠ώϯτ)5.-3PDLT IUUQXXXIUNMSPDLTDPNKBUVUPSJBMTpMFYIS w 9.-)UUQ3FRVFTU IUUQEWDTXPSHIHYISSBXpMFUJQ0WFSWJFXIUNM w $SPTT0SJHJO3FTPVSDF4IBSJOH IUUQXXXXPSH53DPST
w 'JMF"1* IUUQXXXXPSH53pMFVQMPBE w 'JMF"1*%JSFDUPSJFTBOE4ZTUFN IUUQEFWXPSHEBQpMFTZTUFNQVC'JMF4ZTUFN 1211݄22༵
THANK YOU @ykhs 1211݄22༵