Parsing AJAX Responses with JavaScript and the innerHTML Property

In order to demonstrate how to parse web server responses via the popular "responseText" property of AJAX, I'm first going to define a short JavaScript function. It will be tasked with sending HTTP requests via an XML HTTP Request object to a specified URL on the server.

Having said that, here's the complete definition for this brand new function:

function sendHttpRequest(url,callbackFunc,respXml){

var xmlobj=null;

try{

  xmlobj=new XMLHttpRequest();

}

catch(e){

  try{

    xmlobj=new ActiveXObject("Microsoft.XMLHTTP");

}

catch(e){

  alert('AJAX is not supported by your browser!');

   return false;

  }

 }

xmlobj.onreadystatechange=function(){

  if(xmlobj.readyState==4){

  if(xmlobj.status==200){

respXml?eval(callbackFunc+'(xmlobj.responseXML)'):eval
(callbackFunc+'(xmlobj.responseText)');

  }

 }

}

// open socket connection

  xmlobj.open('GET',url,true);

// send http header

xmlobj.setRequestHeader('Content-Type','plain/text; charset=UTF-
8');

// send http request

  xmlobj.send(null);

 }

The signature that corresponds to the above function should be familiar to you, since I already used in some of my previous articles on AJAX. As you can see, the prior "sendHttpRequest()" JavaScript function accepts a few straightforward input arguments, such as the name of the file to fetch on the server, and then the name of the callback function that will be invoked when the request has been successfully triggered, and finally a Boolean flag that indicates whether or not the respective server response should be evaluated as XML. Quite simple to grasp, right?

Okay, so I built a JavaScript function that's capable of performing an HTTP request to a given web server. What's next? Good question. Assuming that you had no major problems understanding how the previous JavaScript function works, it's time to develop a basic hands-on example. In this example, some database records, previously fetched from a sample MySQL table via AJAX, will be parsed properly in the client by using the "innerHTML" JavaScript property.

To see how this example will be created, click on the link below and keep reading.