Application of Ajax Draft automatically save _ajax related

Source: Internet
Author: User
Tags time interval
I believe that people who have used Gmail know that Gmail has a draft automatically save the function, each time, Gmail will automatically save the message quadrochromatic, so that in some cases can quickly resume work, lest write a half-day of the message blink between the No. After learning Ajax, I also added this feature to my blog. Of course, this application is not limited to the blog, it should be said to be more general.

PS. In order to develop the convenience, I used a write my own Ajax class, specific content and download here.

Demo Address, my blog

Still explain how to write in code notation.

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. For the sake of convenience, I removed some of the cosmetic stuff, which seemed clear:
Copy Code code as follows:

The draft of AJAX application is automatically saved <br/>
<!--user name defaults to Noname-->
User name: <input type= "text" name= "MemName" id= "MemName" "size=" value= "NONAME"/>
<!--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/>
Content:
<textarea id= "message" ></textarea><br/>
<!--autosavemsg display return information-->
<div id= "Autosavemsg" ></div>
<input type= "Submit" value= "submitted content"/>
<!--call function to restore the last saved draft-->
<input type= "button" onclick= "Autosaverestore ()" value= "Restore last saved draft"/>
</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>


Next up is Autosave.js .
Copy Code code as follows:

Set Global variables First
The Content object to save Formcontent
var Formcontent=document.getelementbyid ("message");
Display objects that return information
var Autosavemsg=document.getelementbyid ("Autosavemsg");
User name
var Memname=document.getelementbyid ("MemName"). Value;
Automatic save time interval
var autosavetime=60000;
Timer Object
var Autosavetimer;

Set up an automatic save state first
Setautosave ();

Auto Save function
function AutoSave () {
If the content or user name is empty, it is not processed and returned directly
if (! formcontent.value| |! MemName) return;
Create a Ajaxrequest object, and use the link to start the article in detail
var ajaxobj=new ajaxrequest;
Ajaxobj.url= "autosave.asp";
Ajaxobj.content= "Memname=" +escape (memname) + "&postcontent=" +escape (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);
}

Restore the last saved draft
function Autosaverestore () {
Creating Ajaxrequest Objects
var ajaxobj=new ajaxrequest;
Prompt user is recovering
Autosavemsg.innerhtml= "is recovering, please wait ..."
Ajaxobj.url= "autosave.asp";
Ajaxobj.content= "Action=restore&memname=" +escape (MemName);
Ajaxobj.callback=function (xmlobj) {
Prompt user for successful recovery
Autosavemsg.innerhtml= "Restore the last Save Success";
TextArea content is not overwritten if the content is empty
if (xmlobj.responsetext!= "") {
Recover drafts
Formcontent.value=xmlobj.responsetext;
}
}
Ajaxobj.send ()
}


Finally, autosave.asp is used to save drafts in the background:
Copy Code code as follows:

<% @LANGUAGE = "VBscript" codepage= "65001"%>
<% Option Explicit%>
<%
' Language for VBScript, encoded as UTF-8, require variable declaration
' ERROR is ignored, continue execution
On Error Resume Next

' Define some variables
Dim Postcontent,memname,action,objstream

' Get action, save draft or restore draft
Action=request.form ("Action")
' Get user name
Memname=request.form ("MemName")
' Get draft content
Postcontent=request.form ("Postcontent")
IF action= "Restore" Then
' Restore draft, restore if user name is not empty
IF Memname<>empty Then
' Use ADODB. Stream for file operation
Set objstream = Server.CreateObject ("ADODB. Stream ")
With Objstream
. Type = 2
. Mode = 3
. Open
' File name is Autosave_ + username +. txt
. LoadFromFile (Server.MapPath ("Autosave_" &memName& ". txt")
. Charset = "Utf-8"
'. Position = 0
Postcontent =. ReadText ()
. Close
End With
Set objstream = Nothing
' Output draft
IF postcontent<> "" Then Response.Write (postcontent)
End IF
Else
' Save draft, save if draft content and username are not empty
IF Postcontent<>empty and Memname<>empty Then
' Use ADODB. Stream for file operation
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 With
Set objstream = Nothing
' Output Save success information
If Err.number=0 Then
Response.Write ("Last In" &now () & "Auto Save succeeded")
Else
Response.Write ("Last In" &now () & "Automatic save failed, error number:" &Err.Number& ", error Description:" &err.dscription)
End If
End IF
End IF
%>

At this point, the Ajax draft is automatically saved and finished.
Original address: http://www.xujiwei.cn/blog/blogview.asp?logID=585
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.