XHR2 WONDERLAND

2012/11/22『HTML5実力テスト』答え合わせ勉強会！ の発表資料です
http://atnd.org/event/jsdoit1122

Transcript

1. ʰ)5.-࣮ྗςετʱ౴͑߹Θͤษڧձʂ XHR2 WONDERLAND @ykhs 12೥11݄22೔໦༵೔
2. WHO? w ࢁా
   ॱٱ
   :VLJIJTB
   :"."%" w 'SPOU&OE
   &OHJOFFS
   !1JYFM(SJE
   *OD 12೥11݄22೔໦༵೔
3. OUTLINE w "CPVU
   9)3 w $034
   $SPTT
   0SJHJO
   3FTPVSDF
   4IBSJOH w &WFOUT w #JOBSZ
   %BUB 12೥11݄22೔໦༵೔
4. XHR... w ҟͳΔυϝΠϯؒͷ௨৴
   ˠ
   /( w ਐḿͳͲͷࡉ͔͍Πϕϯτ
   ˠ
   /( w όΠφϦσʔλͷѻ͍
   ˠ
   /( 12೥11݄22೔໦༵೔
5. CROSS ORIGIN (XHR) w 1SPYZ ಉ͡υϝΠϯԼͷαʔόʔαΠυݴޠʹ औ͖ͬͯͯ΋Β͏ w +40/1 +40/
   σʔλΛҾ਺ʹͨ͠ίʔϧόοΫؔ਺ͷ ݺͼग़͕͠هड़͞Εͨ֎෦εΫϦϓτΛಡΈࠐΉ 12೥11݄22೔໦༵೔
6. EVENT (XHR) !!! onreadystatechange !!! 12೥11݄22೔໦༵೔
7. BINARY DATA (XHR) Nothing... 12೥11݄22೔໦༵೔
8. XHR2!!! w ҟͳΔυϝΠϯؒͷ௨৴
   ˠ
   0, w ਐḿͳͲͷࡉ͔͍Πϕϯτ
   ˠ
   0, w όΠφϦσʔλͷѻ͍
   ˠ
   0, 12೥11݄22೔໦༵೔
9. CROSS ORIGIN (XHR2) w $034
   $SPTT
   0SJHJO
   3FTPVSDF
   4IBSJOH w "DDFTT$POUSPM"MMPX0SJHJO ೚ҙͷϦΫΤετݩͷαΠτʹରͯ͠ ΫϩευϝΠϯ௨৴ΛڐՄ w "DDFTT$POUSPM"MMPX.FUIPET ೚ҙͷϦΫΤετݩͷαΠτʹରͯ͠ )551
   ϝιουͷ࢖༻ΛڐՄ 12೥11݄22೔໦༵೔
10. ACCESS-CONTROL-ALLOW-ORIGIN w "DDFTT$POUSPM"MMPX0SJHJO IUUQFYBNQMFDPN w IUUQFYBNQMFDPN
    ͷαΠτ͔Βͷ ΫϩευϝΠϯ௨৴ΛڐՄ 12೥11݄22೔໦༵೔
11. ACCESS-CONTROL-ALLOW-METHODS w "DDFTT$POUSPM"MMPX.FUIPET 1045
    (&5
    015*0/4 w 1045
    (&5
    ϝιουͷΈΛڐՄ 12೥11݄22೔໦༵೔
12. EVENTS (XHR2) w POMPBETUBSU w POQSPHSFTT w POBCPSU w POFSSPS w POMPBE w POUJNFPVU w POMPBEFOE 12೥11݄22೔໦༵೔
13. EVENTS (XHR2) w POMPBETUBSU w POQSPHSFTT w POBCPSU w POFSSPS w POMPBE w POUJNFPVU w POMPBEFOE ։࢝Πϕϯτ͕औΕΔ 12೥11݄22೔໦༵೔
14. EVENTS (XHR2) w POMPBETUBSU w POQSPHSFTT w POBCPSU w POFSSPS w POMPBE w POUJNFPVU w POMPBEFOE ׬ྃΠϕϯτ͕औΕΔ 12೥11݄22೔໦༵೔
15. EVENTS (XHR2) w POMPBETUBSU w POQSPHSFTT w POBCPSU w POFSSPS w POMPBE w POUJNFPVU w POMPBEFOE தࢭɾΤϥʔܥΠϕϯτ͕औΕΔ 12೥11݄22೔໦༵೔
16. EVENTS (XHR2) w POMPBETUBSU w POQSPHSFTT w POBCPSU w POFSSPS w POMPBE w POUJNFPVU w POMPBEFOE ਐḿΠϕϯτ͕औΕΔ 12೥11݄22೔໦༵೔
17. PROGRESS EVENT progress = document.getElementById('progress'); xhr.onprogress = function(e) { if (e.lengthComputable) { progress.value = (e.loaded / e.total) * 100; } }; 12೥11݄22೔໦༵೔
18. PROGRESS EVENT progress = document.getElementById('progress'); xhr.onprogress = function(e) { if (e.lengthComputable) { progress.value = (e.loaded / e.total) * 100; } }; ͜Ε͚ͩऴΘͬͨ શ෦Ͱ͜Ε͚ͩ શମྔΘ͔ͬͨ 12೥11݄22೔໦༵೔
19. BINARY DATA (XHR2) w όΠφϦσʔλͷड৴ͱૹ৴͕Մೳ w ϑΥʔϜͷ಺༰Λඇಉظૹ৴ w 'JMF
    "1*
    Ͱऔಘͨ͠ϩʔΧϧϑΝΠϧ΋ѻ͑Δ 12೥11݄22೔໦༵೔
20. 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); } }; 12೥11݄22೔໦༵೔
21. 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
    
    ੜͷόΠφϦσʔλ 12೥11݄22೔໦༵೔
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 σʔλͷࢀরΛऔಘ 12೥11݄22೔໦༵೔
23. 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); 12೥11݄22೔໦༵೔
24. 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); 12೥11݄22೔໦༵೔
25. FILE API w ϩʔΧϧͷϑΝΠϧΛ
    +BWB4DSJQU
    Ͱѻ͏ʹ͸ 'JMF
    "1*
    Λར༻ w JOQVU
    ཁૉɺESPQ
    ΠϕϯτͳͲ͔Β 'JMF
    ΦϒδΣΫτΛऔಘ 12೥11݄22೔໦༵೔
26. 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
    ͱ͍͏ͷ΋ΞϦ 12೥11݄22೔໦༵೔
27. ͜͏͍͏͜ͱ͕ Ͱ͖ΔͷͰ͸ 12೥11݄22೔໦༵೔
28. FORMDATA w %SBH
    
    %SPQ
    6* w 'PSN%BUBBQQFOE
    
    OBNF
    WBMVF  w )5.-
    'PSN
    6* w OFX
    'PSN%BUB
    
    )5.-'PSN&MFNFOU  9.-)UUQ3FRVFTUTFOE 'PSN%BUB ͲͬͪͰ΋͍͚Δͥʂ 12೥11݄22೔໦༵೔
29. EXAMPLE - 500PX.COM ͲͬͪͰ΋͍͚Δͥʂ 12೥11݄22೔໦༵೔
30. ·ͱΊ w ϋοΫʹࢧ͑ΒΕ͍ͯͨײͷ͋Δ
    9)3
    ͕ศརʹਐԽ w ແཧ໼ཧ͡Όͳ͍υϝΠϯؒ௨৴͕Ͱ͖Δ w ॆ࣮Խͨ͠Πϕϯτ΍σʔλܗࣜΛͲ͏࢖͍͔ͬͯ͘ 12೥11݄22೔໦༵೔
31. LINK w 9.-)UUQ3FRVFTU
    ʹؔ͢Δ৽͍͠ώϯτ
    
    )5.-
    3PDLT
    IUUQXXXIUNMSPDLTDPNKBUVUPSJBMTpMFYIS w 9.-)UUQ3FRVFTU IUUQEWDTXPSHIHYISSBXpMFUJQ0WFSWJFXIUNM w $SPTT0SJHJO
    3FTPVSDF
    4IBSJOH IUUQXXXXPSH53DPST w 'JMF
    "1* IUUQXXXXPSH53pMFVQMPBE w 'JMF
    "1*
    %JSFDUPSJFT
    BOE
    4ZTUFN IUUQEFWXPSHEBQpMFTZTUFNQVC'JMF4ZTUFN 12೥11݄22೔໦༵೔
32. THANK YOU @ykhs 12೥11݄22೔໦༵೔