The Key to Everything…

TheHolyScriptures.info uses the “AJAX” technique on the client side (xhtml, CSS, JavaScript) to communicate with the server side (PHP, MySQL) and is the key to everything that allows the page to interact with the database. The communication occurs by using the XMLHttpRequest object. Here is the function I use to create my XMLHttpRequest object:

function getNewXMLHttpRequest() {
  var Obj = false;
  try {
    // For Firefox, Safari, Chrome, Opera, IE7+
    Obj = new XMLHttpRequest();
  } catch (trymicrosoft) {
    try {
      Obj = new ActiveXObject('Msxml2.XMLHTTP');
    } catch (othermicrosoft) {
      try {
        Obj = new ActiveXObject('Microsoft.XMLHTTP');
      } catch (failed) {
        try {
          AJAX = window.createRequest();
        } catch (e) {
          Obj = false;
          alert('XMLHttpRequest Error! Your Browser is incompatible.');
        }
      }
    }
  }
  return Obj;
}

… and below is an example of actual usage – in this case a POST (update) to the server. If I tried to do this by tacking my params onto the url and using a GET, my commentaryText variable would be limited in size to about 4k and would get truncated. So I always use a POST when writing to the server and a GET when reading from the server, just like the names imply. Reasons for always doing it this way include: consistency, security with POST writes, no size limitations with POST writes, and client side caching with GET reads.

if (!AJAX) AJAX = getNewXMLHttpRequest();
var url = "PHP/SaveComment.php";
var params = "id=" + CVERSEID + "&type=" + CTYPE + "&name=" + CNAME;
params += "&cmd=" + sqlCommand + "&comment=" + commentaryText;
AJAX.open('POST', url, true);
AJAX.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
AJAX.setRequestHeader("Content-length", params.length);
AJAX.onreadystatechange = function() { ReShowCommentary(myCommands); };
AJAX.send(params);

For completeness a GET example is shown below. The GET is actually a bit simpler than the POST. Not much code really. Note that the param’s are part of the url. Also the callback routine (populateDisplay) is specified with no arguments, but just because it’s not needed in this case.

 if (!AJAX) AJAX = getNewXMLHttpRequest();
 var url = 'PHP/Lookup_XML.php?vol=' + escape(volume) + "&book=" + escape(book);
 AJAX.open('GET', url, true);
 AJAX.onreadystatechange = populateDisplay;
 AJAX.send(null);

The last AJAX step is to actually receive data. This involves a little dance step in the callback routine looking for the right events before proceeding. We just have to wait for the right readyState and status before grabbing the data string from AJAX.responseText

function populateDisplay() {
  if (AJAX.readyState == 4) {
    if (AJAX.status == 200) {
      var myXML = XMLparse(AJAX.responseText);
      // put code here to use the XML document
    }
  }
}

Well, to be complete I guess I should go a little further with this. The data is coming back as a XML string but it must be defined as such if we’re going to use it. The responseText is just a string. It could be any type of string but passing XML around makes a heck of a lot of sense if responseText contains anything complicated at all. In the case of scripture data there are volumes, books, chapters, verses – each with meta-data so using XML is a no brainer. By using XML we have a larger string being passed in but the increased size of the string is not a good reason to avoid XML. If the data string is small, then a few extra XML tags just aren’t significant and if the data string is large then the XML tags are just a small percentage of the total size but all the more important. The meta-data is never a waste and is always used or I wouldn’t be sending it.

function XMLparse(text) {
  if (typeof DOMParser != "undefined") {
    // Mozilla, Firefox, and related browsers
    return (new DOMParser()).parseFromString(text, "application/xml");
  } else if (typeof ActiveXObject != "undefined") {
    // Internet Explorer.
    var doc = XMLnewDocument( );    // Create an empty document
    doc.loadXML(text);              // Parse text into it
    return doc;                     // Return it
  }
}

Well, that’s it for the AJAX I use in JavaScript. In others posts, I’ll discuss the PHP server side of this AJAX communication and also how I access and use the client side XML.

Leave a Reply

Your email address will not be published. Required fields are marked *