【JavaScript】Ajax

Ajaxとは

Asynchronous JavaScript ＋ XMLの略称。 ※Asynchronous=非同期
JavaScriptがサーバーと非同期で通信し、取得したデータを使用してHTMLを更新する技術。
代表的なのがGoogleマップ。表示位置を変えた際に、移動した分だけの地図情報を取得して更新される。

メリット

  • データ量を抑えられる
    必要なデータだけをサーバーから取得するため、HTMLそのものをやりとりするよりデータ量が抑えられる。

  • レスポンスを待つ間も作業できる
    サーバーからデータを取得する間に、ブラウザ側でHTMLを更新したり、ユーザーの入力を受け付けることができる。

背景

元々はブラウザとサーバーが交互に処理を行う同期通信を行なっていた。
同期通信だとサーバーからのレスポンスが返ってくるまで、ブラウザは何も処理ができない。
またHTMLをやりとするため、サーバーとの通信量が多くなりがちだった。

Ajaxで使用されている技術

  • XMLHttpRequest
    JavaScriptでHTTPリクエストを行うためのAPI。
    JavaScriptがサーバーとやりとりするための技術で、ページ全体を更新することなく、データを受け取れる。

  • XML
    Extensible Markup Language。文書やデータの構造を記述するマークアップ言語。
    データをやりとするときの形式、近年はもっと読みやすく軽量なJSON形式でやりとりすることが多い。

  • DOM
    DocumentObjectModel。HTMLなどの文書の構造をプログラムで制御するためのAPI。
    サーバーから受け取ったデータをDOMを利用して、変更・更新する。

実際の流れ

  1. ブラウザからデータ取得のためのイベントが発生
  2. JavaScript(XMLHttpRequest)によりサーバーへリクエスト
  3. サーバーがリクエストに応じてデータをXML,JSON形式でレスポンスを返す
  4. データを受け取ったらJavaScrptがDOMを利用してページを更新

参考