ほげほげノート(2)

Programmming Javascript Ajax

ちょいちょい改良（？）
http://konbu.s13.xrea.com/lib/ajax/tpage/page2.html
POSTデータのうけわたしをちゃんとするようにした。あとステータス表示部分追加。の後、なんか遊びで表示をメモ帳っぽくしてみた。

最初 XMLHttpRequest のPOSTデータが CGI.pm で受け取れなかった。「CGI.pm XMLHttpRequest」でぐぐったら、最初に出てきたページ（http://www.perlmonks.org/?node_id=588174）で、

xmlhttp.setRequestHeader(
    'Content-Type', 
    'application/x-www-form-urlencoded'
);

してみって書いてあったのでそうしたらちゃんと CGI.pm の param で、XMLHttpRequest のデータを受け取れた。「http://jsgt.org/ajax/ref/test/enctype/test1.htm」あたりも参照。

page2.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="page2.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 = "data2.txt";
  http = new HttpRequest();
  http.onreadystatechange = function(){
    if(http.readyState == 4){
      print("page", http.responseText);
      print_flush("status", "loaded.");
    } else {
      print("status", "Wait...");
    }
  };
  if(http){
    http.open("GET", page, true);
    http.send("");
  }
}
function savepage(page){
  var txtdata = document.getElementById("page").value;
  http = new HttpRequest();
  http.onreadystatechange = function(){
    if(http.readyState == 4){
      print_flush("status", "saved.");
    } else {
      print("status", "Wait...");
    }
  };
  if(http){
    http.open("POST", "savepage2.cgi", true);
    http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
    http.send("txtdata="+encodeURI(txtdata));
  }
}
function print(id, str){
  document.getElementById(id).innerHTML = str;
}
function print_flush(id, str){
  document.getElementById(id).innerHTML = str;
  window.setTimeout('document.getElementById("'+id+'").innerHTML = ""', 2000);
}
function editevent(event, tid){
  print("status", "text edited...");
  clearTimeout(tid);
  return window.setTimeout("savepage()",2000);
}
// -->
</script>
</head>
<body>
<table class="note">
<tr class="note_title">
<td>
<span class="title_title">
data2.txt - メモ帳
</span>
<span class="title_button">
<input type="submit" value="＿">
<input type="submit" value="□">
<input type="submit" value="×">
</span>
</td>
</tr>
<tr class="note_menu"><td>
<span class="menu_item">ファイル(<u>F</u>)</span>
<span class="menu_item">編集(<u>E</u>)</span>
<span class="menu_item">検索(<u>S</u>)</span>
<span class="menu_item">表示(<u>V</u>)</span>
</td></tr>
<tr class="note_txt"><td>
<textarea id="page" rows="15" cols="80" onkeypress="tid=editevent(event, tid);"></textarea>
</td></tr>
<tr class="note_status"><td><span id="status"></span></td></tr>
</table>

<script type="text/javascript"><!--
var tid;
loadpage();
// -->
</script>
</body>
</html>

デザインのため変更は含むけど、それ意外だと変更部分はJavascriptのみ。

savepage2.cgi

#!/usr/bin/perl -w

use strict;
use CGI;

my $cgi = new CGI;

print $cgi->header(-type=>'text/plain', -charset=>'utf-8');

my $txtdata = $cgi->param('txtdata');

open PAGE, ">data2.txt";
print PAGE $txtdata;
close PAGE;
print "saved.";

test