客を待たせず、不安にさせず：Ajax活用の5つのポイントふたつめ

　これは、正しい書き方ではない。なぜなら、非同期通信では通信中も、Webブラウザやその他のJavaScriptプログラムは動作し続けることができる。その為、このままでは通信が終わらないうちに画面表示のスクリプトが実行されてしまい、中身が空っぽになってしまうためだ。

　そこで、非同期通信では通信が終了すると、自動的に決められたメソッドが呼ばれる仕組みが備わっている。これを「コールバック」と呼び、この仕組みを使って通信終了後に動作させたいスクリプトを記述するというわけだ。 JKL.ParseXMLの場合は、「async」メソッドのパラメータにコールバックのファンクションを指定する。そのファンクション内で、通信終了時の処理を記述するというわけだ。

　さて、こうして非同期通信を行うと、Webブラウザの操作を妨げることがなくなる。ただし、処理に時間がかかること自体は解消できないため、このままでは操作が正しかったのか不安になるユーザーもいるだろう。そんな時は、ローディングアニメーションを利用すると良い。例えば、前回も紹介した「大学合格体験記」で「大学名で検索」の機能を試してみよう。

クチコミ満載！　先輩の大学合格体験記

　大学名を記入して［検索］ボタンをクリックすると、一瞬だけ矢印が回っているようなアニメーションが表示される（図1-1）。これだけでも、ユーザーは、処理が進んでいることを知って安心する。実は、このアニメーションは難しいものではなく、数コマのアニメーションGIFを表示させているだけだ。自分で作っても構わないが、Ajaxloadを利用すると便利だろう。

図1-1

　このサービスは、ローディングアニメーションを無料でダウンロードできるサービスだ。図1-2や図1-3など30種類程度を入手することができる。しかも、色や背景色を自由にカスタマイズすることができるので、Webサイトの雰囲気と合わせることもできる。

図1-2

図1-3

　それでは、実際の使い方を紹介しよう。次のスクリプトをご覧いただきたい。