快捷導(dǎo)航

AJAX應(yīng)用之草稿自動(dòng)保存

更新時(shí)間：2006年10月27日 00:00:00 作者：

相信用過(guò)Gmail的人都知道Gmail有一個(gè)草稿自動(dòng)保存的功能，每過(guò)一段時(shí)間，Gmail都會(huì)自動(dòng)保存郵件草稿，這樣在一些突發(fā)情況下就能快速地恢復(fù)工作，免得寫了半天的郵件眨眼之間就沒(méi)有了。在學(xué)了AJAX之后，我也給自己的blog加上了這個(gè)功能。當(dāng)然，這個(gè)應(yīng)用并不只限于blog上，應(yīng)該說(shuō)還是比較通用的。

PS.為了開發(fā)的方便，我用了一個(gè)自己寫的AJAX類，具體內(nèi)容和下載在這里。

演示地址，我的blog

仍舊以代碼加注釋來(lái)方式來(lái)說(shuō)明怎么編寫。

首先是表單填寫頁(yè)面，用一個(gè)ID為AutoSaveMsg的DIV來(lái)顯示返回信息，并且用一個(gè)ID為Draft_AutoSave的CheckBox來(lái)確定是否進(jìn)行自動(dòng)保存，然后將Textarea的ID命名為message。同時(shí)為了應(yīng)對(duì)多用戶同時(shí)使用的需要，加上用戶名，每個(gè)用戶的草稿分開保存。為了說(shuō)明方便，我把一些修飾性的東西去掉，這樣看起來(lái)比較明了：

復(fù)制代碼代碼如下:

AJAX應(yīng)用之草稿自動(dòng)保存<br /> 
<!-- 用戶名默認(rèn)為NONAME --> 
用戶名：<input type="text" name="memName" id="memName" size="20" value="NONAME" />&nbsp;&nbsp;&nbsp;&nbsp; 
<!-- 在自動(dòng)保存選項(xiàng)的onclick事件中調(diào)用自動(dòng)保存狀態(tài)設(shè)置函數(shù) --> 
<input onclick="SetAutoSave();" type="checkbox" id="Draft_AutoSave" value="1" checked="true"  />自動(dòng)保存？<br /> 
內(nèi)容： 
<textarea id="message"></textarea><br /> 
<!-- AutoSaveMsg顯示返回信息 --> 
<div id="AutoSaveMsg"></div> 
<input type="submit" value="提交內(nèi)容" />&nbsp;&nbsp; 
<!-- 調(diào)用函數(shù)恢復(fù)最后保存的草稿 --> 
<input type="button" onclick="AutoSaveRestore();" value="恢復(fù)最后保存的草稿" /> 
</div> 
</div> 
<!-- 將JS代碼放在所有對(duì)象之后，以免在頁(yè)面未加載完成時(shí)出現(xiàn)對(duì)象不存在的錯(cuò)誤 --> 
<!-- AJAX類 --> 
<script type="text/javascript" src="ajaxrequest.js"></script> 
<!-- 自動(dòng)保存代碼 --> 
<script type="text/javascript" src="autosave.js"></script> 

接下來(lái)是autosave.js

復(fù)制代碼代碼如下:

// 首先設(shè)置全局變量 
// 要保存的內(nèi)容對(duì)象FormContent 
var FormContent=document.getElementById("message"); 
// 顯示返回信息的對(duì)象 
var AutoSaveMsg=document.getElementById("AutoSaveMsg"); 
// 用戶名 
var memName=document.getElementById("memName").value; 
// 自動(dòng)保存時(shí)間間隔 
var AutoSaveTime=60000; 
// 計(jì)時(shí)器對(duì)象 
var AutoSaveTimer; 

// 首先設(shè)置一次自動(dòng)保存狀態(tài) 
SetAutoSave(); 

// 自動(dòng)保存函數(shù) 
function AutoSave() { 
    // 如果內(nèi)容或用戶名為空，則不進(jìn)行處理，直接返回 
    if(!FormContent.value||!memName) return; 
    // 創(chuàng)建AJAXRequest對(duì)象，詳細(xì)使用見(jiàn)文章開始的鏈接 
    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(); 
} 

// 設(shè)置自動(dòng)保存狀態(tài)函數(shù) 
function SetAutoSave() { 
    // 是否自動(dòng)保存？ 
    if(document.getElementById("Draft_AutoSave").checked==true) 
        // 是，設(shè)置計(jì)時(shí)器 
        AutoSaveTimer=setInterval("AutoSave()",AutoSaveTime); 
    else 
        // 否，清除計(jì)時(shí)器 
        clearInterval(AutoSaveTimer); 
} 

// 恢復(fù)最后保存的草稿 
function AutoSaveRestore() { 
    // 創(chuàng)建AJAXRequest對(duì)象 
    var ajaxobj=new AJAXRequest; 
    // 提示用戶正在恢復(fù) 
    AutoSaveMsg.innerHTML="正在恢復(fù)，請(qǐng)稍候……" 
    ajaxobj.url="autosave.asp"; 
    ajaxobj.content="action=restore&memname="+escape(memName); 
    ajaxobj.callback=function(xmlObj) { 
        // 提示用戶恢復(fù)成功 
        AutoSaveMsg.innerHTML="恢復(fù)最后保存成功"; 
        // 如果內(nèi)容為空則不改寫textarea的內(nèi)容 
        if(xmlObj.responseText!="") { 
            // 恢復(fù)草稿 
            FormContent.value=xmlObj.responseText; 
        } 
    } 
    ajaxobj.send() 
} 

最后是autosave.asp，用于在后臺(tái)保存草稿：

復(fù)制代碼代碼如下:

<%@LANGUAGE="VBscript" CODEPAGE="65001"%> 
<% Option Explicit %> 
<% 
' 語(yǔ)言為VBScript，編碼為UTF-8，要求變量聲明 
' 出現(xiàn)錯(cuò)誤則忽略，繼續(xù)執(zhí)行 
On Error Resume Next 

' 定義一些變量 
Dim PostContent,memName,action,objStream 

' 獲取操作，是保存草稿還是恢復(fù)草稿 
action=Request.Form("action") 
' 獲取用戶名 
memName=Request.Form("memname") 
' 獲取草稿內(nèi)容 
PostContent=Request.Form("postcontent") 
IF action="restore" Then 
    ' 恢復(fù)草稿，如果用戶名不為空則進(jìn)行恢復(fù)操作 
    IF memName<>Empty Then 
        ' 使用 ADODB.Stream 來(lái)進(jìn)行文件操作 
        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 
    ' 保存草稿，如果草稿內(nèi)容和用戶名均不為空則進(jìn)行保存操作 
    IF PostContent<>Empty AND memName<>Empty Then 
        ' 使用 ADODB.Stream 來(lái)進(jìn)行文件操作 
        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()&" 自動(dòng)保存成功") 
        Else 
            Response.Write("最后于 "&Now()&" 自動(dòng)保存失敗，錯(cuò)誤號(hào)："&Err.Number&"，錯(cuò)誤描述："&Err.Dscription) 
        End If 
    End IF 
End IF 
%> 