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
200
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
LINE messaging APIを使ってGoogleカレンダーと連携した予約ツールを作ってみた
takumakoike
0
140
技術を改善し続ける
gumioji
0
180
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
260
Domain-Driven Design (Tutorial)
hschwentner
13
22k
Visual StudioのGitHub Copilotでいろいろやってみる
tomokusaba
1
220
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
9
2.6k
Boos Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
660
SwiftUI Viewの責務分離
elmetal
PRO
2
280
もう少しテストを書きたいんじゃ〜 #phpstudy
o0h
PRO
21
4.4k
Jasprが凄い話
hyshu
0
190
Drawing Heighway’s Dragon- Recursive Function Rewrite- From Imperative Style in Pascal 64 To Functional Style in Scala 3
philipschwarz
PRO
0
160
Modern Angular with Signals and Signal StoreNew Rules for Your Architecture @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
100
Featured
See All Featured
Unsuck your backbone
ammeep
669
57k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
BBQ
matthewcrist
87
9.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Optimizing for Happiness
mojombo
377
70k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
440
Building Adaptive Systems
keathley
40
2.4k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
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༵