JavaScriptで学ぶAjax通信

Ajax通信って何か？をサンプルコードを準備しつつまとめました。初心者向けです。
（Project Compass）

Transcript

1. JavaScriptͰֶͿAjax௨৴ toshi0607.com 2014/8/16 @Tech Garden School Project Compass 1
2. ͜ΕԿͷࢿྉʁ •  ର৅ ɹ− Ajax௨৴ͷ֓ཁΛཧղ͍ͨ͠ਓ ɹ− WEBαʔϏεͷUXΛߴΊ͍ͨਓ •  ಺༰ͷϨϕϧ ɹ− ࡞ऀɿϓϩάϥϛϯάྺ8ϲ݄͘Β͍ ɹ− ֓ཁͱ؆୯ͳαϯϓϧ Project Compass 2
3. ໨࣍ ̍ɽAjax௨৴ͱ͸ʢ֓ཁʣ ̎ɽDEMO ̏ɽAjax௨৴ͱ͸ʢৄࡉʣ ̐ɽJavaScriptʢjQueryʣͰͷ࣮૷ ̑ɽ·ͱΊ ̒ɽࢀߟࢿྉ Project Compass 3
4. ໨࣍ ̍ɽAjax௨৴ͱ͸ʢ֓ཁʣ ̎ɽDEMO ̏ɽAjax௨৴ͱ͸ʢৄࡉʣ ̐ɽJavaScriptʢjQueryʣͰͷ࣮૷ ̑ɽ·ͱΊ ̒ɽࢀߟࢿྉ Project Compass 4
5. ̍ɽAjax௨৴ͱ͸ ʮAjaxʢAsynchronous JavaScript + XMLʣ ΛҰݴͰݴ͏ͳΒ͹ɺʮJavaScriptʢXML HttpRequestΦϒδΣΫτʣΛར༻ͯ͠αʔ όଆͱඇಉظ௨৴Λߦ͍ɺड͚औͬͨ݁Ռ ΛDOMʢDocumentObjectModelʣܦ༝Ͱ ϖʔδʹ൓ө͢Δ͘͠ΈͰ͢ɻʯ ࢁా঵׮ஶʰJavaScriptຊ֨ೖ໳ʱʢ2010೥ɺٕज़ධ࿦ࣾʣΑΓ Project Compass 5
6. ̍ɽAjax௨৴ͱ͸ 6
7. ໨࣍ ̍ɽAjax௨৴ͱ͸ʢ֓ཁʣ ̎ɽDEMO ̏ɽAjax௨৴ͱ͸ʢৄࡉʣ ̐ɽJavaScriptʢjQueryʣͰͷ࣮૷ ̑ɽ·ͱΊ ̒ɽࢀߟࢿྉ Project Compass 7
8. ̎ɽDEMO Project Compass 8 ©GitHub, Inc. ඦฉ͸Ұݟʹ೗͔ͣɻ ϩʔΧϧαʔό্Ͱ࣮ߦ͍ͯͩ͘͠͞ʂ αϯϓϧίʔυ https://github.com/toshi0607/Sato-Seminar
9. ໨࣍ ̍ɽAjax௨৴ͱ͸ʢ֓ཁʣ ̎ɽDEMO ̏ɽAjax௨৴ͱ͸ʢৄࡉʣ ̐ɽJavaScriptʢjQueryʣͰͷ࣮૷ ̑ɽ·ͱΊ ̒ɽࢀߟࢿྉ Project Compass 9
10. ̏ɽAjax௨৴ͱ͸ʢৄࡉʣ αʔόͱͷ௨৴݁ՌΛߋ৽ՕॴͷΈʹ൓ө − ߴ଎ɾܰշͳڍಈ − ௨৴த΋ૢ࡞ܧଓ ɹ Project Compass 10 ϦονͳUIߏஙʹෆՄܽͳٕज़
11. ̏ɽAjax௨৴ͱ͸ʢৄࡉʣ ɾඇಉظ௨৴ Project Compass 11 શϖʔδߋ৽ ɾಉظ௨৴ ߋ৽ՕॴͷΈߋ৽
12. ໨࣍ ̍ɽAjax௨৴ͱ͸ʢ֓ཁʣ ̎ɽDEMO ̏ɽAjax௨৴ͱ͸ʢৄࡉʣ ̐ɽJavaScriptʢjQueryʣͰͷ࣮૷ ̑ɽ·ͱΊ ̒ɽࢀߟࢿྉ Project Compass 12
13. ̐ɽJavaScriptʢjQueryͰͷ࣮૷ʣ Project Compass 13 AjaxΛ࣮૷͢ΔͨΊʹඞཁͳ3εςοϓ ※JavaScriptΛ࢖༻ ᶃXMLHttpRequestΦϒδΣΫτΛੜ੒ ɹ− ͜ͷΦϒδΣΫτ͕ඇಉظ௨৴Λ੍ޚ ᶄίʔϧόοΫؔ਺Λొ࿥ ɹ− αʔόԠ౴࣌ͷॲཧ಺༰ ɹ − ΦϒδΣΫτͷ௨৴ͷঢ়ଶมԽʹΑΓݺͼग़͞ΕΔ ᶅαʔόඇಉظ௨৴Λ։࢝
14. ̐ɽJavaScriptʢjQueryͰͷ࣮૷ʣ Project Compass 14 αϯϓϧίʔυhw4-ajax-sample_js.html ᶃΦϒδΣΫτΛੜ੒ ᶄίʔϧόοΫؔ਺Λొ࿥ ᶅαʔόඇಉظ௨৴Λ։࢝
15. ̐ɽJavaScriptʢjQueryͰͷ࣮૷ʣ Project Compass 15 αϯϓϧίʔυhw4-ajax-sample_js.html αϯϓϧίʔυhw4-ajax-sample_jq.html 40%࡟ݮʂ JQueryͰΑΓ؆ܿʹ࠶ݱʂ
16. ໨࣍ ̍ɽAjax௨৴ͱ͸ʢ֓ཁʣ ̎ɽDEMO ̏ɽAjax௨৴ͱ͸ʢৄࡉʣ ̐ɽJavaScriptʢjQueryʣͰͷ࣮૷ ̑ɽ·ͱΊ ̒ɽࢀߟࢿྉ Project Compass 16
17. ̑ɽ·ͱΊ Project Compass 17 ᶃૢ࡞ੑͷվળ ɹ− ௨৴ຖʹൃੜ͍ͯͨ͠ϖʔδνϥπΩΛղফ ɹ − αʔόͷॲཧத΋ΫϥΠΞϯτଆͰॲཧܧଓ ᶄύϑΥʔϚϯεͷ޲্ ɹ− ϖʔδͷඞཁͳ෦෼Λߋ৽͢ΔͷͰɺ௨৴ྔ࠷খԽ ɹ − αʔόͷॲཧ଴͕ͪͳ͘ɺମײ଎౓͕޲্ ᶅ։ൃੜ࢈ੑʗӡ༻ੑͷ޲্ ɹ − ϦονͳUIΛඪ४తͳٕज़͚ͩͰߏங ɹ − ಈ࡞ʹඞཁͳ౰ผͳϓϥάΠϯ͕ෆཁͰɺಋೖ͕༰қ −
18. ໨࣍ ̍ɽAjax௨৴ͱ͸ʢ֓ཁʣ ̎ɽDEMO ̏ɽAjax௨৴ͱ͸ʢৄࡉʣ ̐ɽJavaScriptʢjQueryʣͰͷ࣮૷ ̑ɽ·ͱΊ ̒ɽࢀߟࢿྉ Project Compass 18
19. ̒ɽࢀߟࢿྉ Project Compass 19 ɾࢁా঵׮ஶʰJavaScriptຊ֨ೖ໳ʱ ɹʢ2010೥ɺٕज़ධ࿦ࣾʣ ɹ− ଟ਺ஶॻ͋Γɻ୯ʹಈ͚͹͍͍ʂͱ͍͏Θ͚Ͱͳ͘ɺ ɹɹٕज़ొ৔ͷഎܠ͔Βղઆ͕ΈͬͪΓͰ͢ɻେ޷͖Ͱ͢ɻ ɾ੢ാҰഅஶʰWeb੍࡞ͷݱ৔Ͱ࢖͏jQueryσβΠϯೖ໳ʱ ɹʢ2013೥ɺWEB PROFESSIONALʣ ɹ − WebσβΠφʔ޲͚ͱ͍͏ׂΓ੾Γ͕͋Γɺ ɹɹ఍߅ͳ͘આ໌͕಄ʹೖ͖ͬͯ·͢ɻ ɾYuta Motishige࡞ʰݟ΍͍͢ϓϨθϯࢿྉͷ࡞Γํʱ ɹʢhttp://www.slideshare.net/yutamorishige50/how-to-present-betterʣ ɹ − ύϫϙ࡞੒ηϯε0ɺࡢ೥ಉҰࢿྉ41ճ࡞Γ௚͠ͷ๻͸ ɹɹͦͷޙʹ͜ͷࢿྉΛ஌Γ·ͨ͠…ɻ