Implementation Code for automatic saving of Ajax + JSP drafts

1. form part (index.html)

The first step is to fill in the form page, use a div with the ID autosavemsg to display the returned information, and use a checkbox with the ID draft_autosave to determine whether to save automatically, name the textarea ID as message. At the same time, in order to meet the needs of multiple users at the same time, with the user name, each user's draft is saved separately. For convenience, here we will remove some modifiers, which looks clear.

<H2> automatically save the draft of the Ajax application </H2> <br/>

<! -- The default username is noname -->

User name:
<Input type = "text" name = "memname" id = "memname"
Size = "20" value = "noname" Disabled = "true"/>

<! -- Call the Automatic save status setting function in The onclick event of the Automatic save option -->

<Input onclick = "setautosave ();" type = "checkbox" id = "draft_autosave" value = "1" Checked = "true"/> auto save?
<Br/>

Content:
<Textarea Cols = 40 rows = 8 id = "message"> the edited content is automatically saved for restoration. </textarea> <br/>

<! -- Autosavemsg displays the returned information -->
<Div id = "autosavemsg"> </div> <br/>

<Input type = "Submit" onclick = "Save ();" value = "save"/>

<! -- Call the function to restore the last saved draft -->
<Input type = "button" onclick = "autosaverestore ();" value = "Restore"/>
</Div>
</Div>

<! -- Convert JSCodePut it after all objects to avoid the error that the object does not exist when the page is not loaded. -->
| <! -- Ajax -->
<SCRIPT type = "text/JavaScript" src = "ajaxrequest. js"> </SCRIPT>
<! -- Automatically save the code -->
<SCRIPT type = "text/JavaScript" src = "autosave. js"> </SCRIPT>

Ii. autosave. jsp ):

// Set global variables first
// Formcontent object to save
VaR formcontent;
// Display the object of the returned information
VaR autosavemsg = Document. getelementbyid ("autosavemsg ");
// User Name
VaR memname = Document. getelementbyid ("memname"). value;
// Automatic Storage Interval
VaR autosavetime = 10000;
// Timer object
VaR autosavetimer;
// First set the Automatic save status
Setautosave ();
// Automatically save the Function
Function autosave (){
Formcontent = Document. getelementbyid ("message ");
// If the content or user name is empty, no processing is performed and a direct response is returned.
If (! Formcontent. Value |! Memname) return;
// Create an ajaxrequest object
VaR ajaxobj = new ajaxrequest;
Ajaxobj. url = "autosave. jsp ";
Ajaxobj. content = "Action = autosave & memname =" + memname + "& postcontent =" + formcontent. value;
Ajaxobj. Callback = function (xmlobj ){
// Display feedback
Autosavemsg. innerhtml = xmlobj. responsetext;
}
Ajaxobj. Send ();
}
// Set the Automatic save status Function
Function setautosave (){
// Is it automatically saved?
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 the last saved draft
Autosavemsg. innerhtml = "recovering... please wait ...... "
Formcontent = Document. getelementbyid ("message ");
// If the user name is blank, no processing is performed and a direct response is returned.
If (! Memname) return;
// Create an ajaxrequest object
VaR ajaxobj = new ajaxrequest;
Ajaxobj. url = "autosave. jsp ";
Ajaxobj. content = "Action = restore & memname =" + memname;
Ajaxobj. Callback = function (xmlobj ){
// Display feedback
If (xmlobj. responsetext! = ""){
// Restore draft
VaR S = xmlobj. responsetext. replace (/^ [\ n | \ r \ n] * | [\ n | \ r \ n] * $/g, ''); // remove the first and last empty rows
Formcontent. innertext = s;
// Prompt that the user has been restored successfully
Autosavemsg. innerhtml = "restored successfully ";
}
}
Ajaxobj. Send ();
}
Function save () {// Save the content to the database.
Formcontent = Document. getelementbyid ("message ");
// If the content or user name is empty, no processing is performed and a direct response is returned.
If (! Formcontent. Value |! Memname) return;
// Create an ajaxrequest object
VaR ajaxobj = new ajaxrequest;
Ajaxobj. url = "autosave. jsp ";
Ajaxobj. content = "Action = Save & memname =" + memname + "& postcontent =" + formcontent. value;
Ajaxobj. Callback = function (xmlobj ){
// Display feedback
Autosavemsg. innerhtml = xmlobj. responsetext;
}
Ajaxobj. Send ();
}
3. autosave. jsp is used to save the draft in the background:
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"); // you can call this operation to save or restore a draft.

// Obtain the user name
Memname = request. getparameter ("memname ");

// Obtain the draft content
Postcontent = request. getparameter ("postcontent ");

Filename = memname + ". txt"; // Save the draft File
Filename = request. getrealpath ("/temp/" + filename );
If (action. Equals ("save") | action. Equals ("autosave") {// the 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, create
{
F. createnewfile ();
}
FW = new filewriter (filename); // create a 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 the file
Out. println ("last in" + new date (). tostring () + "automatically saved !! 1 ");

} Else if (action. Equals ("Restore") {// restore operation
Filereader Fr = new filereader (filename); // create a filereader object and set it to be referenced by the FR object variable
Bufferedreader BR = new bufferedreader (FR); // create a bufferedreader object and set the variable cited by the BR object
Stringbuffer BF = new stringbuffer ();
String line;
While (line = Br. Readline ())! = NULL) {// read a row of data
BF. append (LINE + "\ n ");
}
Out. Print (BF. tostring (). Trim ());
} Else {
Out. println ("error occurred ");
}

%>

4. Download the Ajax class (ajaxrequest. JS.