Ajax instance application first experience: Automatically save drafts

Source: Internet
Author: User
Tags object empty end variables return time interval
Ajax

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, the author also gave his blog added this function. Of course, this application is not limited to the blog, it should be said to be more general.

Note: In order to develop the convenience, the author used a write their own Ajax class, the specific content and download here. [LOCAL Download click here (1.42KB)]

Demo Address

The code is still annotated to illustrate how to write.

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:

Program code:

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 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" 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.

Program code:

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:

Program code:

<% @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.



Related Article

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

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.