Mar 12th, 2010

AJAX: The easy way.

There are a ton of guides for AJAX that involve getting & parsing XML data and then inserting that data into elements in an HTML page.  What you don’t hear about very often is that parsing out the XML isn’t really necessary.  The XMLHttpRequest returns a document.  If you just want the contents of that document in your page, then you can simply stick it in the page, without having to jump through XML parsing hoops.

The following functions use innerHTML with a standard AJAX call to make this happen.  Your content supplying page should just return a regular HTML chunk ( devoid of head, body, etc. ) that you want to supply to the div you’re placing it in.  Keep in mind that innerHTML is only supported on div’s in IE.

var d = window.document;

//////////////////////////////////////
//  GENERIC RETURN ELEMENT FUNCTION //
//////////////////////////////////////

function getE( v ) {
  var d = window.document;
  e = false;
  if ( d.getElementById ) {
    e = d.getElementById( v );
  }
  else if ( d.all ) {
    e = d.all[ v ];
  }
  return e;
}


/*
  AJAX BASE FUNCTIONALITY
*/

var xmlhttp = null;
var displayDiv = "";
var nextFunc = "";

////////////////////////////////
//  BASIC AJAX LOADER         //
////////////////////////////////

function getPage( url, second ) {

  if ( second != false ) nextFunc = second;
  else nextFunc = "";

  xmlhttp=null;
  if (window.XMLHttpRequest) {// code for all new browsers
    xmlhttp=new XMLHttpRequest();
  }
  else if (window.ActiveXObject) {// code for IE5 and IE6
    xmlhttp=new ActiveXObject( "Microsoft.XMLHTTP" );
  }
  if (xmlhttp!=null) {
    xmlhttp.onreadystatechange=stateChange;
    xmlhttp.open( "GET", url, true );
    xmlhttp.send( null );
  }
  else {
    alert( "Your browser does not support XMLHTTP." );
  }
}

////////////////////////////////
//  EVENT HANDLER FOR HTTP    //
//  STATE CHANGE              //
////////////////////////////////

function stateChange() {
  if (xmlhttp.readyState==4) {// 4 = "loaded"
    if (xmlhttp.status==200) {// 200 = OK
      e = getE( displayDiv );
      e.innerHTML = xmlhttp.responseText;
      if ( nextFunc != "" ) eval( nextFunc );
    }
    else {
      alert("Problem retrieving XML data");
    }
  }
}

function sampleCall( id ) {
  displayDiv = "myDiv";

  getPage( "myDetailPage.php?id=" + id );
}

1. Paste the previous code into your global JavaScript include.
2. Modify sampleCall() to suit.  In this case I’ve got a page ( same directory ) that outputs some item details for some id in the database.
3. Make your page, spit out data.
4. Lunch?

Assuming that your dataset exists, that you have the ability to create the detail page fairly quickly, etc.: the whole thing should take you a whopping 10 min’s.  Most of the work tends to be writing the CSS for it in my experience.

N.B. - Observant readers may notice "var nextFunc".  If you examine the AJAX functions ( getPage and stateChange ) closely, you’ll see that this allows you to daisy-chain AJAX calls, actually pretty endlessly.  It gets a little mind-bending when you get above 3 in a row, but it works.  I’ve also had to do it in a way that uses shift() and unshift() on an array to make it a little easier for very complicated / long sets of operations.

The issue is that if you tried to do the following:

getPage( "first.php" );
getPage( "second.php" );

the second call would cancel out the first one before the request finishes.  It took me some amount of cursing to come up with the fix for it.  So instead you have to make the second call fire when stateChange() wraps up its business.