ajax 自动保存草稿[转]

======================================================
注：本文源代码点此下载
======================================================

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

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

演示地址

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

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

程序代码:

ajax应用之草稿自动保存

用户名:

自动保存?

内容:

接下来是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,用于在后台保存草稿:

程序代码:

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 postcontentempty and memname

至此,ajax草稿自动保存完成了。

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/