Ajaxでページが踊る!?

はじめに

• 最近のWeb開発で大活躍中のAjaxについて、自分が学んだことをサクッと書いておこうと思う

Ajaxとは

• ページ全体を再読み込みせず部分更新を行う技術

主な特徴

• 非同期通信：ページ全体をリロードせずに必要データのみ取得
• JavaScript：クライアント側でJSONなどを扱い通信制御
• DOM操作：受信データを基にページ内要素を動的に書き換え

利用例

• 検索エンジン
  ユーザー入力のたびに予測キーワードを非同期取得・表示する仕組み
  

• 地図アプリ
  スクロールに応じて地図タイルを非同期取得・表示更新する仕組み
  

• ECサイト
  ページ遷移なしに商品情報を非同期読み込みしスムーズな閲覧を実現する仕組み
  

• SNSサービス
  スクロール操作でタイムラインをシームレスに読み込む仕組み
  

動作プロセス

1. リクエスト作成：XMLHttpRequestオブジェクトを生成し送信データを設定
2. サーバー通信：XMLHttpRequestを介してサーバーへリクエストを送信し応答を待機
3. レスポンス処理：受信データを解析しDOMを更新

補足：XMLHttpRequestとは

• ブラウザで非同期通信を行うためのAPIのこと

まとめ

• Ajaxの仕組みと主要シーンを押さえて開発効率アップを目指す
• Gifとか添付すると映えて良い感じ（自己満）