Ajaxによる非同期サーバー通信 (1/4)
作成:2010-04-03 11:01
更新:2010-05-11 19:08
更新:2010-05-11 19:08
■非同期通信とはどういうもの?
現在のようにJavaScriptが注目されるようになったきっかけは、なんといっても「Ajax」でしょう。Ajaxは、「Asynchronous JavaScript + XML」の略です。日本語で言えば、「JavaScriptとXMLによる非同期通信」となるでしょう。
「非同期通信」というのは、「サーバーとクライアントの間で同期しないで通信する方式」のことです。その反対は「同期通信」です。例えば、Webブラウザからサーバーにアクセスすると、サーバーから必要な情報を送ってきてそれをブラウザで受け取り表示します。が、このとき、サーバーからデータが送り返されるまで、ブラウザはじっと待っていますね? ときには、なかなかサーバーから反応が返ってこなくて、ブラウザの表示が真っ白なままイライラと待ち続けることもあります。これが「同期通信」です。
同期通信は、クライアント(ブラウザとか)からサーバーにアクセスし、サーバーから結果が送り返され、それをクライアントが受け取り……といったことを、「相手から結果が返されるまで待って、結果を受け取ってから次に進む」といった形でやり取りしています。お互いに、会いてに要求を送ったら、その結果が返ってくるまで待ってから次へ進む。これが同期通信です。
これに対し、非同期通信は、「相手から結果が返ってくるまで待たずに次へ進む」という方式です。同期通信と違い、要求を送ったら送りっぱなし、結果など待たずに次へ進みますから、「相手から返事が返ってこなくてイライラする」ということはありません。
が! 勝手に先に進んでしまいますから、いざ結果が返ってきたときどうするか?ということを、あらかじめ考えておかないといけません。例えば、「結果が返ってきたら、この関数を呼び出して処理して」といったことをきちんと指定しておかないといけないわけです。また、いつ結果が返ってくるかわかりませんから、あらかじめ「サーバーから返ってきた結果を利用した処理」をしておくこともできません。
つまり、非同期通信では、「通信開始の処理」と、「通信完了後の処理」を明確に分けて設計し、お互いに影響しないように考えておかなければいけないのです。同期通信と比べ、設計はより複雑になります。
では、なぜ非同期通信がそんなにもてはやされるのか。利点はないのか?――もちろんあります。それは「待たない処理ができる」という点です。実行しても、すぐに反応が返ってくる。実際にサーバーから結果が届くまでは時間がかかるとしても、すぐに別の処理に進むことができる。これは大きな利点です。
また、JavaScriptを利用して通信するという利点もあります。それは「ページ遷移せずにサーバーにアクセスできる」という点です。フォームなどの送信は、サーバーに送信された段階で、そのアドレスにブラウザ自体がアクセスを行うため、現在のページを離れてしまいます。そして結果をまた新しいページとして受け取ることになります。
JavaScriptを利用して通信すれば、ページはそのまま、ページを移動することなく、必要なデータだけをサーバーから受け取ることができます。単に表示が変わらないというだけでなく、現在のページに保管されているデータなどを保持したままサーバーにアクセスが出来るわけです。
それまでのサーバーアクセスの常識を覆し、「今、開いているページを保ったまま、必要に応じていつでもサーバーからデータを受け取り処理できる。しかも処理が完了するのを待つことなく次の処理を行える」ということから、Ajaxが活用されるようになっているのです。
「非同期通信」というのは、「サーバーとクライアントの間で同期しないで通信する方式」のことです。その反対は「同期通信」です。例えば、Webブラウザからサーバーにアクセスすると、サーバーから必要な情報を送ってきてそれをブラウザで受け取り表示します。が、このとき、サーバーからデータが送り返されるまで、ブラウザはじっと待っていますね? ときには、なかなかサーバーから反応が返ってこなくて、ブラウザの表示が真っ白なままイライラと待ち続けることもあります。これが「同期通信」です。
同期通信は、クライアント(ブラウザとか)からサーバーにアクセスし、サーバーから結果が送り返され、それをクライアントが受け取り……といったことを、「相手から結果が返されるまで待って、結果を受け取ってから次に進む」といった形でやり取りしています。お互いに、会いてに要求を送ったら、その結果が返ってくるまで待ってから次へ進む。これが同期通信です。
これに対し、非同期通信は、「相手から結果が返ってくるまで待たずに次へ進む」という方式です。同期通信と違い、要求を送ったら送りっぱなし、結果など待たずに次へ進みますから、「相手から返事が返ってこなくてイライラする」ということはありません。
が! 勝手に先に進んでしまいますから、いざ結果が返ってきたときどうするか?ということを、あらかじめ考えておかないといけません。例えば、「結果が返ってきたら、この関数を呼び出して処理して」といったことをきちんと指定しておかないといけないわけです。また、いつ結果が返ってくるかわかりませんから、あらかじめ「サーバーから返ってきた結果を利用した処理」をしておくこともできません。
つまり、非同期通信では、「通信開始の処理」と、「通信完了後の処理」を明確に分けて設計し、お互いに影響しないように考えておかなければいけないのです。同期通信と比べ、設計はより複雑になります。
では、なぜ非同期通信がそんなにもてはやされるのか。利点はないのか?――もちろんあります。それは「待たない処理ができる」という点です。実行しても、すぐに反応が返ってくる。実際にサーバーから結果が届くまでは時間がかかるとしても、すぐに別の処理に進むことができる。これは大きな利点です。
また、JavaScriptを利用して通信するという利点もあります。それは「ページ遷移せずにサーバーにアクセスできる」という点です。フォームなどの送信は、サーバーに送信された段階で、そのアドレスにブラウザ自体がアクセスを行うため、現在のページを離れてしまいます。そして結果をまた新しいページとして受け取ることになります。
JavaScriptを利用して通信すれば、ページはそのまま、ページを移動することなく、必要なデータだけをサーバーから受け取ることができます。単に表示が変わらないというだけでなく、現在のページに保管されているデータなどを保持したままサーバーにアクセスが出来るわけです。
それまでのサーバーアクセスの常識を覆し、「今、開いているページを保ったまま、必要に応じていつでもサーバーからデータを受け取り処理できる。しかも処理が完了するのを待つことなく次の処理を行える」ということから、Ajaxが活用されるようになっているのです。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
※関連コンテンツ
「初心者のためのJavaScriptプログラミング入門」に戻る