ほげほげノート

Programming Javascript Ajax

JavaScriptの参考になりそなサイト

「保存」キーとか無いノート http://konbu.s13.xrea.com/lib/ajax/tpage/page.html
Firefox、IEで確認。意外とそんなに難しくなかった。まず適当にいじってみんべ、との気持ちからprototype.jsみたいのは使わずにやった。

page.html

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="hoge.css" media="screen" />
<title>
page
</title>
<script type="text/javascript"><!--
function HttpRequest(){
  if(window.ActiveXObject){
    try {
      return new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        return new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e2) {
        return null;
      }
    }
  } else if(window.XMLHttpRequest){
    return new XMLHttpRequest();
  } else {
    return null;
  }
}
function loadpage(){
  var page = "data.txt";
  http = new HttpRequest();
  http.onreadystatechange = display("page");
  if(http){
    http.open("GET", page, true);
    http.send("");
  }
}
function savepage(page){
  var txt = document.getElementById("page").value;
  http = new HttpRequest();
  http.onreadystatechange = display("status");
  if(http){
    http.open("POST", "savepage.cgi", true);
    http.send(txt);
  }
  return true;
}
function display(id){
  return function(){
    if(http.readyState == 4){
      print(id, http.responseText);
    }
  }
}
function print(id, str){
  document.getElementById(id).innerHTML = str;
}
function save(event, tid){
  print("status", "Wait...");
  clearTimeout(tid);
  return window.setTimeout("savepage()",2000);
}
// -->
</script>
</head>
<body>
<script type="text/javascript"><!--
loadpage();
var tid;
// -->
</script>

<textarea id="page" rows="15" cols="80" onkeypress="tid=save(event, tid);"></textarea>
<p id="status"></p>
</body>
</html>

displayっていらない子かもしれないと思た。

savepage.cgi

#!/usr/bin/perl -w

use strict;

print "Content-Type: text/plain\n\n";
open PAGE, ">data.txt";
print PAGE $_ while(<>);
close PAGE;
print "saved.";

なにがまずい。そう、POST文字列のうけわたしが適当。エスケープってなにそれおいしいの？ という。
そのへんかな、たぶん。

test