This article describes the method of Php+ajax to realize the automatic saving of articles. Share to everyone for your reference. The specific analysis is as follows:
Php+ajax article automatic saving method the main is to facilitate the user, improve the user experience, we are using AJAX data to save a temporary data, like CSDN, he can automatically save the user's data, so that is off the electricity, there are accidents you edit the data are not lost.
This is part of the core of automatically saving drafts,
Autosavetime (SEC) This function is used to start the timer.
Cleartimeout (Autosavetimer); Clear timer
document.getElementById (' Autosavetimebox '). innerhtml=sec+ "seconds"; get the Autosavetimebox image in the page and write the countdown to it
Copy Code code as follows:
if (sec>0) {
Autosavetimer = settimeout ("Autosavetime" ("+sec+"-1) ", 1000);
Here's what happens if, when Sec>0, the first second executes the Autosavetime function, and the Sec-1 value is written to the Autosavetimebox
}else {
var Title=document.getelementbyid (' title ');
if (title.value!= ') {
Autosave_post ();
}else{
document.getElementById (' Autosavetimebox '). Innerhtml= ' Do not save ';
}
}
This part, is when the sec>0 condition is not tenable, hehe, is sec<=0, starts to carry on the saving draft, first will decide the article title is empty, if not is empty, executes autosave_post () This function, otherwise writes ' does not save '.
The PHP code is as follows:
Copy Code code as follows:
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_o Pera) && (!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;
}
How to submit a form
Xmlhttp.open (Httptype, PostURL, true);
Triggers an event when a form submission completes
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,url, ' 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= ' You have not yet written information, do not save drafts ';
return false;
}
if (Autoresponse.indexof ("<autosave_ok>")!=-1)
{
Automessage.innerhtml= ' saved successfully, you can load the draft in case of accident;
Finddraft ();
}
}
}
}
function Finddraft ()
{
if (allowajax==1)
{
var url= "Ajax.php?act=loaddraft";
Makesenddata (Null,url, ' loaddraft ', ' POST ');
}
}
function Loaddraft ()
{
var Draftbox=document.getelementbyid (' draft ');
if (Xmlhttp.readystate < 4)
{
Draftbox.innerhtml= ' drafts loaded in ... ';
}
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,url, ' nodraft ', ' POST ');
}
}
function Nodraft ()
{
var Draftbox=document.getelementbyid (' draft ');
if (Xmlhttp.readystate < 4)
{
Draftbox.innerhtml= ' Loading ... ';
}
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;
}
Automatically save the JS code, the code is as follows:
Copy Code code as follows:
var Autosavetimer;
Function Autosavetime (sec) {
Cleartimeout (Autosavetimer);
document.getElementById (' Autosavetimebox '). innerhtml=sec+ "seconds";
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= ' Do not save ';
}
}
}
function Startimer ()
{
var Starttime=document.getelementbyid (' Autosavetimebox '). InnerHTML;
if (starttime== ' saved successfully, you can load the draft ' | | | starttime== ' You have not yet written information, do not save drafts ') in the event of an accident
{
Starttime= ' 60 ';
}else{
Starttime=starttime.replace (' seconds ', ');
}
var Autosavefunbox=document.getelementbyid (' Autosavefunbox ');
Autosavefunbox.innerhtml= ' <a href= JavaScript Tutorial: ' onclick= ' Javascript:stoptimer () ' > Stop timing </a> ';
Starttime==0? Starttime=60:starttime=starttime;
Autosavetime (starttime);
}
function Stoptimer ()
{
var Autosavefunbox=document.getelementbyid (' Autosavefunbox ');
Autosavefunbox.innerhtml= ' <a href= "javascript:" onclick= "Javascript:startimer ()" > Start timing </a> ';
Cleartimeout (Autosavetimer);
}
I hope this article will help you with your PHP program design.