zoukankan      html  css  js  c++  java
  • ajax 自动保存草稿[转]

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

      注:为了开发的方便,笔者用了一个自己写的AJAX类,具体内容和下载在这里。[本地下载请点击这里(1.42KB)]

      演示地址

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

      首先是表单填写页面,用一个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=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草稿自动保存完成了。

  • 相关阅读:
    MongoDB的安装与简单使用
    [SCOI2008]天平
    [ZJOI2008]树的统计
    [HEOI2015]兔子与樱花
    [HAOI2006]l旅行
    [ZJOI2008]泡泡堂BNB
    [ZJOI2007]时态同步
    [SCOI2005]栅栏
    [SCOI2008]着色方案
    [SCOI2005]互不侵犯King
  • 原文地址:https://www.cnblogs.com/sig556/p/1564915.html
Copyright © 2011-2022 走看看