Ajax

XMLHttpRequestでバックグラウンドでデータを取得し、DOMによる更新、CSSによるデザインを組み合わせ画面遷移なしでWebページを変更する手法をAjaxと呼ぶらしい。

Ajaxを使えば、Webアプリの悩みの種である画面遷移の制御問題が解決する。しかし、画面系をDOMで全部制御しなくてはならない為、実装が面倒で普通の開発者には敷居が高い。また、IEとその他のブラウザで微妙に実装が異なっている事も悩ましい。JavaScriptはバッドノウハウの塊だ。

Ajaxは同期処理しかできなかった従来のDHTMLと異なり非同期で処理することが特徴の一つだ。ユーザが処理の完了を待つ必要がないのだ。しかし、データベースのトランザクション管理やセッション管理が重要なエンタープライズWebアプリを非同期処理しようとすれば、相当な設計能力が求められるだろう。

現状では色々問題点が考えられるが、非常に興味深い手法であることには変わりない。

ところで、PHPで出力したXMLファイルをXMLHttpRequestで動的ロードさせようとしているのだが、うまくいかなかった。

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
  if( this.readyState==4 && this.status == 200 ){
    var nullpos = this.responseXML.getElementsByTagName(\"nullpo\");
    document.getElementById(\"hoge\").firstChild.nodeValue = nullpos[0].firstChild.nodeValue;
  }
}
xmlhttp.open(\"GET\", \"http://localhost/cgi-bin/hoge.cgi\", true);
xmlhttp.send(null);

FirefoxのLive HTTP Headerで見るとリクエストは発行されている。しかし、getElementsByTagNameでノードリストの取得ができない。どうやらFirefoxでは、レスポンスヘッダのContent-typeがtext/htmlとなっているとgetElementsByTagNameが動作しないようだ。ヘッダをtext/xmlあるいはapplication/xmlと指定すればノードリストが取得可能となった。