Webアプリケーションの仕組みについては以前にも書いたことがありますが、Webアプリの技術の中でも、「Ajax(エイジャックス)」と呼ばれる技術が近年注目を集めています。
今日はそのAjaxについて簡単にご紹介してみます。
そもそもWebアプリって何?
まずはWebアプリについて簡単におさらいしておきましょう。通常のWebサイトとWebアプリの違いは、以下のようなものでした。
■Webサイト
Webクライアント(ブラウザ)はWebサーバに「HTMLファイル」を要求し、Webサーバはそのファイルの中身をレスポンスとして返す。
特徴:Webサーバに保存されているHTMLファイルをそのまま見ることしか出来ない。(静的なコンテンツ)
■Webアプリ
Webクライアント(ブラウザ)はWebサーバに「プログラムの実行結果」を要求し、Webサーバはプログラムが出力したHTMLコードをレスポンスとして返す。
特徴:ブラウザ側の入力に応じて、送られてくるHTMLの内容が変わる。(動的なコンテンツ)
では、Ajax(エイジャックス)って何?
Ajaxは、「Asynchronous JavaScript + XML」の略で、ページを再読み込みすることなくページの一部を動的に書き換える技術のことです。
技術的には、名前のとおり、「JavaScriptを使って非同期的にリクエストを送信し、レスポンスとして受け取ったXMLデータを元にページの一部を再描画する」というのが基本的な概念です。
JavaScript組み込みのXMLHttpRequestというクラスを使って、JavaScript経由で非同期にリクエストを発行するので、ページ遷移が発生せず、ユーザ操作のバックグラウンドでこっそりHTTP通信することが出来ます。
Ajaxの例:Googleマップ
Ajaxが提供するユーザ体験を説明するには、例えばGoogleマップのようなWeb上の地図サービスで考えてみると分かりやすいと思います。
一昔前の地図サービスでは、矢印ボタンをクリックして上下左右に一画面ずつ移動したり、倍率を変えるのもクリックで倍率を選択して再読み込みしたりする必要がありましたよね。
これに対して、Googleマップでは、マウスドラッグでスムーズに位置を移動できたり、ホイール操作で倍率が変更できたりと、ブラウザ上での操作がページの再読み込みなしにタイムリーに反映されるようになっています。
これは、GoogleマップがAjaxを使って実装されているためです。
このように、Ajaxを上手く使えばWebアプリでも通常のデスクトップアプリと遜色のないシームレスな使用感を実現することが出来ます。
まとめ
Ajaxは、技術自体はずいぶん前から存在していましたが、2005年にAjaxという名前が付けられたことと、GoogleがGmailやGoogleカレンダー、Googleマップなどのサービスで積極的にAjaxを活用したことで一躍有名になりました。
技術としての有用性も広く認知され、最近はAjaxベースで大規模なアプリケーションを開発するためのフレームワークも整ってきています。今後もますます目が離せない技術の一つですね。