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
もうすぐ新年度、Babylon.jsがお勧めな3個の理由
hideg
0
170
GitHub Copilot Tips and Tricks
yuichielectric
26
7.5k
Learning PHP and Static Analysis with PHP Parser
inouehi
1
250
AppDeveloperCon 2024 EU: Building polyglot developer experiences in 2024
salaboy
0
380
TCA魔法学入門🪄
dazy
0
280
Crafting a Own PHP - ウキウキ手作りミニマリストPHP
uzulla
4
1.1k
Some Quick Ideas To Improve Your Tests ( #jassttokyo )
teyamagu
PRO
2
2.3k
Go1.22からの疑似乱数生成器について/go-122-pseudo-random-generator
convto
1
160
両面どころかインフラもTSでできるよ ~ 全方位TypeScriptによるプロダクト開発 ~
myfinder
8
2.3k
The Future of C++ Interoperability: Insights from Porting a Game to Swift
teamhimeh
0
270
App Router への移行は「改善」となり得るのか?/ Can migration to App Router be an improvement
takefumiyoshii
1
130
DDD, necessary but insufficient: physical design principles for microservices
cer
PRO
0
2.2k
Featured
See All Featured
Scaling GitHub
holman
456
140k
Designing on Purpose - Digital PM Summit 2013
jponch
109
6.4k
A designer walks into a library…
pauljervisheath
199
23k
Writing Fast Ruby
sferik
619
59k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
67
38k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
14
1.3k
What's in a price? How to price your products and services
michaelherold
236
11k
Thoughts on Productivity
jonyablonski
57
3.8k
A Philosophy of Restraint
colly
195
15k
Keith and Marios Guide to Fast Websites
keithpitt
407
22k
Facilitating Awesome Meetings
lara
39
5.5k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
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༵