php+ajax实现文章自动保存的方法
《php+ajax实现文章自动保存的方法》要点: 本篇章节讲解php+ajax实现文章自动保存的办法.分享给大家供大家参考.具体分析如下:PHP应用 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 { ????????? var title=document.getElementById('title'); ????????? if(title.value!=''){ ????????????????????????????????? autosave_post(); ????????? }else{ ???????????????? document.getElementById('autosavetimebox').innerHTML='不用保存';??? ????????? } } 这一部分,就是当sec>0的条件不成立,呵呵,就是sec<=0的时候,开始执行保存草稿,首先会判断文章的标题是否为空,如果不会为空,就执行autosave_post()这个函数,否则就写入‘不用保存'. php代码如下:
代码如下:
var userAgent = navigator.userAgent.toLowerCase();
var is_opera? = (userAgent.indexOf('opera') != -1); var is_saf??? = ((userAgent.indexOf('applewebkit') != -1) || (navigator.vendor == 'Apple Computer,Inc.')); var is_webtv? = (userAgent.indexOf('webtv') != -1); var is_ie???? = ((userAgent.indexOf('msie') != -1) && (!is_opera) && (!is_saf) && (!is_webtv)); var is_ie4??? = ((is_ie) && (userAgent.indexOf('msie 4.') != -1)); var is_moz??? = ((navigator.product == 'Gecko') && (!is_saf)); var is_kon??? = (userAgent.indexOf('konqueror') != -1); var is_ns???? = ((userAgent.indexOf('compatible') == -1) && (userAgent.indexOf('mozilla') != -1) && (!is_opera) && (!is_webtv) && (!is_saf)); var is_ns4??? = ((is_ns) && (parseInt(navigator.appVersion) == 4)); var is_mac??? = (userAgent.indexOf('mac') != -1); if ((is_ie & !is_ie4) || is_moz || is_saf || is_opera) { ??? var allowajax=1; }else{ ??? var allowajax=0; } var xmlHttp = false; function makeSendData(postData,url,functionName,httptype) { ? var posturl=url; try { ?? xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { ?? try { ???? xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); ?? } catch (e2) { ???? xmlHttp = false; ?? } } if (!xmlHttp && typeof XMLHttpRequest != 'undefined') { ?? xmlHttp = new XMLHttpRequest(); } ? if (!xmlHttp) { ??????? alert('Cannot send an XMLHTTP request'); ??????? return false; } ? // 提交表单的方式 xmlHttp.open(httptype,posturl,true); ? // 当表单提交完成后触发一个事件 var changefunc="xmlHttp.onreadystatechange = "+functionName;? ///////from bob eval (changefunc); xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');? xmlHttp.send(postData); } function autosave_post() { ??? var title=document.getElementById('title').value; ??? var content = window.frames["Editor"].window.frames["HtmlEditor"].document.getElementsByTagName("BODY")[0].innerHTML; ??? var postTime=document.getElementById('postTime').value; ??? if(allowajax==1) ??? { ??????? content=postencode(content); ??????? title=postencode(title); ??????? var post="title="+title+"&content="+content+"&postTime="+postTime+""; ??????? var url="ajax.php?act=autosave"; ??????? makeSendData(post,'autosave','POST'); ??? } } function autosave() { ??? if(xmlHttp.readyState == 4) ??? { ??????? if(xmlHttp.status == 200) ??????? { ??????????? var autoresponse=xmlHttp.responseText; ??????????? var automessage=document.getElementById('autosavetimebox'); ??????????? if(autoresponse.indexOf("<autosave_error>")!=-1) ??????????? { ??????????????? automessage.innerHTML='您还没有添写信息,不用保存草稿'; ??????????????? return false; ??????????? } ??????????? if(autoresponse.indexOf("<autosave_ok>")!=-1) ??????????? { ??????????????? automessage.innerHTML='保存成功,您可以在发生意外的时候载入草稿'; ??????????????? finddraft(); ??????????? } ??????? } ??? } } function finddraft() { ??? if(allowajax==1) ??? { ??????? var url="ajax.php?act=loaddraft"; ??????? makeSendData(null,'loaddraft','POST'); ??? } } function loaddraft() { ??? var draftbox=document.getElementById('draft'); ??? if(xmlHttp.readyState < 4) ??? { ??????? draftbox.innerHTML='草稿载入中...'; ??? } ??? if(xmlHttp.readyState == 4) ??? { ??????? if(xmlHttp.status == 200) ??????? { ??????????? draftbox.innerHTML=xmlHttp.responseText; ??????? } ??? } } function cleardraft() { ??? if(allowajax==1) ??? { ??????? var url="ajax.php?act=cleardraft"; ??????? makeSendData(null,'nodraft','POST'); ??? } } function nodraft() { ??? var draftbox=document.getElementById('draft'); ??? if(xmlHttp.readyState < 4) ??? { ??????? draftbox.innerHTML='载入中...'; ??? } ??? if(xmlHttp.readyState == 4) ??? { ??????? if(xmlHttp.status == 200) ??????? { ??????????? draftbox.innerHTML=xmlHttp.responseText; ??????? } ??? } } //encode string function postencode (str) {? ??? str=encodeURIComponent(str); ??? if (is_moz) str=str.replace(/%0A/g,"%0D%0A"); //from bob ??? return str; } 自动保存的js代码,代码如下:
代码如下:
var autosavetimer;
function autosavetime(sec) { ?? clearTimeout(autosavetimer); ?? document.getElementById('autosavetimebox').innerHTML=sec+"秒"; ?? if(sec>0) { ?????? autosavetimer = setTimeout("autosavetime("+sec+"-1)",1000); ?? }else { ?????? var blogtitle=document.getElementById('title'); ?????? if(blogtitle.value!=''){ ?????????? autosave_post(); ?????? }else{ ?????????? document.getElementById('autosavetimebox').innerHTML='不用保存';?? ?????? } ?? } } function startimer() { ??? var starttime=document.getElementById('autosavetimebox').innerHTML; ??? if(starttime=='保存成功,您可以在发生意外的时候载入草稿' || starttime=='您还没有添写信息,不用保存草稿') ??? { ??????? starttime='60'; ??? }else{ ??????? starttime=starttime.replace('秒',''); ??? } ??? var autosavefunbox=document.getElementById('autosavefunbox'); ??? autosavefunbox.innerHTML='<a href="javascript教程:" onClick="javascript:stoptimer()">停止计时</a>'; ??? starttime==0 ? starttime=60 : starttime=starttime; ??? autosavetime(starttime); } function stoptimer() { ??? var autosavefunbox=document.getElementById('autosavefunbox'); ??? autosavefunbox.innerHTML='<a href="javascript:" onClick="javascript:startimer()">开始计时</a>'; ??? clearTimeout(autosavetimer); } 希望本文所述对大家的php程序设计有所赞助. 《php+ajax实现文章自动保存的方法》是否对您有启发,欢迎查看更多与《php+ajax实现文章自动保存的方法》相关教程,学精学透。编程之家 52php.cn为您提供精彩教程。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |