Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to JavaScriptで学ぶajax通信
Similar to JavaScriptで学ぶajax通信 (20)
JavaScriptで学ぶajax通信
- 2. これ何の資料？ • 対象 − Ajax通信の概要を理解したい人 − WEBサービスのUXを高めたい人 • 内容のレベル − 作者：プログラミング歴8ヶ月くらい − 概要と簡単なサンプル Project Compass 2
- 5. １．Ajax通信とは 「Ajax（Asynchronous JavaScript + XML） を一言で言うならば、「JavaScript（XML HttpRequestオブジェクト）を利用してサー バ側と非同期通信を行い、受け取った結果 をDOM（DocumentObjectModel）経由で ページに反映するしくみです。」 山田祥寛著『JavaScript本格入門』（2010年、技術評論社）より Project Compass 5
- 6. １．Ajax通信とは 6
- 8. ２．DEMO Project Compass 8 ©GitHub, Inc. 百聞は一見に如かず。 ローカルサーバ上で実行してください！ サンプルコード https://github.com/toshi0607/Sato-Seminar
- 10. ３．Ajax通信とは（詳細） サーバとの通信結果を更新箇所のみに反映 − 高速・軽快な挙動 − 通信中も操作継続 Project Compass 10 リッチなUI構築に不可欠な技術
- 12. 目次 １．Ajax通信とは（概要） ２．DEMO ３．Ajax通信とは（詳細） ４．JavaScript（jQuery）での実装 ５．まとめ ６．参考資料 Project Compass 12
- 13. ４．JavaScript（jQueryでの実装） Project Compass 13 Ajaxを実装するために必要な3ステップ ※JavaScriptを使用 ①XMLHttpRequestオブジェクトを生成 − このオブジェクトが非同期通信を制御 ②コールバック関数を登録 − サーバ応答時の処理内容 − オブジェクトの通信の状態変化により呼び出される ③サーバ非同期通信を開始
- 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回作り直しの僕は その後にこの資料を知りました…。