php+ajax实现文章自动保存的方法
本文实例讲述了php+ajax实现文章自动保存的方法。分享给大家供大家参考。具体分析如下：
php+ajax文章自动保存的方法主是要方便用户,提高用户体验,我们就是用ajax把数据保存一个临时数据,像csdn一样,他可以自动保存用户的数据,这样就是掉电,出现意外你编辑的数据都不人被丢失.
这是自动保存草稿的核心的一部分,
autosavetime(sec)这个函数是用来开始计时的
clearTimeout(autosavetimer);清除定时器
document.getElementById('autosavetimebox').innerHTML=sec+"秒";取得页面中的autosavetimebox对像,并向其写入倒计时
if(sec>0){
autosavetimer=setTimeout("autosavetime("+sec+"-1)",1000);
//这里就是如果当sec>0的时候，第一秒执行一次autosavetime这个函数，同时会把sec-1的值写入autosavetimebox中
}else{
vartitle=document.getElementById('title');
if(title.value!=''){
autosave_post();
}else{
document.getElementById('autosavetimebox').innerHTML='不用保存';
}
}这一部分,就是当sec>0的条件不成立,呵呵,就是sec<=0的时候,开始执行保存草稿,首先会判断文章的标题是否为空,如果不会为空,就执行autosave_post()这个函数,否则就写入‘不用保存'.
php代码如下:
varuserAgent=navigator.userAgent.toLowerCase();
varis_opera =(userAgent.indexOf('opera')!=-1);
varis_saf =((userAgent.indexOf('applewebkit')!=-1)||(navigator.vendor=='AppleComputer,Inc.'));
varis_webtv =(userAgent.indexOf('webtv')!=-1);
varis_ie =((userAgent.indexOf('msie')!=-1)&&(!is_opera)&&(!is_saf)&&(!is_webtv));
varis_ie4 =((is_ie)&&(userAgent.indexOf('msie4.')!=-1));
varis_moz =((navigator.product=='Gecko')&&(!is_saf));
varis_kon =(userAgent.indexOf('konqueror')!=-1);
varis_ns =((userAgent.indexOf('compatible')==-1)&&(userAgent.indexOf('mozilla')!=-1)&&(!is_opera)&&(!is_webtv)&&(!is_saf));
varis_ns4 =((is_ns)&&(parseInt(navigator.appVersion)==4));
varis_mac =(userAgent.indexOf('mac')!=-1);
if((is_ie&!is_ie4)||is_moz||is_saf||is_opera)
{
varallowajax=1;
}else{
varallowajax=0;
}
varxmlHttp=false;
functionmakeSendData(postData,url,functionName,httptype){
varposturl=url;
try{
xmlHttp=newActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
}catch(e2){
xmlHttp=false;
}
}
if(!xmlHttp&&typeofXMLHttpRequest!='undefined'){
xmlHttp=newXMLHttpRequest();
}
if(!xmlHttp){
alert('CannotsendanXMLHTTPrequest');
returnfalse;
}
//提交表单的方式
xmlHttp.open(httptype,posturl,true);
//当表单提交完成后触发一个事件
varchangefunc="xmlHttp.onreadystatechange="+functionName; ///////frombob
eval(changefunc);
xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xmlHttp.send(postData);
}
functionautosave_post()
{
vartitle=document.getElementById('title').value;
varcontent=window.frames["Editor"].window.frames["HtmlEditor"].document.getElementsByTagName("BODY")[0].innerHTML;
varpostTime=document.getElementById('postTime').value;
if(allowajax==1)
{
content=postencode(content);
title=postencode(title);
varpost="title="+title+"&content="+content+"&postTime="+postTime+"";
varurl="ajax.php?act=autosave";
makeSendData(post,url,'autosave','POST');
}
}
functionautosave()
{
if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
varautoresponse=xmlHttp.responseText;
varautomessage=document.getElementById('autosavetimebox');
if(autoresponse.indexOf("<autosave_error>")!=-1)
{
automessage.innerHTML='您还没有添写信息，不用保存草稿';
returnfalse;
}
if(autoresponse.indexOf("<autosave_ok>")!=-1)
{
automessage.innerHTML='保存成功，您可以在发生意外的时候载入草稿';
finddraft();
}
}
}
}
functionfinddraft()
{
if(allowajax==1)
{
varurl="ajax.php?act=loaddraft";
makeSendData(null,url,'loaddraft','POST');
}
}
functionloaddraft()
{
vardraftbox=document.getElementById('draft');
if(xmlHttp.readyState<4)
{
draftbox.innerHTML='草稿载入中...';
}
if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
draftbox.innerHTML=xmlHttp.responseText;
}
}
}
functioncleardraft()
{
if(allowajax==1)
{
varurl="ajax.php?act=cleardraft";
makeSendData(null,url,'nodraft','POST');
}
}
functionnodraft()
{
vardraftbox=document.getElementById('draft');
if(xmlHttp.readyState<4)
{
draftbox.innerHTML='载入中...';
}
if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
draftbox.innerHTML=xmlHttp.responseText;
}
}
}
//encodestring
functionpostencode(str){
str=encodeURIComponent(str);
if(is_moz)str=str.replace(/%0A/g,"%0D%0A");//frombob
returnstr;
}自动保存的js代码,代码如下:
varautosavetimer;
functionautosavetime(sec){
clearTimeout(autosavetimer);
document.getElementById('autosavetimebox').innerHTML=sec+"秒";
if(sec>0){
autosavetimer=setTimeout("autosavetime("+sec+"-1)",1000);
}else{
varblogtitle=document.getElementById('title');
if(blogtitle.value!=''){
autosave_post();
}else{
document.getElementById('autosavetimebox').innerHTML='不用保存';
}
}
}
functionstartimer()
{
varstarttime=document.getElementById('autosavetimebox').innerHTML;
if(starttime=='保存成功，您可以在发生意外的时候载入草稿'||starttime=='您还没有添写信息，不用保存草稿')
{
starttime='60';
}else{
starttime=starttime.replace('秒','');
}
varautosavefunbox=document.getElementById('autosavefunbox');
autosavefunbox.innerHTML='<ahref="javascript教程:"onClick="javascript：stoptimer()">停止计时</a>';
starttime==0?starttime=60:starttime=starttime;
autosavetime(starttime);
}
functionstoptimer()
{
varautosavefunbox=document.getElementById('autosavefunbox');
autosavefunbox.innerHTML='<ahref="javascript："onClick="javascript：startimer()">开始计时</a>';
clearTimeout(autosavetimer);
}
希望本文所述对大家的php程序设计有所帮助。