@carotene4035
Ajaxと⾮非Ajaxについて
⽐比較してみる
⼤大きくわけて2つの違いがある
1.体感速度度の違い
⾮非Ajaxの場合
⾮非Ajax(普通の通信)
クライアント サーバ
⾮非Ajax(普通の通信)
クライアント サーバ
⾮非Ajax(普通の通信)
クライアント サーバ
ボタンを押した	
  
タイミングで、	
  
サーバにリクエストが	
  
送られる	
  
⾮非Ajax(普通の通信)
クライアント サーバ
サーバ側で処理を行う	
  
⾮非Ajax(普通の通信)
クライアント サーバ
サーバ側で処理を行う	
  読み込み状態になる	
  
⾮非Ajax(普通の通信)
クライアント サーバ
Ajaxの場合
Ajax
クライアント サーバ
Ajax
クライアント サーバ
Ajax
クライアント サーバ
サーバ側で処理を	
  
行う	
  
Ajax
クライアント サーバ
読み込み状態に	
  
ならない	
  
Ajax
クライアント サーバ
⾮非Ajax
クライアント サーバ クライアント サーバ
Ajax
⾮非Ajax
クライアント サーバ クライアント サーバ
Ajax
サーバと通信をしている間、	
  
	
  
ブラウザ側で	
  
	
  
読み込み状態になるかならないか	
  
	
  
の違いがある	
  
ワーク1:差を体感してみよう
git  clone  https://github.com/carotene4035/
ajax.git  
読み込みが⾏行行われるか
⾏行行われないかで、
体感速度度が異異なる。
2.返すデータが全部か
⼀一部かの違い
⾮非Ajax(普通の通信)
クライアント サーバ
Htmlファイル全体が返る	
  
⾮非Ajax(普通の通信)
クライアント サーバ
Htmlファイル全体が返る	
  
Ajax
クライアント サーバ
Jsonが返る	
  
Ajax
クライアント サーバ
Jsonが返る	
  
Ajax通信の場合、
必要なデータだけ取得するので、
通信データサイズが⼩小さくなる。
Ajaxと⾮非Ajax
          ⾮非Ajax
•  通信量量:⼤大
•  読み込み状態になる
              Ajax
•  通信量量:⼩小
•  読み込み状態にならない
Ajaxと⾮非Ajax
          ⾮非Ajax
•  通信データ量量が重い
•  遅く感じる
              Ajax
•  通信データ量量が軽い
•  早く感じる
Ajaxと⾮非Ajax
          ⾮非Ajax
•  ユーザビリティが低い
              Ajax
•  ユーザビリティが⾼高い
ワーク2:
やり取りされているajaxの
データ内容を確認してみよう!
ヒントは
google  developper  tool  の
network

ajaxってなんなの