Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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. CROSS ORIGIN (XHR2) w $034 $SPTT0SJHJO3FTPVSDF4IBSJOH w "DDFTT$POUSPM"MMPX0SJHJO ೚ҙͷϦΫΤετݩͷαΠτʹରͯ͠ ΫϩευϝΠϯ௨৴ΛڐՄ

    w "DDFTT$POUSPM"MMPX.FUIPET ೚ҙͷϦΫΤετݩͷαΠτʹରͯ͠ )551ϝιουͷ࢖༻ΛڐՄ 12೥11݄22೔໦༵೔
  2. EVENTS (XHR2) w POMPBETUBSU w POQSPHSFTT w POBCPSU w POFSSPS

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

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

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

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

    w POMPBE w POUJNFPVU w POMPBEFOE ਐḿΠϕϯτ͕औΕΔ 12೥11݄22೔໦༵೔
  7. PROGRESS EVENT progress = document.getElementById('progress'); xhr.onprogress = function(e) { if

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

    (e.lengthComputable) { progress.value = (e.loaded / e.total) * 100; } }; ͜Ε͚ͩऴΘͬͨ શ෦Ͱ͜Ε͚ͩ શମྔΘ͔ͬͨ 12೥11݄22೔໦༵೔
  9. 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೔໦༵೔
  10. 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೔໦༵೔
  11. 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೔໦༵೔
  12. 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೔໦༵೔
  13. 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೔໦༵೔
  14. 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೔໦༵೔
  15. 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೔໦༵೔
  16. 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೔໦༵೔