【Web初心者】Ajax ~非同期通信と同期通信~

本記事では、非同期通信と同期通信のそれぞれの特徴について説明します。また、非同期通信については代表例であるAjaxを用いて説明していきます。

同期通信とは

Webサイトなどにアクセスする際にクライアントがリクエストを行い、Webサーバがレスポンスを返すという処理を交互に行い、クライアントとサーバが同調して通信を行うことを同期通信と言います。

例えば、商品の検索を行うショッピングサイトなどの動的サイトでは、Webブラウザが検索内容のリクエストを送信し、それに対してWebサーバが検索結果のHTMLファイルをレスポンスとして返します。同期通信ではWebブラウザ側は、Webサーバからレスポンスを受け取ってからそのコンテンツ内容を表示させています。

つまり同期通信では、リクエストを送信してからWebサーバが処理を行なっている間、Webブラウザはレスポンスを待つことしかしておりません。

同期通信では、2つのデメリットがあります。

ページの表示速度が遅い

動機処理ではWebブラウザは、Webページの情報をWebサーバに対してリクエストを行った後、レスポンスを待っている間には何も処理を行っていません。

Webサーバからレスポンスを受け取って初めて、表示処理に取り掛かります。

そのため、「Webサーバからのレスポンスを待つ時間」、「受け取った内容を表示する時間」の2つの時間が発生し、全体としてページの更新に時間がかかってしまいます。

送信するデータ容量が多い

WebブラウザはWebページの更新のたびに内容を1から10までWebサーバにリクエストします。

ショッピングサイトで商品検索のリクエストを送信した場合には、Webページ内のタイトルや背景など検索結果に依存せずにずっと変わらない情報も含めて全てリクエストし直します。

そのため、リクエスト/レスポンスの際に送信するデータの容量が大きくなり、サーバ側での負荷が大きくなってしまいます。

非同期通信Ajaxとは

ここまで説明してきた同期通信のデメリットを補うために生まれてきたのが非同期通信です。

非同期通信の代表例としてAjaxという技術があり、AjaxはWebブラウザ上でクライアントサイドスクリプトとして機能するJavaScriptを用いて記述されます。Ajaxは、Asynchronous JavaScript + XML の略で、データのやりとりにはXMLが用いられます。

Ajaxでは、直接Webサーバと通信を行うのはWebブラウザではなくJavaScriptです。JavaScriptがクライアントとしてWebサーバに対してリクエストを行い、取得したデータを用いてHTMLの更新を行います。

検索項目を入力しようとした時のサジェスト機能や、入力フォームでリアルタイムで表示される「必須項目を入力してください。」メッセージ、Googoleマップの地図表示などによく用いられています。

ページの表示速度が速い

Ajaxでは、Webサーバに対してリクエストを送信してレスポンスを待機している間、JavaScriptはWebサイト上でユーザの入力を受け付けたり、レスポンスの内容と関係のない部分のHTMLを更新することができます。

Ajaxは、同期通信のようにただレスポンスを待つだけではなく、レスポンス待ちの時間を有効活用できるため、Webページの表示速度が速くなります。

送信するデータ容量が少ない

Ajaxでは、WebサーバとJavaScript間でやりとりするデータはHTMLそのものではなく、Webページの更新に必要なデータだけとなります。

そのため送信するデータの量が同期通信に比べて圧倒的に少なくなることとなり、サーバへの負荷が抑えられます。

最後に

本記事では非同期通信の仕組みとその魅力について同期通信と比較して解説してきました。

他にもWebに関する記事やJavaに関する記事なども書いていますのでぜひそちらもご覧ください。