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
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
0
320
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
620
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
280
NPOでのDevinの活用
codeforeveryone
0
700
XP, Testing and ninja testing
m_seki
3
220
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
690
Is Xcode slowly dying out in 2025?
uetyo
1
240
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
260
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
Deep Dive into ~/.claude/projects
hiragram
10
2.2k
CursorはMCPを使った方が良いぞ
taigakono
1
220
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
KATA
mclloyd
30
14k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
What's in a price? How to price your products and services
michaelherold
246
12k
Designing for humans not robots
tammielis
253
25k
4 Signs Your Business is Dying
shpigford
184
22k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
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༵