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
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
14
4.7k
5分で理解する SOLID 原則 #phpcon_nagoya
shogogg
1
310
SwiftUI Viewの責務分離
elmetal
PRO
2
270
Ruby on cygwin 2025-02
fd0
0
180
Boos Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
340
Unity Android XR入門
sakutama_11
0
180
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
900
未経験でSRE、はじめました! 組織を支える役割と軌跡
curekoshimizu
1
160
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
150
React 19アップデートのために必要なこと
uhyo
8
1.5k
クリーンアーキテクチャから見る依存の向きの大切さ
shimabox
5
1.1k
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
920
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Visualization
eitanlees
146
15k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Agile that works and the tools we love
rasmusluckow
328
21k
The Invisible Side of Design
smashingmag
299
50k
4 Signs Your Business is Dying
shpigford
182
22k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
133
33k
BBQ
matthewcrist
87
9.5k
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༵