One, form part (index.html)
The first is a form Fill page, with a div with ID autosavemsg to display the return information, and a checkbox with an ID of draft_autosave to determine whether to save automatically, and then name the textarea ID as message. In order to meet the needs of multiple users at the same time, plus the user name, each user's draft separately saved. To illustrate the convenience, here are some cosmetic things to remove, so that looks more clear
<!--user name defaults to Noname-->
User name:
<input type= "text" name= "MemName" id= "MemName"
Size= "value=" "NONAME" disabled= "true"/>
<!--invoke the Auto Save State setting function in the onclick event of the AutoSave option-->
<input onclick= "Setautosave (); type= checkbox" id= "Draft_autosave" value= "1" checked= "true"/> automatically save?
<br/><br/>
Content:
<textarea cols=40 rows=8 id= "message" > your edited content will be automatically saved in order to restore </textarea><br/><br
<!--autosavemsg display return information-->
<div id= "autosavemsg" ></div><br/>
<input type= "Submit" onclick= "Save ();" Value= "Save"/>
<!--call function to restore the last saved draft-->
<input type= "button" onclick= "Autosaverestore ();" value= "Restore"/>
</div>
</div>
<!--Place the JS code behind all objects to prevent errors that do not exist when the page is not loaded-->
|<!--Ajax Class-->
<script type= "Text/javascript" src= "Ajaxrequest.js" ></script>
<!--automatically save code-->
<script type= "Text/javascript" src= "Autosave.js" ></script>
II. Automatic save Code (AUTOSAVE.JSP):
Set Global variables First
The Content object to save Formcontent
var formcontent;
Display objects that return information
var Autosavemsg=document.getelementbyid ("Autosavemsg");
User name
var Memname=document.getelementbyid ("MemName"). Value;
Automatic save time interval
var autosavetime=10000;
Timer Object
var Autosavetimer;
Set up an automatic save state first
Setautosave ();
Auto Save function
function AutoSave () {
Formcontent=document.getelementbyid ("message");
If the content or user name is empty, it is not processed and returned directly
if (! formcontent.value| |! MemName) return;
Creating Ajaxrequest Objects
var ajaxobj=new ajaxrequest;
Ajaxobj.url= "autosave.jsp";
Ajaxobj.content= "Action=autosave&memname=" +memname+ "&postcontent=" +formcontent.value;
Ajaxobj.callback=function (xmlobj) {
Show feedback Information
Autosavemsg.innerhtml=xmlobj.responsetext;
}
Ajaxobj.send ();
}
Set Auto Save state function
function Setautosave () {
Do you want to save it automatically?
if (document.getElementById ("Draft_autosave"). Checked==true)
Yes, set the timer
Autosavetimer=setinterval ("AutoSave ()", autosavetime);
Else
No, clear the timer
Clearinterval (Autosavetimer);
}
function Autosaverestore () {//Restore last saved draft
Autosavemsg.innerhtml= "is recovering, please wait ..."
Formcontent=document.getelementbyid ("message");
If the user name is empty, it is not processed and returned directly
if (!memname) return;
Creating Ajaxrequest Objects
var ajaxobj=new ajaxrequest;
Ajaxobj.url= "autosave.jsp";
Ajaxobj.content= "Action=restore&memname=" +memname;
Ajaxobj.callback=function (xmlobj) {
Show feedback Information
if (xmlobj.responsetext!= "") {
Recover drafts
var s=xmlobj.responsetext.replace (/^[\n|\r\n]*|[ \n|\r\n]*$/g, "To remove the empty line
Formcontent.innertext=s;
Prompt user for successful recovery
Autosavemsg.innerhtml= "restore Success";
}
}
Ajaxobj.send ();
}
function Save () {//Save content to database, not completed.
Formcontent=document.getelementbyid ("message");
If the content or user name is empty, it is not processed and returned directly
if (! formcontent.value| |! MemName) return;
Creating Ajaxrequest Objects
var ajaxobj=new ajaxrequest;
Ajaxobj.url= "autosave.jsp";
Ajaxobj.content= "Action=save&memname=" +memname+ "&postcontent=" +formcontent.value;
Ajaxobj.callback=function (xmlobj) {
Show feedback Information
Autosavemsg.innerhtml=xmlobj.responsetext;
}
Ajaxobj.send ();
}
Third, finally is the autosave.jsp, uses in the backstage saves the draft:
Program code:
<%@ 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");/get action, save draft or restore draft
Get user Name
Memname=request.getparameter ("MemName");
Get draft content
Postcontent=request.getparameter ("Postcontent");
filename=memname+ ". txt";//Save draft files
Filename= Request.getrealpath ("/temp/" +filename);
if (Action.equals ("Save") | | Action.equals ("AutoSave")) {//Here two actions are merged, the code saved to the database is not written
f = new File (filename);
if (!f.exists ())//If the file is not saved, then establish
{
F.createnewfile ();
}
FW = new FileWriter (filename); Set up the FileWrite object and set it to be referenced by the FW object variable
Postcontent=new String (postcontent.getbytes ("Iso8859_1"), "UTF-8");
Fw.write (postcontent);
Fw.close (); Close File
Out.println ("Last On" +new Date (). toString () + "Automatic save success!!" 1 ");
}else if (action.equals ("restore")) {//redo operation
FileReader FR = new FileReader (filename); Set up the FileReader object and set the reference to the FR object variable
BufferedReader br = new BufferedReader (FR); Set up the BufferedReader object and set it to be cited by the BR object variable
StringBuffer bf=new StringBuffer ();
String Line;
while (line = Br.readline ())!=null) {//read one row of data
Bf.append (line+ "\ n");
}
Out.print (bf.tostring (). Trim ());
}else{
OUT.PRINTLN ("error occurred");
}
%>
Four, Ajax class (Ajaxrequest.js) please download.
