AJAX应用之草稿自动保存

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

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

，

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

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

ajax应用之草稿自动保存<br />
<!-- 用户名默认为noname -->
用户名：<input type="text" name="memname" id="memname" size="20" value="noname" />    
<!-- 在自动保存选项的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="提交内容" />  
<!-- 调用函数恢复最后保存的草稿 -->
<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=restore&memname="+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
%>

至此，ajax草稿自动保存完成了。
原文地址：http://www.xujiwei.cn/blog/blogview.asp?logid=585