$30 off During Our Annual Pro Sale. View Details »

XHR2 WONDERLAND

ykhs
November 22, 2012

XHR2 WONDERLAND

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

ykhs

November 22, 2012
Tweet

Other Decks in Programming

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