ajaxを使うとどんないいことがあるか、ふわっとした解説を行いました。

1. @carotene4035

2. Ajaxと⾮非Ajaxについて
⽐比較してみる

3. ⼤大きくわけて２つの違いがある

4. １．体感速度度の違い

5. ⾮非Ajaxの場合

6. ⾮非Ajax（普通の通信）
クライアント サーバ

7. ⾮非Ajax（普通の通信）
クライアント サーバ

8. ⾮非Ajax（普通の通信）
クライアント サーバ
ボタンを押した
タイミングで、
サーバにリクエストが
送られる

9. ⾮非Ajax（普通の通信）
クライアント サーバ
サーバ側で処理を行う

10. ⾮非Ajax（普通の通信）
クライアント サーバ
サーバ側で処理を行う
読み込み状態になる

11. ⾮非Ajax（普通の通信）
クライアント サーバ

12. Ajaxの場合

13. Ajax
クライアント サーバ

14. Ajax
クライアント サーバ

15. Ajax
クライアント サーバ
サーバ側で処理を
行う

16. Ajax
クライアント サーバ
読み込み状態に
ならない

17. Ajax
クライアント サーバ

18. ⾮非Ajax
クライアント サーバ クライアント サーバ
Ajax

19. ⾮非Ajax
クライアント サーバ クライアント サーバ
Ajax
サーバと通信をしている間、
ブラウザ側で
読み込み状態になるかならないか
の違いがある

20. ワーク１：差を体感してみよう
git clone https://github.com/carotene4035/
ajax.git

21. 読み込みが⾏行行われるか
⾏行行われないかで、
体感速度度が異異なる。

22. ２．返すデータが全部か
⼀一部かの違い

23. ⾮非Ajax（普通の通信）
クライアント サーバ
Htmlファイル全体が返る

24. ⾮非Ajax（普通の通信）
クライアント サーバ
Htmlファイル全体が返る

25. Ajax
クライアント サーバ
Jsonが返る

26. Ajax
クライアント サーバ
Jsonが返る

27. Ajax通信の場合、
必要なデータだけ取得するので、
通信データサイズが⼩小さくなる。

28. Ajaxと⾮非Ajax
⾮非Ajax
• 通信量量：⼤大
• 読み込み状態になる
Ajax
• 通信量量：⼩小
• 読み込み状態にならない

29. Ajaxと⾮非Ajax
⾮非Ajax
• 通信データ量量が重い
• 遅く感じる
Ajax
• 通信データ量量が軽い
• 早く感じる

30. Ajaxと⾮非Ajax
⾮非Ajax
• ユーザビリティが低い
Ajax
• ユーザビリティが⾼高い

31. ワーク２：
やり取りされているajaxの
データ内容を確認してみよう！

32. ヒントは
google developper tool の
network