Ajaxを使ってサーバーにデータを保存するにはサーバー側にCGIプログラムが必要になります。サーバー側の操作を行うには、どうしてもCGIプログラムが必要です。ここでは、サーバー側に送信されたデータをファイルに保存するCGIプログラムを用意しました。入力された最新データを10行だけ表示するものです。サーバー側のプログラムは作成する必要がありますが、クライアント側のプログラムは今までのものと変わりません。ただし、入力された文字に&が含まれていると困るので正規表現のreplace()を使って文字列データ内の&を一括置換します。同様に<や>などを変換しておく方が安全です。ただし、クライアント側では限度があるのでクロスサイトスクリプティング (XSS) によるセキュリティ問題を回避するにはサーバー側で処理しておくのが安全です。
サーバー側にどのようなデータを書き込むかによってブラウザ側（クライアント側）の処理も変わってきます。ここでは、シンプルに入力されたUTF-8の文字をそのままファイルに保存します。サーバー側からテキストを読み出して表示する場合には、改行コードを<br>タグに置換します。これは正規表現を利用します。文字コードの都合上、replace(/\r/g,"<br>")のようにして手軽に変換できなかったのでnew RegExp()で置換する改行コードを指定しています。
以下のスクリプトを実行して、フォームから送信するとサーバー側にデータが書き込まれます。（サンプルを
実行する）
<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="+encodeURI(textData),true);
httpObj.send(null);
}
}
function displayData()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
str = httpObj.responseText;
REbr = new RegExp(String.fromCharCode(10),"g");
str = str.replace(REbr,"<br>");
$("result").innerHTML = str;
}else{
$("result").innerHTML = "<b>Wait...</b>";
}
}
// --></script>
</head>
<body>
<h1>サーバーにデータを保存する</h1>
<form method="get" name="ajaxForm" onsubmit="dataSave();return false;">
<input type="text" name="request" value="テストです"> <input type="submit" value="データを送信"><br>
</form>
<div id="result"></div>
</body>
</html>
サーバー側にデータが保存できるということは掲示板やチャットもAjaxを利用して、もっと良いものができるはずです。ここでは、シンプルなリロード型のチャットを作成してみましょう。基本的に前のスクリプトと同じですが、チャットの場合、入力時刻を表示する方がよいのでDateオブジェクトで書き込み時間を読み出し、書き込む名前と文字列と一緒にサーバー側に送信します。チャットは、相手がいつ書き込むか分からないため、リロードして書き込み内容を定期的に表示する必要があります
*1
定期的にファイル内容を表示するためにsetTimeout()を使います。サンプルでは1秒間隔でサーバーから書き込まれた内容を返すようにしています。（実際のサンプルを
実行する）
*1 リロード型ではないタイプのAjaxチャットに関しては
ConnectiveChatを参照するとよいでしょう。
<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 = writeData(document.ajaxForm.chatName.value,document.ajaxForm.request.value);
document.ajaxForm.request.value = "";
httpObj = createXMLHttpRequest(displayData);
if (httpObj)
{
httpObj.open("GET","save.rb?request="+encodeURI(textData),true);
httpObj.send(null);
}
}
function displayData()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
str = httpObj.responseText;
REbr = new RegExp(String.fromCharCode(10),"g");
str = str.replace(REbr,"<br>");
$("result").innerHTML = str;
}
}
// チャットの時刻、名前、メッセージを設定する
function writeData(uName,sendText)
{
var str = sendText.replace(/&/g,"＆");
var dateObj = new Date(); // 現在の時刻情報を求める
var h = dateObj.getHours(); // 時
var m = dateObj.getMinutes(); // 分
var s = dateObj.getSeconds(); // 秒
if (h < 10) h = "0" + h;
if (m < 10) m = "0" + m;
if (s < 10) s = "0" + s;
return h+":"+m+":"+s+" ["+uName+"] "+str;
}
// リロードして最新チャットデータを読み込む
function dataReload()
{
httpObj = createXMLHttpRequest(displayData);
if (httpObj)
{
msec = (new Date()).getTime();
httpObj.open("GET","sample.txt?"+msec,true);
httpObj.send(null);
}
setTimeout("dataReload()",1000);
}
// --></script>
</head>
<body onload="dataReload()">
<h1>簡易チャット</h1>
<form method="get" name="ajaxForm" onsubmit="dataSave();return false;">
<input type="text" name="chatName" value="名前" size="8">
<input type="text" name="request" value="試し" size="30"> <input type="submit" value="データを送信"><br>
</form>
<div id="result"></div>
</body>
</html>
テキストフィールドなので１行だけですが、textareaタグを使って複数行書き込めるようにするのもよいでしょう。また、サーバー側では単純なテキストとして保存していますが、後々のデータ利用を考えるのであればXML形式で保存する方法もあります。SQLサーバーが使える環境であればSQLにデータを入れてしまうこともできます。
データを保存することができれば、ファイル内容を読み書きするエディタのようなものもできます。次項ではサーバー上のテキストファイルを読み出し、修正し保存するというプログラムを作成してみます。
[
第四章 5:簡易エディタを作成するへ]
[
目次へ]
(2006.1.9,2006.1.10修正)