Ajaxを利用した簡易エディタです。フォームのテキストエリアに入力された文字をサーバーに保存します。ページが読み込まれたときはサーバーからデータを読み込み表示します。これまでのサンプルと違うのはデータを保存する部分（青字のsaveFile()関数）が追加されている点です。
ここではPOSTメソッドではなくGETメソッドを使って保存しています。テキストエディタなど文字数の多いものはGETメソッドではなくPOSTメソッドを使った方がいいのですが、ここではGETメソッドを使っています。
不具合あり、と書いていますが、MacOS X + Safari 2では文字コードがUTF-8の場合に文字化けしてしまい日本語の処理ができないためです（動作結果の画像を見る）。このため、このサンプルが動作するブラウザは以下のものに限定されます。（クリックすると動作結果の画像を見ることができます）
Windows XP + Internet Explorer 6
Windows XP + Firefox 1
Windows XP + Opera 8
MacOS X + Netscape 7（6は未確認）
MacOS X + Firefox 1
Safari 2の場合にはUTF-8ではなくUTF-16にすると正しく動作します（他にも解決方法があるかもしれません）。
サーバー側のプログラム(CGI)はRubyで作成してあります。かなり駄目コードですので、参考にはしないでください。
【追記】
高橋登史朗さんからアドバイスもらいました。escape()は実装が違うのでencodeURI()の方がよいとのことです。で、やってみるとSafari 2でも問題なくUTF-8で処理されます。ページの最後に実際のコードを載せておきました。
【サンプルを実行する】【サンプルを実行する（Safari 2用）】
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>簡易エディタ（不具合あり）</title>
<script type="text/javascript"><!--
function getFile() {
xmlhttp = createXMLHttp();
if (xmlhttp) {
xmlhttp.onreadystatechange = check;
xmlhttp.open("GET", "sample.txt", true);
xmlhttp.send(null);
}
}
// データ読み込みチェック
function check() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.aForm.tArea.value = xmlhttp.responseText;
}
}
// データをGETメソッドを使って保存
function saveFile()
{
txt = document.aForm.tArea.value;
if (xmlhttp) {
xmlhttp.open("GET", "save.rb?tArea="+escape(txt), true);
xmlhttp.send(null);
}
}
// XMLHttpオブジェクト作成
function createXMLHttp() {
try {
return new ActiveXObject ("Microsoft.XMLHTTP");
}catch(e){
try {
return new XMLHttpRequest();
}catch(e) {
return null;
}
}
return null;
}
// --></script>
</head>
<body onLoad="getFile()">
<h1>Ajaxを使った簡易エディタ（不具合あり）</h1>
<form name="aForm">
<input type="button" value="ファイルを保存する" onClick="saveFile()"><br>
<textarea cols="40" rows="20" name="tArea"></textarea>
</body>
</html>
【サーバー側のプログラム（Ruby）】
#!/usr/bin/ruby -Ks
print "Content-type: text/html\n\n"
require "cgi-lib"
input = CGI.new
inputdata = input["tArea"]
fh = open("sample.txt", "w")
fh.print inputdata
fh.close
fh = open("sample.txt","r")
txt = fh.read()
fh.close
print txt
【サンプルを実行する】
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>簡易エディタ（OK版）</title>
<script type="text/javascript"><!--
function getFile() {
xmlhttp = createXMLHttp();
if (xmlhttp) {
xmlhttp.onreadystatechange = check;
xmlhttp.open("GET", "sample.txt", true);
xmlhttp.send(null);
}
}
// データ読み込みチェック
function check() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.aForm.tArea.value = decodeURI(xmlhttp.responseText);
}
}
// データをGETメソッドを使って保存
function saveFile()
{
txt = document.aForm.tArea.value;
if (xmlhttp) {
xmlhttp.open("GET", "save.rb?tArea="+encodeURI(txt), true);
xmlhttp.send(null);
}
}
// XMLHttpオブジェクト作成
function createXMLHttp() {
try {
return new ActiveXObject ("Microsoft.XMLHTTP");
}catch(e){
try {
return new XMLHttpRequest();
}catch(e) {
return null;
}
}
return null;
}
// --></script>
</head>
<body onLoad="getFile()">
<h1>Ajaxを使った簡易エディタ（不具合あり）</h1>
<form name="aForm">
<input type="button" value="ファイルを保存する" onClick="saveFile()"><br>
<textarea cols="40" rows="20" name="tArea"></textarea>
</body>
</html>
