一
表单部分(l)
首先是表单填写页面用一个ID为AutoSaveMsg的DIV来显示返回信息并且用一个ID为Draft_AutoSave的CheckBox来确定是否进行自动保存然后将Textarea的ID命名为message同时为了应对多用户同时使用的需要加上用户名每个用户的草稿分开保存为了说明方便这里把一些修饰性的东西去掉这样看起来比较明了
<h>AJAX应用之草稿自动保存</h><br/>
<!用户名默认为NONAME>
用户名
<inputtype=textname=memNameid=memName
size=value=NONAMEdisabled=true/>
<!在自动保存选项的onclick事件中调用自动保存状态设置函数>
<inputonclick=SetAutoSave();type=checkboxid=Draft_AutoSavevalue=checked=true/>自动保存？
<br/><br/>
内容
<textareacols=rows=id=message>你编辑的内容将被自动保存以便恢复</textarea><br/><br/>
<!AutoSaveMsg显示返回信息>
<divid=AutoSaveMsg></div><br/>
<inputtype=submitonclick=Save();value=Save/>
<!调用函数恢复最后保存的草稿>
<inputtype=buttononclick=AutoSaveRestore();value=Restore/>
</div>
</div>
<!将JS代码放在所有对象之后以免在页面未加载完成时出现对象不存在的错误>
|<!AJAX类>
<scripttype=text/javascriptsrc=ajaxrequestjs></script>
<!自动保存代码>
<scripttype=text/javascriptsrc=autosavejs></script>
二自动保存代码(autosavejsp)
//首先设置全局变量
//要保存的内容对象FormContent
varFormContent;
//显示返回信息的对象
varAutoSaveMsg=documentgetElementById(AutoSaveMsg);
//用户名
varmemName=documentgetElementById(memName)value;
//自动保存时间间隔
varAutoSaveTime=;
//计时器对象
varAutoSaveTimer;
//首先设置一次自动保存状态
SetAutoSave();
//自动保存函数
functionAutoSave(){
FormContent=documentgetElementById(message);
//如果内容或用户名为空则不进行处理直接返回
if(!FormContentvalue||!memName)return;
//创建AJAXRequest对象
varajaxobj=newAJAXRequest;
ajaxobjurl=autosavejsp;
ntent=action=AutoSave&memname=+memName+&postcontent=+FormContentvalue;
ajaxobjcallback=function(xmlObj){
//显示反馈信息
AutoSaveMsginnerHTML=xmlObjresponseText;
}
ajaxobjsend();
}
//设置自动保存状态函数
functionSetAutoSave(){
//是否自动保存？
if(documentgetElementById(Draft_AutoSave)checked==true)
//是设置计时器
AutoSaveTimer=setInterval(AutoSave()AutoSaveTime);
else
//否清除计时器
clearInterval(AutoSaveTimer);
}
functionAutoSaveRestore(){//恢复最后保存的草稿
AutoSaveMsginnerHTML=正在恢复请稍候……
FormContent=documentgetElementById(message);
//如果用户名为空则不进行处理直接返回
if(!memName)return;
//创建AJAXRequest对象
varajaxobj=newAJAXRequest;
ajaxobjurl=autosavejsp;
ntent=action=Restore&memname=+memName;
ajaxobjcallback=function(xmlObj){
//显示反馈信息
if(xmlObjresponseText!=){
//恢复草稿
vars=xmlObjresponseTextreplace(/^[\n|\r\n]*|[\n|\r\n]*$/g);//去掉首尾空行
FormContentinnerText=s;
//提示用户恢复成功
AutoSaveMsginnerHTML=恢复成功;
}
}
ajaxobjsend();
}
functionSave(){//将内容保存至数据库没有完成
FormContent=documentgetElementById(message);
//如果内容或用户名为空则不进行处理直接返回
if(!FormContentvalue||!memName)return;
//创建AJAXRequest对象
varajaxobj=newAJAXRequest;
ajaxobjurl=autosavejsp;
ntent=action=Save&memname=+memName+&postcontent=+FormContentvalue;
ajaxobjcallback=function(xmlObj){
//显示反馈信息
AutoSaveMsginnerHTML=xmlObjresponseText;
}
ajaxobjsend();
}
三最后是autosavejsp用于在后台保存草稿
程序代码
<%@pagecontentType=text/html;charset=gb%>
<%@pageimport=javautil*%>
<%@pageimport=javaio*%>
<%
StringPostContentmemNameaction;
Stringfilename;
Filef;
FileWriterfw;
action=requestgetParameter(action);//获取操作是保存草稿还是恢复草稿
//获取用户名
memName=requestgetParameter(memname);
//获取草稿内容
PostContent=requestgetParameter(postcontent);
filename=memName+txt;//保存草稿的文件
filename=requestgetRealPath(/temp/+filename);
if(actionequals(Save)||actionequals(AutoSave)){//这里两个动作合并了保存到数据库的代码没有写
f=newFile(filename);
if(!fexists())//如果文件不存则建立
{
fcreateNewFile();
}
fw=newFileWriter(filename);//建立FileWrite对象并设定由fw对象变量引用
PostContent=newString(PostContentgetBytes(ISO_)UTF);
fwwrite(PostContent);
fwclose();//关闭文件
outprintln(最后于+newDate()toString()+自动保存成功!!);
}elseif(actionequals(Restore)){//恢复操作
FileReaderfr=newFileReader(filename);//建立FileReader对象并设定由fr对象变量引用
BufferedReaderbr=newBufferedReader(fr);//建立BufferedReader对象并设定由br对象变量引
StringBufferbf=newStringBuffer();
StringLine;
while((Line=brreadLine())!=null){//读取一行数据
bfappend(Line+\n);
}
outprint(bftoString()trim());
}else{
outprintln(发生错误);
}
%>
四AJAX类（ajaxrequestjs）请下载
