ume

Ajaxとは

  1. Ajaxとは?
  2. HTTP通信との違い
  3. Ajax通信の流れ
  4. Ajax使用用途

Ajaxとは?

HTMLの一部を追加で読み込む通信方法

どういうこと? ⇨Ajaxが使われている具体例を見てみよう。 例 YouTube YouTubeの開くとこのように動画のサムネイルが並ぶ下の方にスクロールするとサムネイルが一瞬暗くなりどんどん追加でサムネイルが表示される=追加のHTMLがどんどん読み込まれている

HTTP通信との違い

HTTP通信はページ全体をまるっと更新している

まるっと更新? ⇨Google検索でどういうことか見ていこう。 googleで検索かけた時このように下までスクロールする追加の関連情報を閲覧するとき『次へ』をクリックするかページ数をクリックして追加の関連情報を読み込む。 実際どちらか押してみると↓ 1ページ目の情報全てが書き換えられて2ページ目が表示されている。 つまりページ全体が再度読み込まれ画面に表示されている。

Ajax通信の流れ

私たちがYouTubeを閲覧する際ブラウザーからyoutubeと入力して検索をかける YouTubeサーバーに『YouTube 見せてよー』っていう依頼した後にyoutubeサーバーから「はいどうぞ」ってデータを渡されて見れるようになっている この時点では普通のHTTP通信でやり取りしている。

それからぺージを一番下までスクロールすると今度はさっきの『YouTube見せてよー」っていう依頼(ブラウザーのurlを打ち込んでHTTPリクエスト)とは違って Ajax通信ではyoutubeの検索結果画面に含まれるjavascriptからHTTPリクエストが飛ぶそれから追加の情報が返ってくる↓

Ajax使用用途

  1. HTMLの追加 2.HTMLの更新 3.バックグラウンド処理

1.は先ほどのyoutubeのサムネイルの追加の例

2,例Facebookで言うと。左のタブからフォロー中やゲームで遊ぶというとこをクリックすると赤枠のところ(画面の一部)だけが変化する。理由としては左のタブや画面上部のヘッダーは同じ画面なのでいちいちページ全体を更新するのは非効率

3,バックグラウンド処理

⇨画面を遷移しなくてもサーバーとの通信を行いながら動的に画面のページを変える