Page 05: Creating AJAX-functionality

The AJAX-functionality is what makes this CMS interesting. Instead of reloading the whole page for every action we take while maintaining the database, we will simply create small chunks of code that will be loaded into the DIVs we created in the previous page. This way we get a nice overview of the whole CMS as well as minimizing the loading times. To make all this work we need to create some AJAX-functions. And that's what we're about to do in this page.

js/ajax.js

This file contains all functions that are essential to get the AJAX-functionality to work. To do this we need to create three functions. Let's get started with the first one.

Creating global variables

The following two variables need to be global, otherwise the functions can't share them:

var xmlHttp;
var area;

Global variables will be shown in green while local variable will be shown in red in JavaScript code. (yellow-ish background)

GetXmlHttpObject()

The purpose of this function is to create the XMLHttpRequest()-object and store it into the variable xmlHttp. Today, since IE7, there is no problem on this front since all browser supports the same function. However, IE6 and earlier had different ways of creating that object, and that's when this function comes in. It checks what browser you use by testing if certain functions exists. Depending on your browser it will solve the problem differently. In the end the result should be the same: a fully functional XMLHttpRequest()-object, ready to use.

function GetXmlHttpObject() {
  var xmlHttp = null;

  try {
    xmlHttp = new XMLHttpRequest();
  } catch (e) {
    try {
      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
  return xmlHttp;
}

Enter this code into the ajax.js-file and let's get going with the next function:

stateChanged()

This is the function that makes the output to the page. Once the readyState-property of the XMLHttpRequest()-object (stored in the xmlHttp-variable) reaches 4, which means that the page is fully loaded and complete, the function outputs the page into the DIV of choice, represented here by the area-variable.

function stateChanged() {
  if (xmlHttp.readyState==4) {
    document.getElementById(area).innerHTML = xmlHttp.responseText;
  }
}

updatePage()

Finally the function that should be called whenever you click a link. This function takes three passed values which are all required to make it work. Passed-in variables will be displayed in blue color within all code samples.

function updatePage(PAGE,AREA,QUERY) {
  xmlHttp = GetXmlHttpObject();

  if (xmlHttp==null) { alert ("Your browser does not support AJAX!"); return; }

  if (AREA != "0") {
    for (var i=4; i >= AREA; i--) {
      document.getElementById("flap_num" + i).style.display = "none";
      document.getElementById("flap_num" + i).innerHTML = ""; 
    }
  }

  area = "flap_num" + AREA;

  var url = "cms/" + PAGE + ".php?sid=" + Math.random() + QUERY;

  xmlHttp.onreadystatechange = stateChanged;
  xmlHttp.open("GET",url,true);
  xmlHttp.send(null);
 
  document.getElementById(area).style.display = "block";
}

Let's walk through this code chunk by chunk:

Eager to click those links we created at the previous page? In that case we need to create those code chunks that will be called by the function. Now you will only get a "Not Found on this Server"-notice. But by all means, try it out!

Next Up: Building our first code chunks

<<-- INDEX
<<-- PAGE 04 PAGE 06 -->>