这篇文章主要介绍了php+ajax实现文章自动保存的方法,可实现文章内容的实时保存,防止突发情况下的数据丢失,是非常实用的技巧,需要的朋友可以参考下

本文实例讲述了php+ajax实现文章自动保存的方法。分享给大家供大家参考。具体分析如下：

php+ajax文章自动保存的方法主是要方便用户,提高用户体验,我们就是用ajax把数据保存一个临时数据,像csdn一样,他可以自动保存用户的数据,这样就是掉电,出现意外你编辑的数据都不人被丢失.

这是自动保存草稿的核心的一部分,

autosavetime(sec)　这个函数是用来开始计时的

clearTimeout(autosavetimer);清除定时器

document.getElementById('autosavetimebox').innerHTML=sec+"秒";取得页面中的autosavetimebox对像,并向其写入倒计时，代码如下:

1. if(sec>0) { 
2.        autosavetimer = setTimeout("autosavetime("+sec+"-1)",1000);　　 
3.      //这里就是如果当sec>0的时候，第一秒执行一次autosavetime这个函数，同时会把sec-1的值写入autosavetimebox中 
4. }else { 
5.           var title=document.getElementById('title'); 
6.           if(title.value!=''){ 
7.                                   autosave_post(); 
8.           }else{ 
9.                  document.getElementById('autosavetimebox').innerHTML='不用保存';    
10.           } 
11. } 

这一部分,就是当sec>0的条件不成立,呵呵,就是sec<=0的时候,开始执行保存草稿,首先会判断文章的标题是否为空,如果不会为空,就执行autosave_post()这个函数,否则就写入‘不用保存'.

php代码如下:

1. var userAgent = navigator.userAgent.toLowerCase(); 
2. var is_opera  = (userAgent.indexOf('opera') != -1); 
3. var is_saf    = ((userAgent.indexOf('applewebkit') != -1) || (navigator.vendor == 'Apple Computer, Inc.')); 
4. var is_webtv  = (userAgent.indexOf('webtv') != -1); 
5. var is_ie     = ((userAgent.indexOf('msie') != -1) && (!is_opera) && (!is_saf) && (!is_webtv)); 
6. var is_ie4    = ((is_ie) && (userAgent.indexOf('msie 4.') != -1)); 
7. var is_moz    = ((navigator.product == 'Gecko') && (!is_saf)); 
8. var is_kon    = (userAgent.indexOf('konqueror') != -1); 
9. var is_ns     = ((userAgent.indexOf('compatible') == -1) && (userAgent.indexOf('mozilla') != -1) && (!is_opera) && (!is_webtv) && (!is_saf)); 
10. var is_ns4    = ((is_ns) && (parseInt(navigator.appVersion) == 4)); 
11. var is_mac    = (userAgent.indexOf('mac') != -1); 
12. if ((is_ie & !is_ie4) || is_moz || is_saf || is_opera) 
13. { 
14.     var allowajax=1; 
15. }else{ 
16.     var allowajax=0; 
17. } 
18. var xmlHttp = false; 
19. function makeSendData(postData,url,functionName,httptype) { 
20.  
21. var posturl=url; 
22. try { 
23.    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); 
24. } catch (e) { 
25.    try { 
26.      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
27.    } catch (e2) { 
28.      xmlHttp = false; 
29.    } 
30. } 
31. if (!xmlHttp && typeof XMLHttpRequest != 'undefined') { 
32.    xmlHttp = new XMLHttpRequest(); 
33. } 
34.  
35. if (!xmlHttp) { 
36.         alert('Cannot send an XMLHTTP request'); 
37.         return false; 
38. } 
39.  
40. // 提交表单的方式 
41. xmlHttp.open(httptype, posturl, true); 
42.  
43. // 当表单提交完成后触发一个事件 
44. var changefunc="xmlHttp.onreadystatechange = "+functionName;  ///////from bob 
45. eval (changefunc); 
46. xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');  
47. xmlHttp.send(postData); 
48. } 
49. function autosave_post() 
50. { 
51.     var title=document.getElementById('title').value; 
52.     var content = window.frames["Editor"].window.frames["HtmlEditor"].document.getElementsByTagName("BODY")[0].innerHTML; 
53.     var postTime=document.getElementById('postTime').value; 
54.     if(allowajax==1) 
55.     { 
56.         content=postencode(content); 
57.         title=postencode(title); 
58.         var post="title="+title+"&content="+content+"&postTime="+postTime+""; 
59.         var url="ajax.php?act=autosave"; 
60.         makeSendData(post,url,'autosave','POST'); 
61.     } 
62. } 
63. function autosave() 
64. { 
65.     if(xmlHttp.readyState == 4) 
66.     { 
67.         if(xmlHttp.status == 200) 
68.         { 
69.             var autoresponse=xmlHttp.responseText; 
70.             var automessage=document.getElementById('autosavetimebox'); 
71.             if(autoresponse.indexOf("<autosave_error>")!=-1) 
72.             { 
73.                 automessage.innerHTML='您还没有添写信息，不用保存草稿'; 
74.                 return false; 
75.             } 
76.             if(autoresponse.indexOf("<autosave_ok>")!=-1) 
77.             { 
78.                 automessage.innerHTML='保存成功，您可以在发生意外的时候载入草稿'; 
79.                 finddraft(); 
80.             } 
81.         } 
82.     } 
83. } 
84. function finddraft() 
85. { 
86.     if(allowajax==1) 
87.     { 
88.         var url="ajax.php?act=loaddraft"; 
89.         makeSendData(null,url,'loaddraft','POST'); 
90.     } 
91. } 
92. function loaddraft() 
93. { 
94.     var draftbox=document.getElementById('draft'); 
95.     if(xmlHttp.readyState < 4) 
96.     { 
97.         draftbox.innerHTML='草稿载入中...'; 
98.     } 
99.     if(xmlHttp.readyState == 4) 
100.     { 
101.         if(xmlHttp.status == 200) 
102.         { 
103.             draftbox.innerHTML=xmlHttp.responseText; 
104.         } 
105.     } 
106. } 
107. function cleardraft() 
108. { 
109.     if(allowajax==1) 
110.     { 
111.         var url="ajax.php?act=cleardraft"; 
112.         makeSendData(null,url,'nodraft','POST'); 
113.     } 
114. } 
115. function nodraft() 
116. { 
117.     var draftbox=document.getElementById('draft'); 
118.     if(xmlHttp.readyState < 4) 
119.     { 
120.         draftbox.innerHTML='载入中...'; 
121.     } 
122.     if(xmlHttp.readyState == 4) 
123.     { 
124.         if(xmlHttp.status == 200) 
125.         { 
126.             draftbox.innerHTML=xmlHttp.responseText; 
127.         } 
128.     } 
129. } 
130. //encode string 
131. function postencode (str) {  
132.     str=encodeURIComponent(str); 
133.     if (is_moz) str=str.replace(/%0A/g, "%0D%0A"); //from bob 
134.     return str; 
135. } 

自动保存的js代码,代码如下:

1. var autosavetimer; 
2. function autosavetime(sec) { 
3.    clearTimeout(autosavetimer); 
4.    document.getElementById('autosavetimebox').innerHTML=sec+"秒"; 
5.    if(sec>0) { 
6.        autosavetimer = setTimeout("autosavetime("+sec+"-1)",1000); 
7.    }else { 
8.        var blogtitle=document.getElementById('title'); 
9.        if(blogtitle.value!=''){ 
10.            autosave_post(); 
11.        }else{ 
12.            document.getElementById('autosavetimebox').innerHTML='不用保存';   
13.        } 
14.    } 
15. } 
16. function startimer() 
17. { 
18.     var starttime=document.getElementById('autosavetimebox').innerHTML; 
19.     if(starttime=='保存成功，您可以在发生意外的时候载入草稿' || starttime=='您还没有添写信息，不用保存草稿') 
20.     { 
21.         starttime='60'; 
22.     }else{ 
23.         starttime=starttime.replace('秒',''); 
24.     } 
25.     var autosavefunbox=document.getElementById('autosavefunbox'); 
26.     autosavefunbox.innerHTML='<a href="javascript教程:" onClick="javascript：stoptimer()">停止计时</a>'; 
27.     starttime==0 ? starttime=60 : starttime=starttime; 
28.     autosavetime(starttime); 
29. } 
30. function stoptimer() 
31. { 
32.     var autosavefunbox=document.getElementById('autosavefunbox'); 
33.     autosavefunbox.innerHTML='<a href="javascript：" onClick="javascript：startimer()">开始计时</a>'; 
34.     clearTimeout(autosavetimer); 
35. }

Tags: php+ajax php自动保存

分享到：