Automatically save the draft of the AJAX application

I believe that anyone who has used Gmail knows that Gmail has a draft automatic saving function. Every time, Gmail automatically saves the draft of the email so that it can quickly resume work in some emergency situations, otherwise, emails written for half a day will disappear in the twinkling of an eye. After learning AJAX, I also added this function to my blog. Of course, this application is not limited to blogs. It should be said that it is more common.

PS. For the convenience of development, I used a self-written AJAX class, the specific content and download here.

Demo address, my blog

The code is still annotated to illustrate how to write.

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 ease of instruction, I have removed some modifiers, which looks clear:Copy codeThe Code is as follows: the draft of the AJAX application is automatically saved <br/>
<! -- The default username is NONAME -->
Username: <input type = "text" name = "memName" id = "memName" size = "20" value = "NONAME"/>
<! -- 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 id = "message"> </textarea> <br/>
<! -- AutoSaveMsg displays the returned information -->
<Div id = "AutoSaveMsg"> </div>
<Input type = "submit" value = "submitted content"/>
<! -- Call the function to restore the last saved draft -->
<Input type = "button" onclick = "AutoSaveRestore ();" value = "Restore the last saved draft"/>
</Div>
</Div>
<! -- Place the JS Code 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>

Next is autosave. js.Copy codeThe Code is as follows: // first set the global variable
// FormContent object to save
Var FormContent = document. getElementById ("message ");
// 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 = 60000;
// Timer object
Var AutoSaveTimer;

// First set the Automatic save status
SetAutoSave ();

// Automatically save the Function
Function AutoSave (){
// 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. For details, see the link at the beginning of the article.
Var ajaxobj = new AJAXRequest;
Ajaxobj. url = "autosave. asp ";
Ajaxobj. content = "memname =" + escape (memName) + "& postcontent =" + escape (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 );
}

// Restore the last saved draft
Function AutoSaveRestore (){
// Create an AJAXRequest object
Var ajaxobj = new AJAXRequest;
// Prompt that the user is recovering
AutoSaveMsg. innerHTML = "recovering... please wait ...... "
Ajaxobj. url = "autosave. asp ";
Ajaxobj. content = "action = restore & memname =" + escape (memName );
Ajaxobj. callback = function (xmlObj ){
// Prompt that the user has been restored successfully
AutoSaveMsg. innerHTML = "Restore the last saved successfully ";
// If the content is empty, the content of textarea is not rewritten.
If (xmlObj. responseText! = ""){
// Restore draft
FormContent. value = xmlObj. responseText;
}
}
Ajaxobj. send ()
}

Autosave. asp is used to save the draft in the background:Copy codeThe Code is as follows: <% @ LANGUAGE = "VBscript" CODEPAGE = "65001" %>
<% Option Explicit %>
<%
'The language is VBScript, the code is UTF-8, the variable declaration is required
'If an error occurs, ignore it and continue execution.
On Error Resume Next

'Define some variables
Dim PostContent, memName, action, objStream

'Get operation: save draft or restore draft
Action = Request. Form ("action ")
'Get Username
MemName = Request. Form ("memname ")
'Get draft content
PostContent = Request. Form ("postcontent ")
IF action = "restore" Then
'Restore the draft. If the user name is not empty, perform the restore operation.
IF memName <> Empty Then
'Use ADODB. stream' for file operations
Set objStream = Server. CreateObject ("ADODB. Stream ")
With objStream
. Type = 2
. Mode = 3
. Open
'File name is autosave _ + User Name +. txt
. LoadFromFile (Server. MapPath ("autosave _" & memName & ". txt "))
. Charset = "UTF-8"
'. Position = 0
PostContent =. ReadText ()
. Close
End
Set objStream = NoThing
'Output draft
IF PostContent <> "" Then Response. Write (PostContent)
End IF
Else
'Save the draft. If neither the draft content nor the user name is blank, save the draft.
IF PostContent <> Empty AND memName <> Empty Then
'Use ADODB. stream' for file operations
Set objStream = Server. CreateObject ("ADODB. Stream ")
With objStream
. Type = 2
. Mode = 3
. Open
. Charset = "UTF-8"
. Position = objStream. Size
. WriteText = PostContent
. SaveToFile Server. MapPath ("autosave _" & memName & ". txt"), 2
. Close
End
Set objStream = NoThing
'The output indicates whether the storage is successful.
If Err. Number = 0 then
Response. Write ("last in" & Now () & "auto save successful ")
Else
Response. Write ("last in" & Now () & "auto save failed, error code:" & Err. Number & ", error Description:" & Err. dworkflow)
End If
End IF
End IF
%>

Now, the AJAX draft is automatically saved.
Original address: http://www.xujiwei.cn/blog/blogview.asp? LogID = 585