Ajax instance application first experience: Automatically save drafts

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.