紳士なブログ

紳士すぎてすみません

Ajaxの概観

ここ最近、何回かAjaxを扱う機会があり、理解が不十分だと感じることがあったのでまとめてみます。

Ajaxとは

Ajaxという言葉の最初の「A」の部分は、「Asynchronous」、つまり「非同期」という意味です。


Ajaxのメリット

Ajaxのメリットとしてよく語られていることに、「サーバ処理待ちをしない『非同期』リクエストが可能」というものがあります


旧来型の同期通信では、アプリケーションがサーバとのやりとりを必要とするたびに、毎回ブラウザはユーザとのやりとりを停止して、サーバからのレスポンス待ち状態になってしまいます。

これに対して非同期通信では、ユーザの動作を止めることなく、連続的に作業を続けられます。


なぜ可能なのか?

どうしてこのようなことが可能なのかというと、Ajaxのスクリプトでは、一般的に非同期のレスポンスはコールバックで受信します。言い方を変えると、レスポンスを受信したときに発生するコールバック関数などを利用することで、バラバラに発生するリクエストとレスポンスの整合をとる仕掛けにするわけです。

参考程度に頭に留めておくとよいかもです。


Ajaxでは、主にブラウザにデフォルトで実装されているJSのHTTPの通信機能を使い、クライアント側のページ全体をリロードすることなくサーバとデータを送受信します。

そして、これによって得られるメリットを最大に、かつデメリットを最小にするべく、これまでサーバー側で行なっていたことのいくつかをクライアント側へシフトするといった、Web構造の転換によってパフォーマンスのチューニングアップを行うことになります。


(1) ページ遷移なしで高速に画面を書き換えられる

一般的には、フォームのボタンを押して送信などを行うと、ブラウザはデータをサーバーへ送り、それを受信したサーバーは、新しいページをブラウザへ渡してまるごとページが書き換えられます。


一方、Ajaxでは、ページ遷移なしで必要な部分のデータの送受信だけを自由に何度も行うことができます。

つまり、必要なときに最小限のデータだけをサーバーとやりとりできるので、効率良くスピーディにページを書き換えていくことが可能です。


(2) サーバー処理待ちをしない非同期リクエストが可能

フォームの送信ボタンを押すと、レスポンスが返ってくるまで通常ブラウザは次の作業ができない状態になります。

これを「同期通信」と言います。


このような場合にAjaxを使えば、「非同期」で通信を行うことができます。

つまり、1つの交信を行なっている間にも、ユーザーはサーバーからのレスポンスを待つことなく、どんどん次の作業を続けていくことができます。


(3) 受信するデータ量を減らせる

従来ブラウザが受信するデータは、HTMLやXHTMLなどのマークアップ言語で受け取るのが一般的です。


これに対して、Ajaxでは受信するデータはHTMLやXMLに限りません。

サーバー側で加工する前の必要最小限のTEXTデータで受信できるわけですから、たとえばデータベースのレスポンスを加工せずにダイレクトにJSへ渡してしまうなどの方法で転送量を減らすことが可能です。


(4) リアルタイムなインタラクティブ性能が高くなる

(1)〜(3)までの事情を勘案すると、Ajaxなサイトのリアルタイムなインタラクティブ性能は、Google Mapsの成功を見てもわかるように、従来の方法とは比較にならないほど高くすることが可能になります。


Ajaxのデメリット

(1) クロスブラウザ化のノウハウが必要

ブラウザに実装されたJSに依存するということは、各ブラウザ間でなかなか完全に同一にはならない実装を補完するためのクロスブラウザ処理を避けては通れないということです。



(2) Ajaxを使えないブラウザ対策も必要

JSとXMLHttpRequestの使えないブラウザでは動作しないため、それに応じた対策が必要。



(3) セキュリティへの配慮が不可欠

ページ遷移せずにサーバーと通信を行うということは、同時に目に見えない裏側で動作するということでもありますから、旧来よりも慎重なセキュリティへの配慮が要求されます。

たとえば、受信データが悪意の外部入力から素通りになる可能性がないかなど、常に注意している必要があります。



(4) リクエストを多発しすぎると逆にサーバー負荷が増えかねない

Ajaxのメリットの多くは、サーバー側の仕事を減らし、最近では能力を持て余している無数のクライアントPCへ作業を振り分ける、といったサーバ負荷を減らすものです。

しかし、つくり方次第では、逆にリクエストを多発しすぎてサーバーや回線負荷を増やしてしまうなどということもありえます。


無駄な処理は減らす、という心構えなしに、「Ajaxを使ったから無駄な処理が減る」などということはありえません。