Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JavaScriptで学ぶAjax通信
Search
Toshinori Sugita
August 14, 2014
Programming
230
0
Share
JavaScriptで学ぶAjax通信
Ajax通信って何か?をサンプルコードを準備しつつまとめました。初心者向けです。
(Project Compass)
Toshinori Sugita
August 14, 2014
More Decks by Toshinori Sugita
See All by Toshinori Sugita
GKEを中心としたマルチプロダクト・マルチリージョン対応アプリケーションプラットフォームの継続的改善 / continuous improvement of GKE based application platform
toshi0607
1
170
組織を巻き込む大規模プラットフォーム移行戦略 〜50+サービスのマルチリージョン・マルチプロダクト化で学んだステークホルダー協働の実践〜 / Platform migration strategy engaging all stakeholders
toshi0607
2
6.3k
文系学部卒ソフトウェアエンジニアが Georgia Techコンピューターサイエンス修士課程で直面したもの / What a Liberal Arts Graduate Software Engineer Faced in Georgia Tech's Computer Science Master's Program
toshi0607
4
1.7k
50以上のマイクロサービスを支えるアプリケーションプラットフォームの設計・構築の後悔と進化 #CNDW2024 / regrets and evolution of application platform
toshi0607
5
9.2k
OPA and cloud resources
toshi0607
1
14k
KompalWeather: Serverless Sauna Service with Cloud Run
toshi0607
1
13k
Knativeで作るDIY FaaS / serverless days fukuoka 2019 knative workshop
toshi0607
1
5.3k
Knativeで作るDIY FaaS / serverless days tokyo 2019 knative workshop
toshi0607
5
11k
Knativeへの誘い / Go Go Knative!
toshi0607
4
5.9k
Other Decks in Programming
See All in Programming
Agentic Elixir
whatyouhide
0
430
「Linuxサーバー構築標準教科書」を読んでみた #ツナギメオフライン.7
akase244
0
1.4k
PHPでローカル環境用のSSL/TLS証明書を発行することはできるのか? #phpconkagawa
akase244
0
290
How We Practice Exploratory Testing in Iterative Development( #scrumniigata ) / 反復開発の中で、探索的テストをどう実施しているか
teyamagu
PRO
3
530
Don't Prompt Harder, Structure Better
kitasuke
0
800
2026_04_15_量子計算をパズルとして解く
hideakitakechi
0
130
Surviving Black Friday: 329 billion requests with Falcon!
ioquatix
0
2.5k
AWSコミュニティ活動は顧客のクラウド推進に効くのか / Do AWS community activities help customers adopt the cloud?
seike460
PRO
0
160
ふりがな Deep Dive try! Swift Tokyo 2026
watura
0
270
いつか誰かが、と思っていた フロントエンド刷新5年間の実践知
kiichisugihara
1
240
PHPでバイナリをパースして理解するASN.1
muno92
PRO
0
370
アクセシビリティ試験の"その後"を仕組み化する
yuuumiravy
1
190
Featured
See All Featured
Public Speaking Without Barfing On Your Shoes - THAT 2023
reverentgeek
1
380
Build your cross-platform service in a week with App Engine
jlugia
234
18k
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
inesmontani
PRO
0
360
Believing is Seeing
oripsolob
1
120
The Curious Case for Waylosing
cassininazir
0
330
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
25
1.9k
Stop Working from a Prison Cell
hatefulcrawdad
274
21k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
820
What’s in a name? Adding method to the madness
productmarketing
PRO
24
4k
Applied NLP in the Age of Generative AI
inesmontani
PRO
4
2.2k
jQuery: Nuts, Bolts and Bling
dougneiner
66
8.4k
Designing Experiences People Love
moore
143
24k
Transcript
JavaScriptͰֶͿAjax௨৴ toshi0607.com 2014/8/16 @Tech Garden School Project Compass 1
͜ΕԿͷࢿྉʁ • ର ɹ− Ajax௨৴ͷ֓ཁΛཧղ͍ͨ͠ਓ ɹ− WEBαʔϏεͷUXΛߴΊ͍ͨਓ • ༰ͷϨϕϧ ɹ−
࡞ऀɿϓϩάϥϛϯάྺ8ϲ݄͘Β͍ ɹ− ֓ཁͱ؆୯ͳαϯϓϧ Project Compass 2
࣍ ̍ɽAjax௨৴ͱʢ֓ཁʣ ̎ɽDEMO ̏ɽAjax௨৴ͱʢৄࡉʣ ̐ɽJavaScriptʢjQueryʣͰͷ࣮ ̑ɽ·ͱΊ ̒ɽࢀߟࢿྉ Project Compass 3
࣍ ̍ɽAjax௨৴ͱʢ֓ཁʣ ̎ɽDEMO ̏ɽAjax௨৴ͱʢৄࡉʣ ̐ɽJavaScriptʢjQueryʣͰͷ࣮ ̑ɽ·ͱΊ ̒ɽࢀߟࢿྉ Project Compass 4
̍ɽAjax௨৴ͱ ʮAjaxʢAsynchronous JavaScript + XMLʣ ΛҰݴͰݴ͏ͳΒɺʮJavaScriptʢXML HttpRequestΦϒδΣΫτʣΛར༻ͯ͠αʔ όଆͱඇಉظ௨৴Λߦ͍ɺड͚औͬͨ݁Ռ ΛDOMʢDocumentObjectModelʣܦ༝Ͱ ϖʔδʹө͢Δ͘͠ΈͰ͢ɻʯ
ࢁాஶʰJavaScriptຊ֨ೖʱʢ2010ɺٕज़ධࣾʣΑΓ Project Compass 5
̍ɽAjax௨৴ͱ 6
࣍ ̍ɽAjax௨৴ͱʢ֓ཁʣ ̎ɽDEMO ̏ɽAjax௨৴ͱʢৄࡉʣ ̐ɽJavaScriptʢjQueryʣͰͷ࣮ ̑ɽ·ͱΊ ̒ɽࢀߟࢿྉ Project Compass 7
̎ɽDEMO Project Compass 8 ©GitHub, Inc. ඦฉҰݟʹ͔ͣɻ ϩʔΧϧαʔό্Ͱ࣮ߦ͍ͯͩ͘͠͞ʂ αϯϓϧίʔυ https://github.com/toshi0607/Sato-Seminar
࣍ ̍ɽAjax௨৴ͱʢ֓ཁʣ ̎ɽDEMO ̏ɽAjax௨৴ͱʢৄࡉʣ ̐ɽJavaScriptʢjQueryʣͰͷ࣮ ̑ɽ·ͱΊ ̒ɽࢀߟࢿྉ Project Compass 9
̏ɽAjax௨৴ͱʢৄࡉʣ αʔόͱͷ௨৴݁ՌΛߋ৽ՕॴͷΈʹө − ߴɾܰշͳڍಈ − ௨৴தૢ࡞ܧଓ ɹ Project Compass 10
ϦονͳUIߏஙʹෆՄܽͳٕज़
̏ɽAjax௨৴ͱʢৄࡉʣ ɾඇಉظ௨৴ Project Compass 11 શϖʔδߋ৽ ɾಉظ௨৴ ߋ৽ՕॴͷΈߋ৽
࣍ ̍ɽAjax௨৴ͱʢ֓ཁʣ ̎ɽDEMO ̏ɽAjax௨৴ͱʢৄࡉʣ ̐ɽJavaScriptʢjQueryʣͰͷ࣮ ̑ɽ·ͱΊ ̒ɽࢀߟࢿྉ Project Compass 12
̐ɽJavaScriptʢjQueryͰͷ࣮ʣ Project Compass 13 AjaxΛ࣮͢ΔͨΊʹඞཁͳ3εςοϓ ※JavaScriptΛ༻ ᶃXMLHttpRequestΦϒδΣΫτΛੜ ɹ− ͜ͷΦϒδΣΫτ͕ඇಉظ௨৴Λ੍ޚ ᶄίʔϧόοΫؔΛొ
ɹ− αʔόԠ࣌ͷॲཧ༰ ɹ − ΦϒδΣΫτͷ௨৴ͷঢ়ଶมԽʹΑΓݺͼग़͞ΕΔ ᶅαʔόඇಉظ௨৴Λ։࢝
̐ɽJavaScriptʢjQueryͰͷ࣮ʣ Project Compass 14 αϯϓϧίʔυhw4-ajax-sample_js.html ᶃΦϒδΣΫτΛੜ ᶄίʔϧόοΫؔΛొ ᶅαʔόඇಉظ௨৴Λ։࢝
̐ɽJavaScriptʢjQueryͰͷ࣮ʣ Project Compass 15 αϯϓϧίʔυhw4-ajax-sample_js.html αϯϓϧίʔυhw4-ajax-sample_jq.html 40%ݮʂ JQueryͰΑΓ؆ܿʹ࠶ݱʂ
࣍ ̍ɽAjax௨৴ͱʢ֓ཁʣ ̎ɽDEMO ̏ɽAjax௨৴ͱʢৄࡉʣ ̐ɽJavaScriptʢjQueryʣͰͷ࣮ ̑ɽ·ͱΊ ̒ɽࢀߟࢿྉ Project Compass 16
̑ɽ·ͱΊ Project Compass 17 ᶃૢ࡞ੑͷվળ ɹ− ௨৴ຖʹൃੜ͍ͯͨ͠ϖʔδνϥπΩΛղফ ɹ − αʔόͷॲཧதΫϥΠΞϯτଆͰॲཧܧଓ
ᶄύϑΥʔϚϯεͷ্ ɹ− ϖʔδͷඞཁͳ෦Λߋ৽͢ΔͷͰɺ௨৴ྔ࠷খԽ ɹ − αʔόͷॲཧ͕ͪͳ͘ɺମײ্͕ ᶅ։ൃੜ࢈ੑʗӡ༻ੑͷ্ ɹ − ϦονͳUIΛඪ४తͳٕज़͚ͩͰߏங ɹ − ಈ࡞ʹඞཁͳผͳϓϥάΠϯ͕ෆཁͰɺಋೖ͕༰қ −
࣍ ̍ɽAjax௨৴ͱʢ֓ཁʣ ̎ɽDEMO ̏ɽAjax௨৴ͱʢৄࡉʣ ̐ɽJavaScriptʢjQueryʣͰͷ࣮ ̑ɽ·ͱΊ ̒ɽࢀߟࢿྉ Project Compass 18
̒ɽࢀߟࢿྉ Project Compass 19 ɾࢁాஶʰJavaScriptຊ֨ೖʱ ɹʢ2010ɺٕज़ධࣾʣ ɹ− ଟஶॻ͋Γɻ୯ʹಈ͚͍͍ʂͱ͍͏Θ͚Ͱͳ͘ɺ ɹɹٕज़ొͷഎܠ͔Βղઆ͕ΈͬͪΓͰ͢ɻେ͖Ͱ͢ɻ ɾാҰഅஶʰWeb੍࡞ͷݱͰ͏jQueryσβΠϯೖʱ
ɹʢ2013ɺWEB PROFESSIONALʣ ɹ − WebσβΠφʔ͚ͱ͍͏ׂΓΓ͕͋Γɺ ɹɹ߅ͳ͘આ໌͕಄ʹೖ͖ͬͯ·͢ɻ ɾYuta Motishige࡞ʰݟ͍͢ϓϨθϯࢿྉͷ࡞Γํʱ ɹʢhttp://www.slideshare.net/yutamorishige50/how-to-present-betterʣ ɹ − ύϫϙ࡞ηϯε0ɺࡢಉҰࢿྉ41ճ࡞Γ͠ͷ ɹɹͦͷޙʹ͜ͷࢿྉΛΓ·ͨ͠…ɻ