XHR2 WONDERLAND

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

Transcript

1. ʰ)5.-࣮ྗςετʱ౴͑߹Θͤษڧձʂ
   XHR2 WONDERLAND
   @ykhs
   12೥11݄22೔໦༵೔
   

   View Slide

2. WHO?
   w ࢁాॱٱ :VLJIJTB:"."%"
   
   w 'SPOU&OE&OHJOFFS!1JYFM(SJE*OD
   12೥11݄22೔໦༵೔
   

   View Slide

3. OUTLINE
   w "CPVU9)3
   w $034 $SPTT0SJHJO3FTPVSDF4IBSJOH
   
   w &WFOUT
   w #JOBSZ%BUB
   12೥11݄22೔໦༵೔
   

   View Slide

4. XHR...
   w ҟͳΔυϝΠϯؒͷ௨৴ˠ/(
   w ਐḿͳͲͷࡉ͔͍Πϕϯτˠ/(
   w όΠφϦσʔλͷѻ͍ˠ/(
   12೥11݄22೔໦༵೔
   

   View Slide

5. CROSS ORIGIN (XHR)
   w 1SPYZ
   ಉ͡υϝΠϯԼͷαʔόʔαΠυݴޠʹ
   औ͖ͬͯͯ΋Β͏
   w +40/1
   +40/σʔλΛҾ਺ʹͨ͠ίʔϧόοΫؔ਺ͷ
   ݺͼग़͕͠هड़͞Εͨ֎෦εΫϦϓτΛಡΈࠐΉ
   12೥11݄22೔໦༵೔
   

   View Slide

6. EVENT (XHR)
   !!! onreadystatechange !!!
   12೥11݄22೔໦༵೔
   

   View Slide

7. BINARY DATA (XHR)
   Nothing...
   12೥11݄22೔໦༵೔
   

   View Slide

8. XHR2!!!
   w ҟͳΔυϝΠϯؒͷ௨৴ˠ0,
   w ਐḿͳͲͷࡉ͔͍Πϕϯτˠ0,
   w όΠφϦσʔλͷѻ͍ˠ0,
   12೥11݄22೔໦༵೔
   

   View Slide

9. CROSS ORIGIN (XHR2)
   w $034 $SPTT0SJHJO3FTPVSDF4IBSJOH
   
   w "DDFTT$POUSPM"MMPX0SJHJO
   ೚ҙͷϦΫΤετݩͷαΠτʹରͯ͠
   ΫϩευϝΠϯ௨৴ΛڐՄ
   w "DDFTT$POUSPM"MMPX.FUIPET
   ೚ҙͷϦΫΤετݩͷαΠτʹରͯ͠
   )551ϝιουͷ࢖༻ΛڐՄ
   12೥11݄22೔໦༵೔
   

   View Slide

10. ACCESS-CONTROL-ALLOW-ORIGIN
    w "DDFTT$POUSPM"MMPX0SJHJO
    IUUQFYBNQMFDPN
    w IUUQFYBNQMFDPNͷαΠτ͔Βͷ
    ΫϩευϝΠϯ௨৴ΛڐՄ
    12೥11݄22೔໦༵೔
    

    View Slide

11. ACCESS-CONTROL-ALLOW-METHODS
    w "DDFTT$POUSPM"MMPX.FUIPET
    1045 (&5 015*0/4
    w 1045 (&5ϝιουͷΈΛڐՄ
    12೥11݄22೔໦༵೔
    

    View Slide

12. EVENTS (XHR2)
    w POMPBETUBSU
    w POQSPHSFTT
    w POBCPSU
    w POFSSPS
    w POMPBE
    w POUJNFPVU
    w POMPBEFOE
    12೥11݄22೔໦༵೔
    

    View Slide

13. EVENTS (XHR2)
    w POMPBETUBSU
    w POQSPHSFTT
    w POBCPSU
    w POFSSPS
    w POMPBE
    w POUJNFPVU
    w POMPBEFOE
    ։࢝Πϕϯτ͕औΕΔ
    12೥11݄22೔໦༵೔
    

    View Slide

14. EVENTS (XHR2)
    w POMPBETUBSU
    w POQSPHSFTT
    w POBCPSU
    w POFSSPS
    w POMPBE
    w POUJNFPVU
    w POMPBEFOE
    ׬ྃΠϕϯτ͕औΕΔ
    12೥11݄22೔໦༵೔
    

    View Slide

15. EVENTS (XHR2)
    w POMPBETUBSU
    w POQSPHSFTT
    w POBCPSU
    w POFSSPS
    w POMPBE
    w POUJNFPVU
    w POMPBEFOE
    தࢭɾΤϥʔܥΠϕϯτ͕औΕΔ
    12೥11݄22೔໦༵೔
    

    View Slide

16. EVENTS (XHR2)
    w POMPBETUBSU
    w POQSPHSFTT
    w POBCPSU
    w POFSSPS
    w POMPBE
    w POUJNFPVU
    w POMPBEFOE
    ਐḿΠϕϯτ͕औΕΔ
    12೥11݄22೔໦༵೔
    

    View Slide

17. PROGRESS EVENT
    progress = document.getElementById('progress');
    xhr.onprogress = function(e) {
    if (e.lengthComputable) {
    progress.value = (e.loaded / e.total) * 100;
    }
    };
    12೥11݄22೔໦༵೔
    

    View Slide

18. PROGRESS EVENT
    progress = document.getElementById('progress');
    xhr.onprogress = function(e) {
    if (e.lengthComputable) {
    progress.value = (e.loaded / e.total) * 100;
    }
    }; ͜Ε͚ͩऴΘͬͨ શ෦Ͱ͜Ε͚ͩ
    શମྔΘ͔ͬͨ
    12೥11݄22೔໦༵೔
    

    View Slide

19. BINARY DATA (XHR2)
    w όΠφϦσʔλͷड৴ͱૹ৴͕Մೳ
    w ϑΥʔϜͷ಺༰Λඇಉظૹ৴
    w 'JMF"1*Ͱऔಘͨ͠ϩʔΧϧϑΝΠϧ΋ѻ͑Δ
    12೥11݄22೔໦༵೔
    

    View Slide

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೔໦༵೔
    

    View Slide

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೔໦༵೔
    

    View Slide

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೔໦༵೔
    

    View Slide

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೔໦༵೔
    

    View Slide

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೔໦༵೔
    

    View Slide

25. FILE API
    w ϩʔΧϧͷϑΝΠϧΛ+BWB4DSJQUͰѻ͏ʹ͸
    'JMF"1*Λར༻
    w JOQVUཁૉɺESPQΠϕϯτͳͲ͔Β
    'JMFΦϒδΣΫτΛऔಘ
    12೥11݄22೔໦༵೔
    

    View Slide

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೔໦༵೔
    

    View Slide

27. ͜͏͍͏͜ͱ͕
    Ͱ͖ΔͷͰ͸
    12೥11݄22೔໦༵೔
    

    View Slide

28. FORMDATA
    w %SBH%SPQ6*
    w 'PSN%BUBBQQFOE
    OBNF WBMVF
    
    
    w )5.-'PSN6*
    w OFX'PSN%BUB
    )5.-'PSN&MFNFOU
    
    
    9.-)UUQ3FRVFTUTFOE 'PSN%BUB
    
    ͲͬͪͰ΋͍͚Δͥʂ
    12೥11݄22೔໦༵೔
    

    View Slide

29. EXAMPLE - 500PX.COM
    ͲͬͪͰ΋͍͚Δͥʂ
    12೥11݄22೔໦༵೔
    

    View Slide

30. ·ͱΊ
    w ϋοΫʹࢧ͑ΒΕ͍ͯͨײͷ͋Δ9)3͕ศརʹਐԽ
    w ແཧ໼ཧ͡Όͳ͍υϝΠϯؒ௨৴͕Ͱ͖Δ
    w ॆ࣮Խͨ͠Πϕϯτ΍σʔλܗࣜΛͲ͏࢖͍͔ͬͯ͘
    12೥11݄22೔໦༵೔
    

    View Slide

31. LINK
    w 9.-)UUQ3FRVFTUʹؔ͢Δ৽͍͠ώϯτ)5.-3PDLT
    IUUQXXXIUNMSPDLTDPNKBUVUPSJBMTpMFYIS
    w 9.-)UUQ3FRVFTU
    IUUQEWDTXPSHIHYISSBXpMFUJQ0WFSWJFXIUNM
    w $SPTT0SJHJO3FTPVSDF4IBSJOH
    IUUQXXXXPSH53DPST
    w 'JMF"1*
    IUUQXXXXPSH53pMFVQMPBE
    w 'JMF"1*%JSFDUPSJFTBOE4ZTUFN
    IUUQEFWXPSHEBQpMFTZTUFNQVC'JMF4ZTUFN
    12೥11݄22೔໦༵೔
    

    View Slide

32. THANK YOU
    @ykhs
    12೥11݄22೔໦༵೔
    

    View Slide