SacredZero

I headed into the wardrobe of XML and AJAX recently, in the never ending pursuit of dynamic Windows 7 gadgets. I set up an Apache server, threw in MySQL and PHP for good measure, and started playing around with fetching a table from a database for use in a Gadget, with a healthy mix of SQL, PHP, JavaScript, AJAX, and XML. I converted the data I pulled from the database into XML via PHP, so although I pointed the HTTP Request at a .php page, it was returning XML for me.

So far so good, this worked pretty much out of the box. My next step, and where the problems began to occur, was dealing in AJAX/JavaScript with an indeterminate amount of columns. The coding suggested on sites such as W3Schools looked untidy, and meant creating extra lines every time you added another column. I wanted to make it dynamic and free flowing, bouncing like a fawn across the moss covered slopes of a hill. I wanted to just add a pointer on the final output where the new column would sit for each additional column I created.

To accomplish this, I came up with the following code, after much blood and tears.

function getxml ()
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST",(_xml page_),"true");
xmlhttp.send();

xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
	var ajax_response_xml = xmlhttp.responseXML;
	var ajax_insert = "";
	var ajax_response_entry = ajax_response_xml.getElementsByTagName("entry");
	var ajax_response_elements = ajax_response_entry[0].childNodes.length;
	var ajax_response_elements_array = new Array();
	for (var i=0;i<ajax_response_elements;i++)
	{
		ajax_response_elements_array.push(ajax_response_entry[0].childNodes[i].nodeName);
	}
	var ajax_response_data_array = new Array();
	for (var i=0;i<ajax_response_entry.length;i++)
	{
		ajax_response_data_array[i] = new Array();
		for (var j=0;j<ajax_response_elements;j++)
		{
			ajax_response_data_array[i][ajax_response_elements_array[j]] = ajax_response_entry[i].getElementsByTagName(ajax_response_elements_array[j])[0].firstChild.nodeValue;
		}
		ajax_insert += ajax_response_data_array[i]["no"] + ": " + ajax_response_data_array[i]["message"] + "<br />";
	}
	return = ajax_insert;
}
}
}

This will convert an XML document/object into a multidimensional array, or in this case it was originally from a database, so the first dimension of the array is the record, the second dimension is “column name” => “value”. This probably isn’t the most efficient way of doing it, maybe it doesn’t even hold to pre-approved standards of coding, but I hope it is useful for someone.

The database I tested this with only had 2 columns, and here is the PHP I used to convert the database records into XML:

$xi_con = mysql_connect($xi_loc,$xi_user,$xi_pass);
if (!$xi_con)
{
	die('Could not connect: ' . mysql_error());
}
mysql_select_db($xi_db, $xi_con);
$xi_query = "SELECT * FROM tickets";
$xi_result = mysql_query($xi_query);
$xml_output = "<?xml version=\"1.0\"?>\n";
$xml_output .= "<entries>\n";
while ($xi_row = mysql_fetch_array($xi_result))
{
	$xml_output .= "\t<entry>\n";
	$xml_output .= "\t\t<no>" . $xi_row['id'] . "</no>\n";
	$xml_output .= "\t\t<message>" . $xi_row['message'] . "</message>\n";
	$xml_output .= "\t</entry>\n";
}
$xml_output .= "</entries>";
echo $xml_output;

I was more interested in the AJAX/JavaScript than the PHP, so this is obviously just a way to get the XML out there – I should really have used an iteration for the columns rather than explicitly creating a line for each. Never mind.