当前位置: 首页 > 图文教程 > XML家族 > XML > AJAX应用之草稿自动保存

XML
XML简易教程之四
XML与HTML的结合（上）
XML与HTML的结合（下）
XML入门的常见问题(一)
XML入门的常见问题(二)
XMLHTTP资料
什么是XML
什么是 XML Web Service
XML正在接管Web服务 成为SOA的基础
怎么样在网页上读取远程xml的数据
XML教程—编写结构完整的XML文档
读写xml文件的2个小函数
XML文档的基本操作
初学者如何开发出一个高质量的J2EE系统
优化 JavaScript 代码
自动更新程序的设计框架
使Firefox对XML的处理兼容IE的节点处理方法
WML学习之四 锚和任务
WML学习之五 显示表单
WML学习之六 事件

No. « 17 18 19 20 »

技术文章搜索

关键字

XML 中的 AJAX应用之草稿自动保存

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-17   浏览: 50 ::
收藏到网摘: n/a

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

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