BBSのツリー表示を改良(Ajax)

Perl

BBSのツリー表示でメッセージを読むのにタイトルをクリックして画面遷移する必要がある。めんどくさい。
という件ですが改良しました。
http://takatoshi.dyndns.org/misc/bbs03.cgi?rm=tree
タイトルの横にある「メッセージを表示」ボタンをクリックするとその下にメッセージと返信リンクが表示されます。非表示に戻すには「戻す」ボタンをクリックします。メッセージを表示するのにワンクリック必要という点は変わっていませんが画面遷移はなくなりました。でもボタンがずらっと並んでるのはやっぱり違和感あります。
タイトルのアンカータグのtitle属性にメッセージをセットする方法もありましたが(こっちのほうが全然簡単そうですが)以下の理由でやめました。

  • メッセージが全部表示されないことがある(文字数が多い場合)
  • メッセージにHTMLのタグが含まれているとそれもそのまま表示されてしまう
  • 返信するにはやっぱりは画面遷移が必要

今回の改良をするにあたって、二つの方法がありました。

  1. ボタンを押されたタイミングでメッセージを取得して表示
  2. ページのロード時にすべてのメッセージを取得してデフォルトで非表示にしておき、ボタンを押されたタイミングで表示する

ああ、ダメだ。なんかわかりにくいな。もうちょっと突っ込んでみる。
先に2の方。まずメッセージをスタイルシートのdisplayプロパティを使って非表示にしておく。

<div style="display: none" id="entry3">
メッセージ。これはページのロード時に読み込まれる。
</div>

で、ボタンがクリックされたらJavaScriptでプロパティの値をnoneとinlineの間でトグルする。これで非表示と表示が切り替わります。
次に1の方。非表示にしておいてトグルするのは同じなんだけど、こっちはページのロード時にメッセージを読み込まないで、ボタンがクリックされたときに読み込むってわけ。で、取得したメッセージをDOMを使ってこんな感じで埋め込みます。

document.getElementById("entry3").innerHTML = "メッセージ";

メッセージはXMLHttpRequestっていうオブジェクトを使用してCGI経由でGETします。XMLHttpRequestはXMLってついてるけど、別にXMLじゃなくてもGETできる。というわけで、これのポイントは画面遷移なしで表示を変更(データを取得)できるってことです。この非同期＋XML＋JavaScriptを組み合わせた技術の総称はAjaxと呼ばれています。
まあ、つまりこれを使ってみたかったってだけなのですがね。