AJAX应用之草稿自动保存-巨人网络通讯

AJAX应用之草稿自动保存

相信用过Gmail的人都知道Gmail有一个草稿自动保存的功能，每过一段时间，Gmail都会自动保存邮件草稿，这样在一些突发情况下就能快速地恢复工作，免得写了半天的邮件眨眼之间就没有了。在学了AJAX之后，我也给自己的blog加上了这个功能。当然，这个应用并不只限于blog上，应该说还是比较通用的。

PS.为了开发的方便，我用了一个自己写的AJAX类，具体内容和下载在这里。

演示地址，我的blog

仍旧以代码加注释来方式来说明怎么编写。

首先是表单填写页面，用一个ID为AutoSaveMsg的DIV来显示返回信息，并且用一个ID为Draft_AutoSave的CheckBox来确定是否进行自动保存，然后将Textarea的ID命名为message。同时为了应对多用户同时使用的需要，加上用户名，每个用户的草稿分开保存。为了说明方便，我把一些修饰性的东西去掉，这样看起来比较明了：

复制代码代码如下:

AJAX应用之草稿自动保存br /> 
!-- 用户名默认为NONAME --> 
用户名：input type="text" name="memName" id="memName" size="20" value="NONAME" />nbsp;nbsp;nbsp;nbsp; 
!-- 在自动保存选项的onclick事件中调用自动保存状态设置函数 --> 
input onclick="SetAutoSave();" type="checkbox" id="Draft_AutoSave" value="1" checked="true"  />自动保存？br /> 
内容： 
textarea id="message">/textarea>br /> 
!-- AutoSaveMsg显示返回信息 --> 
div id="AutoSaveMsg">/div> 
input type="submit" value="提交内容" />nbsp;nbsp; 
!-- 调用函数恢复最后保存的草稿 --> 
input type="button" onclick="AutoSaveRestore();" value="恢复最后保存的草稿" /> 
/div> 
/div> 
!-- 将JS代码放在所有对象之后，以免在页面未加载完成时出现对象不存在的错误 --> 
!-- AJAX类 --> 
script type="text/javascript" src="ajaxrequest.js">/script> 
!-- 自动保存代码 --> 
script type="text/javascript" src="autosave.js">/script> 

接下来是autosave.js

复制代码代码如下:

// 首先设置全局变量 
// 要保存的内容对象FormContent 
var FormContent=document.getElementById("message"); 
// 显示返回信息的对象 
var AutoSaveMsg=document.getElementById("AutoSaveMsg"); 
// 用户名 
var memName=document.getElementById("memName").value; 
// 自动保存时间间隔 
var AutoSaveTime=60000; 
// 计时器对象 
var AutoSaveTimer; 

// 首先设置一次自动保存状态 
SetAutoSave(); 

// 自动保存函数 
function AutoSave() { 
    // 如果内容或用户名为空，则不进行处理，直接返回 
    if(!FormContent.value||!memName) return; 
    // 创建AJAXRequest对象，详细使用见文章开始的链接 
    var ajaxobj=new AJAXRequest; 
    ajaxobj.url="autosave.asp"; 
    ajaxobj.content="memname="+escape(memName)+"postcontent="+escape(FormContent.value); 
    ajaxobj.callback=function(xmlObj) { 
        // 显示反馈信息 
        AutoSaveMsg.innerHTML=xmlObj.responseText; 
    } 
    ajaxobj.send(); 
} 

// 设置自动保存状态函数 
function SetAutoSave() { 
    // 是否自动保存？ 
    if(document.getElementById("Draft_AutoSave").checked==true) 
        // 是，设置计时器 
        AutoSaveTimer=setInterval("AutoSave()",AutoSaveTime); 
    else 
        // 否，清除计时器 
        clearInterval(AutoSaveTimer); 
} 

// 恢复最后保存的草稿 
function AutoSaveRestore() { 
    // 创建AJAXRequest对象 
    var ajaxobj=new AJAXRequest; 
    // 提示用户正在恢复 
    AutoSaveMsg.innerHTML="正在恢复，请稍候……" 
    ajaxobj.url="autosave.asp"; 
    ajaxobj.content="action=restorememname="+escape(memName); 
    ajaxobj.callback=function(xmlObj) { 
        // 提示用户恢复成功 
        AutoSaveMsg.innerHTML="恢复最后保存成功"; 
        // 如果内容为空则不改写textarea的内容 
        if(xmlObj.responseText!="") { 
            // 恢复草稿 
            FormContent.value=xmlObj.responseText; 
        } 
    } 
    ajaxobj.send() 
} 

最后是autosave.asp，用于在后台保存草稿：

复制代码代码如下:

%@LANGUAGE="VBscript" CODEPAGE="65001"%> 
% Option Explicit %> 
% 
' 语言为VBScript，编码为UTF-8，要求变量声明 
' 出现错误则忽略，继续执行 
On Error Resume Next 

' 定义一些变量 
Dim PostContent,memName,action,objStream 

' 获取操作，是保存草稿还是恢复草稿 
action=Request.Form("action") 
' 获取用户名 
memName=Request.Form("memname") 
' 获取草稿内容 
PostContent=Request.Form("postcontent") 
IF action="restore" Then 
    ' 恢复草稿，如果用户名不为空则进行恢复操作 
    IF memName>Empty Then 
        ' 使用 ADODB.Stream 来进行文件操作 
        Set objStream = Server.CreateObject("ADODB.Stream") 
        With objStream 
            .Type = 2 
            .Mode = 3 
            .Open 
            ' 文件名为 autosave_ + 用户名 + .txt 
            .LoadFromFile(Server.MapPath("autosave_"memName".txt")) 
            .Charset = "utf-8" 
            '.Position = 0 
            PostContent = .ReadText() 
            .Close 
        End With 
        Set objStream = NoThing 
        ' 输出草稿 
        IF PostContent>"" Then Response.Write(PostContent) 
    End IF 
Else 
    ' 保存草稿，如果草稿内容和用户名均不为空则进行保存操作 
    IF PostContent>Empty AND memName>Empty Then 
        ' 使用 ADODB.Stream 来进行文件操作 
        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 
        ' 输出保存是否成功信息 
        If Err.Number=0 then 
            Response.Write("最后于 "Now()" 自动保存成功") 
        Else 
            Response.Write("最后于 "Now()" 自动保存失败，错误号："Err.Number"，错误描述："Err.Dscription) 
        End If 
    End IF 
End IF 
%> 