ajax+jsp草稿自动保存的实现代码

一、表单部分 (index.html)

    首先是表单填写页面，用一个id为autosavemsg的div来显示返回信息，并且用一个id为draft_autosave的checkbox来确定是否进行自动保存，然后将textarea的id命名为message。同时为了应对多用户同时使用的需要，加上用户名，每个用户的草稿分开保存。为了说明方便，这里把一些修饰性的东西去掉，这样看起来比较明了

<h2>ajax应用之草稿自动保存</h2><br />

<!-- 用户名默认为noname -->

用户名：
<input type="text" name="memname" id="memname" 
    size="20" value="noname" disabled="true" />     

<!-- 在自动保存选项的onclick事件中调用自动保存状态设置函数 -->

<input onclick="setautosave();" type="checkbox" id="draft_autosave" value="1" checked="true" />自动保存？
<br /><br />

内容：
<textarea cols=40 rows=8 id="message">你编辑的内容将被自动保存,以便恢复</textarea><br /><br />

<!-- autosavemsg显示返回信息 -->
<div id="autosavemsg"></div><br />

<input type="submit" onclick="save();" value="save" />  

<!-- 调用函数恢复最后保存的草稿 -->
<input type="button" onclick="autosaverestore();" value="restore" />
</div>
</div>

<!-- 将js代码放在所有对象之后，以免在页面未加载完成时出现对象不存在的错误 -->
|<!-- ajax类 -->
<script type="text/javascript" src="ajaxrequest.js"></script>
<!-- 自动保存代码 -->
<script type="text/javascript" src="autosave.js"></script>


二、自动保存代码(autosave.jsp)：

  // 首先设置全局变量
// 要保存的内容对象formcontent
var formcontent;
// 显示返回信息的对象
var autosavemsg=document.getelementbyid("autosavemsg");
// 用户名
var memname=document.getelementbyid("memname").value;
// 自动保存时间间隔
var autosavetime=10000;
// 计时器对象
var autosavetimer;
// 首先设置一次自动保存状态
setautosave();
// 自动保存函数
function autosave() {
     formcontent=document.getelementbyid("message");
    // 如果内容或用户名为空，则不进行处理，直接返回
    if(!formcontent.value||!memname) return;
    // 创建ajaxrequest对象
    var ajaxobj=new ajaxrequest;
    ajaxobj.url="autosave.jsp";
    ajaxobj.content="action=autosave&memname="+memname+"&postcontent="+formcontent.value;
    ajaxobj.callback=function(xmlobj) {
        // 显示反馈信息
        autosavemsg.innerhtml=xmlobj.responsetext;
    }
    ajaxobj.send();
}
// 设置自动保存状态函数
function setautosave() {
    // 是否自动保存？
    if(document.getelementbyid("draft_autosave").checked==true)
        // 是，设置计时器
        autosavetimer=setinterval("autosave()",autosavetime);
    else
        // 否，清除计时器
        clearinterval(autosavetimer);
}
function autosaverestore() {// 恢复最后保存的草稿
     autosavemsg.innerhtml="正在恢复，请稍候……"
     formcontent=document.getelementbyid("message");
    // 如果用户名为空，则不进行处理，直接返回
    if(!memname) return;
    // 创建ajaxrequest对象
    var ajaxobj=new ajaxrequest;
    ajaxobj.url="autosave.jsp";
    ajaxobj.content="action=restore&memname="+memname;
    ajaxobj.callback=function(xmlobj) {
         // 显示反馈信息
      if(xmlobj.responsetext!="") {
         // 恢复草稿
         var s=xmlobj.responsetext.replace(/^[\n|\r\n]*|[\n|\r\n]*$/g,'');//去掉首尾空行
         formcontent.innertext=s;
          // 提示用户恢复成功
        autosavemsg.innerhtml="恢复成功";
        }
    }
    ajaxobj.send();
}
function save() {//将内容保存至数据库,没有完成.
 formcontent=document.getelementbyid("message");
    // 如果内容或用户名为空，则不进行处理，直接返回
    if(!formcontent.value||!memname) return;
    // 创建ajaxrequest对象
    var ajaxobj=new ajaxrequest;
    ajaxobj.url="autosave.jsp";
    ajaxobj.content="action=save&memname="+memname+"&postcontent="+formcontent.value;
    ajaxobj.callback=function(xmlobj) {
        // 显示反馈信息
        autosavemsg.innerhtml=xmlobj.responsetext;
    }
    ajaxobj.send();
} 
三、  最后是autosave.jsp，用于在后台保存草稿：
　　程序代码：

<%@ page contenttype="text/html; charset=gb2312" %>
<%@ page import="java.util.*" %>
<%@ page import="java.io.*" %>

<%
  string postcontent,memname,action;
  string filename;
  file f; 
  filewriter fw;
   action=request.getparameter("action");//获取操作，是保存草稿还是恢复草稿

  //获取用户名
   memname=request.getparameter("memname");

  //获取草稿内容
   postcontent=request.getparameter("postcontent");

  filename=memname+".txt";//保存草稿的文件
  filename= request.getrealpath("/temp/"+filename);
  if(action.equals("save")||action.equals("autosave")){ //这里两个动作合并了,保存到数据库的代码没有写
    f = new file(filename);
    if(!f.exists())//如果文件不存，则建立
    {
      f.createnewfile();
    }
   fw = new filewriter(filename); //建立filewrite对象,并设定由fw对象变量引用
   postcontent=new string(postcontent.getbytes("iso8859_1"),"utf-8");

   fw.write(postcontent);
   fw.close(); //关闭文件
    out.println("最后于"+new date().tostring()+"自动保存成功!!1");

   }else if(action.equals("restore")){//恢复操作
     filereader fr = new filereader(filename); //建立filereader对象,并设定由fr对象变量引用
     bufferedreader br = new bufferedreader(fr); //建立bufferedreader对象,并设定由br对象变量引 
    stringbuffer bf=new stringbuffer(); 
    string line; 
    while((line = br.readline())!=null){ //读取一行数据
      bf.append(line+"\n");
    }
    out.print(bf.tostring().trim());
  }else{
    out.println(" 发生错误");
  }

%>

四、ajax类（ajaxrequest.js）请下载。