Google mapを見たときは感動しました。Webのシステムでここまでできるのだと。Google mapに代表されるような、クライアント側の処理により、ページを遷移することなくサーバ側と通信しながら動きのあるサイトを構築する技術をAjax(Asynchronous
JavaScript and XML)と呼ぶそうです。
最近構築したシステムではAjaxに習って一部導入してみました。例えば、伝票入力画面で商品のアイテム数が少ないのであればSELECT要素を使って選択すればよいのですが、アイテム数が多いとHTMLがふくれあがりますし、オペレータが商品を選ぶのも難しくなります。そこでコードを入力すればそれに相当する品名を横に表示すると言うことを隠しフレームを使ってやってみました。スピードが遅くならないかと心配しましたが十分実用的なスピードでレスポンスが帰ってきました。
Ajaxを全面的に使用すれば、最初に表示枠となるHTMLとJavaScriptをクライアントに送り、クライアント側のJavaScriptからクエリーを発行してデータベースを読む。編集後保存ボタンを押したら、保存用のクエリーを発行してサーバ側で保存処理する。このような処理の流れとなり、この間ページ遷移が一切起こらないと言ったことも可能になります。サーバ側の処理は軽く単純になります。
問題点もあります。
- JavaScriptで作成するスクリプトが大きくなることや、ロード時の処理が重くなるので最初にページを読むときに時間がかかる。(IEはDOMノードをたどる処理を行うと遅いようです、Opera8.54は早いです)
- JavaScriptのデバッグを効率化しなければならない(FirefoxのJavaScript Debugger活用)
- ブラウザの機能に大きく依存するためクロスブラウザ開発が難しくなる
IEはバージョン6では、ActiveXを使ってサーバへの通信要求XMLHttpRequestを発行できますが、バージョン7ではネイティブ対応するそうです。機会があればAjaxを全面的に採用したWebサイトの構築をやってみたいと思います。
現在、派手さはありませんがデータの更新等の処理にAjaxを使っています。ブラウザの戻るボタンで戻っても不自然でない動きをします。(2011年8月9日)
キーワード：Ajax, XMLHttpRequest, prototype.js