Easy Ajax: A Case Study - Page 2

I used a bit of javascript and a separate internal web page written in PHP. That's it. In this case, I didn't even use any XML.

Javascript

var req;
function initPage() {
  kaTimer=setInterval(keepAlive, 1000);
}
function keepAlive() {
  var url = "/mt/keepalive.php?aid=<TMPL_VAR _
                  NAME=AUTHOR_ID>&eid=<TMPL_VAR NAME=ID>";
  if (window.XMLHttpRequest) {
    req = new XMLHttpRequest();
    req.onreadystatechange = processReqChange;
    req.open("GET", url, true);
    req.send(null);
  } else if (window.ActiveXObject) {
    req = new ActiveXObject("Microsoft.XMLHTTP");
    if(req){
      req.onreadystatechange = processReqChange;
      req.open("GET", url, true);
      req.send();
    }
  }
}
function processReqChange() {
  if(req.readyState==4){
    if(req.status==200){
      if(req.responseText=='OK'){
        document.getElementById('saveButton').style.visibility='visible';
        document.getElementById('ajaxConsole').innerHTML='';
        clearInterval(kaTimer);
        kaTimer=setInterval(keepAlive, 30000);
      }else{
        document.getElementById('ajaxConsole').innerHTML = 'LOCKED: ' + _
                  req.responseText;
        if(document.getElementById('ajaxConsole').innerHTML.substr(0,8) _
                  == 'LOCKED: ') {
          clearInterval(kaTimer);
        }
      }
    }else{
      alert('Problem: [' + req.status + '] ' + req.statusText);
      clearInterval(kaTimer);
    }
    req.onreadystatechange = new function(){};
  }
}
function activateEditing() {
  document.getElementById('saveButton').style.visibility='visible';
  document.getElementById('ajaxConsole').innerHTML='';
  clearInterval(kaTimer);
  kaTimer=setInterval(keepAlive, 30000);
}
window.onload=initPage();

With this code, I've set up three functions: initPage(), keepAlive(), and processReqChange(). Your own Ajax code will need functions very much like these. The window.onload=initPage(); starts the ball rolling.

First, let me paint a little picture of what the rest of this page looks like. It's an article-editing screen, with buttons to Save, Preview, and Publish. The ID for the Save button is "saveButton". Near the top of the screen I've added a div that looks like this:

<div id="ajaxConsole"><TMPL_UNLESS NAME="STATUS_DRAFT">Do not edit this article! Wait until this text either disappears or is replaced by a "locked" message.<br/>It shouldn't take more than a couple of seconds. If you do not have Javascript enabled, you will not be able to edit an article in 'Pending' or 'Publish' status.</TMPL_UNLESS></div>

The TMPL tags are interpreted by the publishing system so that this div doesn't exist when an article has never been saved. Clearly there can be only one author then!

When the page is first loading, that text will be visible. Once the window.onload event is triggered, however, the initPage() function should be called, which tells the browser to call the keepAlive function once per second.

Warning! The window.onload can be triggered before the page has actually finished loading, which can cause... oddness. It is for this reason that I set the function to be called at frequent intervals, so it will seem to complete as soon as the page has completed loading, rather than waiting until the next interval comes around.

Article Author: Phillip Winn

Phillip Winn was the Chief Geek for Blogcritics, and a blogger since 1995. He may currently be found and followed as @pwinn on Twitter.

Visit Phillip Winn's author page — Phillip Winn's Blog