読者です 読者をやめる 読者になる 読者になる

vol.31 ajaxでページを快適なものに(前編)

f:id:BOEL:20151118170430j:plain
こんにちは。Webエンジニアの毛利です。
Webページにjavascriptの機能を実装することが多くなっています。
今回は意外と身近なサービスで、それと知らずに使っている「ajax」について

解説します。


ajax「エイジャックス」とは

「a」……Asynchronous(非同期)
「ja」……javascript
「x」……XML


これらの頭文字を取った「ajax」です。
簡単に言うと、画面の切り替えを行わずにサーバーとの通信を実現した
Webアプリケーションの総称です。

ajaxjavascriptの機能を使って実現します。
「非同期通信」という通信方法で、サーバーと通信をしています。
身近なサービスでたとえるならば「Google Map」です。
画面上で地図をスクロール、拡大したとき、
その動きに合わせて地図の情報を読み込んでいます。
ユーザーの操作に合わせてリアルタイムに情報を取得しています。

実はこの「ajax」というものは、技術的には新しいものではありません。
先ほど例にあげた「Google Map」は注目されるようになったきっかけのひとつとなっています。
javaFlashを使うこと無く、HTML+CSS+javascriptのみで
ユーザーの操作に対して、リアルタイムで情報を取得し、
表示する方法がとても画期的で、注目されるようになりました。

最近では「ajax」をつかったサービスは身近にたくさんあります。


「同期通信」と「非同期通信」

ajaxは非同期通信でサーバーとやりとりをします。
では、非同期通信とは何でしょうか?
対となる同期通信と比較してみます。

f:id:BOEL:20151118170539j:plain

同期通信

サーバーにリクエストを送信する(Google Mapを移動したり拡大するなど)とき、
画面の切り替えをします。
リクエストに対して、サーバーから応答がないかぎり、画面が表示しないため
ユーザーは操作することができません。
また、たとえ見た目が同じようなページでも、
ページを構成するファイルをもう一度取得するように指令をだします。
リクエストに関係ないファイルとのやりとりが発生してしまうため、
サーバーとの通信量が多くなります。

非同期通信

サーバーにリクエストを送信するとき、画面を移動せずに通信します。
画面全体を更新しないため、サーバーからリクエストを待っている間も画面操作をすることができます。
リクエストに関係のある必要な通信のみを行うため、サーバーとの通信量が減ります。

ajaxは「非同期通信」

ajaxは「非同期通信」でサーバーとファイルのやりとりします。
非同期通信についてまとめると下記のようになります。

f:id:BOEL:20151118170638j:plain
・リクエストを送ったとき、レスポンスを待つあいだ操作が可能なため、

ユーザーは待たされること無く操作を続けることができる。

f:id:BOEL:20151118170709j:plain
・リクエストが一部のため、サーバーから取得するファイルの数が減り、

通信量を軽量化することができる。

ajax」は従来の手続き的なやりとりを省略し、リアルタイムでデータを取得することで、まるで会話をしているようにWebアプリケーションの動作を実現できることがポイントです。


まとめ

今回の前編では、ajaxとはなんだろう?をかんたんに説明しました。
次回後編では、ajaxとは知らずに使っている身近なウェブサービスの紹介、

jQueryを使った実装例をご紹介していきます。

参考URL
ajaxを使用するメリット
http://thinkit.co.jp/free/books/2/1/1/

いまさらきけない、"ajax"とはなにか
http://www.atmarkit.co.jp/ait/articles/0708/23/news134.html