ほげほげノート(3)
http://konbu.s13.xrea.com/lib/ajax/page3/page.html
一歩前進。複数ページを扱えるようになった。textareaがちゃんと更新されないことがあった問題を解決。
IEとFirefoxの改行コードの違いで挙動が違ったのが、ふと気付けば同じ挙動になってた。理由がよくわからない。
textareaの更新は、
document.getElementById(id).innerHTML = hoge;
な部分を
document.getElementById(id).value = hoge;
にすることで、ちゃんとすぐ更新されるようになった。が、読み込んだ内容が古いことがあった。
Firebugの情報(読み込みにかかっている時間が15ms。速過ぎる)より、キャッシュから読み込んでいることがわかる。.htaccessでデータフォルダのキャッシュ利用不可にすることで解決。
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="page.css" media="screen" /> <title> めもちょう。 </title> <script type="text/javascript" src="ajax.js"></script> <script type="text/javascript"><!-- function loadpage(page_name){ http = new HttpRequest(); http.onreadystatechange = function(){ if(http.readyState == 4){ id("page").value = http.responseText; print("page_name", page_name); document.title = page_name+" - メモ帳"; print_flush("status", "loaded."); } else { print("status", "Wait..."); } }; if(http){ http.open("GET", encodeURI(encodeURI(datadir+page_name)), false); http.send(""); } } function savepage(page_name){ var txtdata = id("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", "savepage.cgi", false); http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); http.send("datadir="+datadir+"&page_name="+encodeURI(encodeURI(page_name))+"&txtdata="+encodeURI(txtdata)); } } function editevent(event, tid){ var page_name = document.getElementById("page_name").innerHTML; print("status", "text edited..."); clearTimeout(tid); return window.setTimeout('savepage("'+page_name+'")',2000); } function openindexbox(){ var indexboxhtml; http = new HttpRequest(); http.onreadystatechange = function(){ if(http.readyState == 4){ indexboxhtml = decodeURI(http.responseText); indexboxhtml = indexboxhtml.replace(/(.+)\n/g, "<a href='javascript:selectpage(\"$1\");'>$1</a><br>"); indexboxhtml += '<input type="submit" onclick="closeindexbox();" value="やっぱやめる">'; id("indexbox").innerHTML = indexboxhtml; id("indexbox").style["display"] = "block"; print("status", ""); } else { print("status", "Wait..."); } }; if(http){ http.open("POST", "showindex.cgi", true); http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); http.send("datadir="+datadir); } } function selectpage(page_name){ print("page_name", page_name); loadpage(page_name); closeindexbox(); } function closeindexbox(){ id("indexbox").style["display"] = "none"; } function opensavebox(){ id("savebox").style["display"] = "block"; } function savepageas(){ var page_name = id("savepagename").value; savepage(page_name); print("page_name", page_name); document.title = page_name; id("savepagename").value = ""; closesavebox(); } function closesavebox(){ id("savebox").style["display"] = "none"; } // --> </script> </head> <body> <table class="note"> <tr class="titlebar"> <td class="titlebar_title"> <span id="page_name">無題</span> - メモ帳 </td> <td class="titlebar_button"> <input type="submit" value="_"> <input type="submit" value="□"> <input type="submit" value="×"> </td> </tr> <tr class="note_menu"><td colspan="2"> <a class="menu_item" id="openindexbox" href="javascript:openindexbox();">他のページ開く</a> <div class="childbox" id="indexbox"></div> <a class="menu_item" id="savepage" href="javascript:opensavebox();">別名で保存</a> <div class="childbox" id="savebox"> <input type="text" id="savepagename"> <input type="submit" onclick="savepageas()" value="保存"><br> <input type="submit" onclick="closesavebox();" value="やっぱやめる"> </div> </td></tr> <tr class="note_txt"><td colspan="2"> <textarea id="page" rows="15" cols="80" onkeypress="tid=editevent(event, tid);"></textarea> </td></tr> <tr class="note_status"><td colspan="2"><span id="status"></span></td></tr> </table> <script type="text/javascript"><!-- var tid; var datadir = "data/"; var page_name = document.getElementById("page_name").innerHTML; loadpage(page_name); // --> </script> </body> </html>
ajax.js
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 id(id){ return document.getElementById(id); } 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); }
page.css
@charset "utf-8"; /* ほげほげ */ body{ background-color:#efeff0; color:#004624; } #page{ } #pageindex{ } #status{ } .note{ background:#c9c9c9; border:solid 1px; width:42em; } .childbox{ position:absolute; z-index:1; border:solid 1px; background:#c9c9c9; display:none; padding:2px 2em 5px 2px; left: 2em; } .titlebar{ background:#3939a0; color:white; width:42em; text-align:left; border: 0px; } .titlebar_title{ width:38em; } .titlebar_button{ color:black; font:bold; text-align:right; width:70px; background:#c9c9c9; } .titlebar_button input{ width:20px; height:20px; } .note_status{ height:1.5em;
savepage.cgi
#!/usr/bin/perl -w use strict; use CGI; my $cgi = new CGI; print $cgi->header(-type=>'text/plain', -charset=>'utf-8'); my $datadir = $cgi->param('datadir'); my $page_name = $cgi->param('page_name'); my $txtdata = $cgi->param('txtdata'); open PAGE, ">$datadir$page_name"; print PAGE $txtdata; close PAGE; print "saved.";
showindex.cgi
#!/usr/bin/perl -w use strict; use CGI; my $cgi = new CGI; print $cgi->header(-type=>'text/plain', -charset=>'utf-8'); my $datadir = $cgi->param('datadir'); mkdir $datadir if(!(-e $datadir)); chdir $datadir; opendir DIR, "."; for(readdir DIR){ print "$_\n" if(-T $_ && $_ ne ".htaccess"); } closedir DIR;
cgiはたぶんそのうちまとめる。Javascriptをかなり適当に書いているのが。C言語に無いような、try, catchとかの意味を理解せずに書いている、とかもなんとか。次はコードを綺麗にしたりしようと思う。