Asynchronous JavaScript + XML

Ajaxは、XMLHttpRequestという命令を利用して、この命令が含まれる関数が実行されたときにデーターを受信するというのが根幹である。これまでの、JavaScriptプログラミングと異なる最大のポイントは、XMLHttpRequest命令でサーバー上のデーターを取得できるという点である。非同期通信という言葉がよく使われるが、DHTMLの延長として考えた方がわかりやすい。


基本

まず、XMLHttpRequestオブジェクト生成のコードを書く。IE7未満では、ActiveXObjectでこれを実装する。

PluginRenderer::executePluginBlock(): プラグイン#code()は、実装されていません。

次に、データーを読み込む処理だ

PluginRenderer::executePluginBlock(): プラグイン#code()は、実装されていません。

これにより、request変数に、ajaxに必要な関数が入る。で、実際データーをよみこむと、まずreadyStateが変化する。readyStateは、以下のようになっている

  • 0 : 開始前の初期状態
  • 1 : 読み込み中
  • 2 : 読み込み完了
  • 3 : 制御可能
  • 4 : 完了

たとえば、書き換えたい部分を読み込み中の時は、読み込みアイコンにして、完了後内容をgetElementByIdなどで書き換えるといったテクニックも可能である。

ほかにも変数があるが、ここでは省略して、読み込みが完了したら、callback();という関数が実行される。このresponseTextとは、読み込んだデーターを意味する。XMLの場合は、responseXMLとなる。(最近ではJSONなどでデータをやりとりする場合が多いのでresponseTextが使われる場合が多い)

このcallback()関数に、読み込んだデーターをパースしたり表示するなどの処理を入れる。この処理では、だいたいgetElementByIdなどでページの一部分を書き換えて、動的にページが変化しているようにみせることから、もっぱら非同期通信という言葉が使われるというしくみだ。

データーの読み込みに関する注意

よく、ajaxプログラミングにおいて、はまりがちなのが、サブルーチンの外にajaxで読み込んだデーターの結果を出すことができないというところである。

たとえば、Perlではデーターを読み込んだ後で、変数に格納して別のサブルーチンに渡して処理と言うことがよく使われる。

PluginRenderer::executePluginBlock(): プラグイン#code()は、実装されていません。

この場合、view()関数からopen()関数を呼び出してデーターを取得するという処理を行っているが、ajaxプログラミングにおいて、こういう方法でデーターを取り出すことはできない。

この例で言うと、3行目の$data = <IN>;という部分で、データーのパース、表示などの処理を行わなければならない。従って、

PluginRenderer::executePluginBlock(): プラグイン#code()は、実装されていません。

というような処理はできないので注意。

各フレームワークを使用する場合

prototype.jsの場合

タイムアウト時の処理を別途Ajax.Responders.registerなどで記載しなければならない。

PluginRenderer::executePluginBlock(): プラグイン#code()は、実装されていません。

dojoの場合

別途handleAsで、Jsonとして処理したり、XMLとして処理したりするようにできる。

PluginRenderer::executePluginBlock(): プラグイン#code()は、実装されていません。

jQueryの場合

ほぼ、dojoと一緒。

PluginRenderer::executePluginBlock(): プラグイン#code()は、実装されていません。

uupaa-jsの場合

タイムアウト時の処理は別途uu.request.timeoutで記載。たぶん間違ってるかも。

PluginRenderer::executePluginBlock(): プラグイン#code()は、実装されていません。