データが保存できるのであれば簡易エディタも作る事ができます。エディタというよりも伝言板のような感じかもしれません。文字の編集はtextareaタグ内で行いますが、Internet Explorer 6やSafari 2などでは通常のページ内の文字も編集することができます。ここでは、シンプルにtextareaタグ内で文字を編集し、そのデータをサーバーに保存します。また、保存したデータを読み出すためのCGIプログラムを別途用意します。
基本的にはチャットのAjaxプログラムと同じです。テキストエリアの文字はかなり長くなる場合があるので本来はGETメソッドではなくPOSTメソッドで送る必要があります。ここではPOSTでなくGETを使っていますので、あまり長い文章は保存できません。勉強したい方はPOSTメソッドに改造してみると良いでしょう。（メソッド名とsend()の変更程度ですが）
チャットと異なるのは、データを読み込むためのスクリプトを用意している点です。保存先は常に同じファイルなのでファイル名を決めうちして指定してしまっても本来は問題ありません。しかし、BOM (Byte Order Mark) がない場合、Safari 2などでは文字化けを起こしてしまいます。この文字化けを防ぐために、ファイルを読み込みクライアントに返すCGIプログラムを用意しています。ページの文字コードはUTF-8にしてありますが、ページ内の文字がSHIFT JISであってもBOMを付けて送信するとSafari 2では正しく日本語を表示できます。（文字化けの原因は何か他の部分にあるのかもしれませんが現時点では分かりません。MacOS X 10.5 (Leopard) では修正されるかもしれません）
データを読み込む場合に、Internet Explorer 6など多くのブラウザではファイル内容がキャッシュされてしまいます。すると、読み込みボタンをクリックしてもキャッシュされたデータが読み出されてしまいサーバー内のデータと一致しなくなります。ブラウザはURLが同じ場合にはキャッシュしますが、URLが異なれば違うファイルとしてサーバーに問い合わせます。JavaScriptでは送信するファイル名の後に?を付けて、その直後にミリ秒を追加することでキャッシュデータを読み出さないようにすることができます。例えばsample.txtファイルであれば「sample?1136822788733」といった感じになります（CGIを使う場合にはsample?cache=1136822788733のように表記してください。今回のサンプルでは単純な読み出しのみなので実害はありません）。このミリ秒ですが、
(new Date()).getTime()
として求める事ができます。故意に自分のコンピューターの時計を変更しない限りは安全な手法です。これで、読み込みボタンを押せば、常に最新のサーバー上のファイル内容を取得することができます。
以下が実際の簡易エディタのスクリプトです。複数のブラウザを起動して相互に書き込んで、読み込みボタンを押すと書き込んだデータが反映されます。（実際のサンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>簡易エディタを作成する</title>
<script type="text/javascript" src="xmlhttp.js"></script>
<script type="text/javascript"><!--
// データ保存
function dataSave()
{
textData = document.ajaxForm.request.value;
textData = textData.replace(/&/g,"＆");
httpObj = createXMLHttpRequest(displayData);
if (httpObj)
{
httpObj.open("GET","save.rb?request="+encodeURIComponent(textData),true);
httpObj.send(null);
}
}
// データ表示
function displayData()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
$("result").innerHTML = "";
document.ajaxForm.request.value = httpObj.responseText;
}else{
$("result").innerHTML = "<b>処理中です...</b>";
}
}
// データを読み込み
function dataLoad()
{
httpObj = createXMLHttpRequest(displayData);
if (httpObj)
{
dTime = (new Date()).getTime();
httpObj.open("GET","load.rb?"+dTime,true);
httpObj.send(null);
}
}
// --></script>
</head>
<body>
<h1>簡易エディタを作成する</h1>
<form method="get" name="ajaxForm" onsubmit="dataSave();return false;">
<textarea name="request" cols="40" rows="8"></textarea><br>
<input type="button" value="読み込み" onClick="dataLoad()">
<input type="submit" value="保存"><br>
</form>
<div id="result"></div>
</body>
</html>
チャットやエディタは文字だけを扱うため処理が簡単です。そこで、次項ではサーバー内にある不特定の数の画像データを表示する、画像カタログのようなものを作成してみます。
[
第四章 6:画像カタログを作成するへ]
[
目次へ]
(2006.1.10、2006.8.23追加)