今回は、近年Web技術を加速させたAjaxについてお話したいと思います。
Ajaxとは
Ajaxの正式名称は、「Asynchronous JavaScript + XML」と言います。要するに、「JavascriptとXMLファイルによってサーバーと非同期通信を行う」ということです。
Ajaxという言葉は、2005年2月18日に米国のインフォメーションアーキテクトであるJesse James Garrettにより、「Ajax: A New Approach to Web Applications」（Ajax Webアプリケーションへの新しいアプローチ）として名付けられ、現在では広くWeb制作現場で使われるようになりました。Ajaxが登場するまでは、同期通信が主流でした。
同期通信とは
同期通信とは、クライアント（Webブラウザ）がWebサーバーにページの更新に必要なデータと更新のリクエストを送信し、それを受け取ったサーバー側が、表示するHTMLファイルを作成し、クライアントへレスポンス（応答）した後にクライアント（Webブラウザ）がコンテンツを表示させるといった仕組みです。
これでは、クライアント側は、リクエストを送信すると、サーバーがレスポンスを返してページが表示されるまでの間サイトを操作することができず、待つことしかできないというデメリットがあります。
さらに全ての情報を通信しているために、ファイルが重くなりがちでサーバーにも負担がかかってしまいますし、HTMLファイルを受け取ってからページの全体を表示させる処理を行うため、時間もかかります。
この問題を解決するため、現在ではAjaxによる非同期通信が主流になっています。
非同期通信とは
クライアントサイド(Webブラウザ上)で動くjavascriptが直接サーバーとのやりとりを行います。そうして取得したデータを元に、HTMLファイルを更新します。この時、送受信するデータはHTMLではなくXMLで行います。
Ajaxによる非同期通信では、更新に必要な箇所のデータだけをXMLでやりとりするので、データもページ全体のHTMLをやりとりする同期通信に比べて、軽くなりサーバーに負担をかけません。
さらに、サーバーからレスポンスを待っている間もjavascriptが更新されるデータ以外の箇所を更新し、ユーザーからの入力を受け付けることが可能です。この技術によって、レスポンス待ちの間の待ち時間を有効に使用することができます。
Ajaxは、検索などのサジェスト機能（ユーザーが検索に文字入力をしているときに候補を表示する）やGoogleMapの地図に使用されています。
同期通信と非同期通信の具体的なイメージとしては以下のgif画像を参考にしてください。
| 同期通信 | 非同期通信 |
|---|---|
 |
 |
同期通信では、画面を読み込むたびにページが真っ白になってページを更新するイメージですが、その一方、非同期通信では画像の遷移がありません。
実際に比べてみると、非同期通信は非常に優れた技術であることが一目瞭然です。
表示速度は特にスマートフォンではユーザビリティの重要な部分であるため、大きな画像を多用するようなページではぜひAjaxを試してみましょう。
