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）请下载。 

上一个：java AJAX实现级联下拉框
下一个：Jsp页面实现文件上传下载类代码第1/2页