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回作り直しの僕は 　　その後にこの資料を知りました…。