Processing the server response

In both examples on this Web page we use identical code for creating the XMLHttpRequest object and setting up the server request:

var xmlHttp;

function createXMLHttpRequest()
{
  if (window.ActiveXObject)
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  else if (window.XMLHttpRequest)
    xmlHttp = new XMLHttpRequest();
}

function sendRequest(url, handler)
{
  createXMLHttpRequest();
  xmlHttp.onreadystatechange = handler;
  xmlHttp.open("GET", url);
  xmlHttp.send(null);
}

The XMLHttpRequest object is created as explained above. The method sendRequest() takes as parameters the URL of the calling script and a pointer to the event handler. Both URL and event handler are specific for each of the examples below.

Processing the responseText string

By clicking the "Get text response" button one calls the sendRequest() method with the first parameter students.html being a half-completed HTML document. This document displays a table provided by the following event handler:

function handleStateChange1()     // handle a text response
{
  if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
  {
    var div = document.getElementById("response1");
    if (div.hasChildNodes())               // remove old text
      div.removeChild(div.childNodes[0]);
    div.innerHTML = xmlHttp.responseText;
  } 
}

Processing the responseXML object

By clicking the "Get XML object" button one calls the sendRequest() method with the first parameter employees.xml being a valid XML document. This document is parsed and displayed by the following event handler, most part of which was already explained before:

function handleStateChange2()     // handle returned XML object
{
  if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
  {
    var div = document.getElementById("response2");
    if (div.hasChildNodes())               // remove old text
      div.removeChild(div.childNodes[0]);
    var xmlDoc = xmlHttp.responseXML;

    var table = document.createElement("table");
    table.setAttribute("border", "1");
    table.setAttribute("cellpadding", 5);
    div.appendChild(table);

    var caption = "Data from employees.xml";
    table.createCaption().appendChild(document.createTextNode(caption));
    var header = table.createTHead();
    var headerRow = header.insertRow(0);
    headerRow.insertCell(0).appendChild(document.createTextNode("Name"));
    headerRow.insertCell(1).appendChild(document.createTextNode("Job"));
    headerRow.insertCell(2).appendChild(document.createTextNode("Salary"));

    var body = document.createElement("tbody");

    var employees = xmlDoc.getElementsByTagName("employee");
    for (var i=0; i<employees.length; i++)
    {
      var e = employees[i];
      var name = e.getAttribute("name");
      var job = e.getElementsByTagName("job")[0].firstChild.data;
      var salary = e.getElementsByTagName("salary")[0].firstChild.data;

      var row = body.insertRow(i);
      row.insertCell(0).appendChild(document.createTextNode(name));
      row.insertCell(1).appendChild(document.createTextNode(job));
      row.insertCell(2).appendChild(document.createTextNode(salary));
    }
    table.appendChild(body);
  }
}