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" /> &nbsp;&nbsp;&nbsp;&nbsp;

<script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script><script> window.google_render_ad(); </script> name="google_ads_frame" src="http://pagead2.googlesyndication.com/pagead/ads?client=ca-pub-1832179689702023&dt=1222132403065&lmt=1205313382&format=336x280_as&output=html&correlator=1222132403065&channel=7111701428&url=http%3A%2F%2Fwww.java3z.com%2Fcwbwebhome%2Farticle%2Farticle5%2F5776.html%3Fid%3D1364&color_bg=FFFFFF&color_text=000000&color_link=0000FF&color_url=3D81EE&color_border=FFFFFF&ad_type=text_image&frm=0&cc=72&ga_vid=1446211867.1222132403&ga_sid=1222132403&ga_hid=555128308&flash=0&u_h=1024&u_w=1280&u_ah=994&u_aw=1280&u_cd=32&u_tz=480&u_his=1&u_java=true&u_nplug=14&u_nmime=55" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" width="336" frameborder="0" height="280">

<!-- 在自动保存选项的onclick事件中调用自动保存状态设置函数 --> <input οnclick="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" οnclick="Save();" value="Save" />&nbsp;&nbsp; <!-- 调用函数恢复最后保存的草稿 --> <input type="button" οnclick="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）请下载。