Google has been facing criticism from some users for allowing articles that aren’t useful to appear prominently in search results. That has now changed, according to the company

It’s like if you or I morphed into fully functioning cyborgs after being thrown into a room of electronic scrap with nothing to eat.

If you aren’t already familiar with XML, the example below illustrates how easily the document can be interpreted by humans and machines.

<?xml version="1.0"?>
<music>
	<song>
		<title>Hooch</title>
		<artist>Melvins</artist>
		<album>Houdini</album>
	</song>
	<song>
		<title>Sixtyniner</title>
		<artist>Boards Of Canada</artist>
		<album>Twoism</album>
	</song>
</music>

PHP DOM Extension

Built in support for DOM parsing in PHP makes retrieving data and inserting it into an XML document fairly simple. The DOM functions available in PHP are much similar to those in Javascript. If you are already comfortable navigating the DOM in Javascript then this should be quite easy to pick up.

require('configure.php');
$table = 'demo_xml';
$query = "SELECT * FROM $table";
$result = mysql_query($query);

To begin, establish a database connection and retrieve all values within the specified database table.

$xmlDoc = new DomDocument('1.0');

With our data readily available, we can begin creating our XML document using version 1.0.

$root = $xmlDoc->createElement('music');

All XML documents require a root element and in this case, we are calling it “music”.

$root = $xmlDoc->appendChild($root);

Using the appendChildfunction, our new element will be written to the XML document.

while($row = mysql_fetch_assoc($result)) {

The while statement retrieves each row as an associative array with “name=value” pairs to make things easier later when looping through the data.

$rowContainer = $xmlDoc->createElement('song');
$rowContainer = $root->appendChild($rowContainer);

For each data pair, create a new row labeled “song” and write them to the XML document.

foreach ($row as $fieldName => $fieldValue) {
	$child = $xmlDoc->createElement($fieldName);
	$child = $rowContainer->appendChild($child);
	$value = $xmlDoc->createTextNode($fieldValue);
	$value = $child->appendChild($value);
}

For every row available, insert each field name and its value.

$xmlString = $xmlDoc->saveXML();
echo $xmlString;
$xmlDoc->save("songs.xml")

Completing the script, the XML document is saved as a string and when viewed in a browser the values will be displayed. Finally, save the the XML file as “songs.xml”.

In its entirety, the script below handles the complete output of the XML document.

<?php 

require('configure.php');
$table = 'demo_xml';
$query = "SELECT * FROM $table";
$result = mysql_query($query);

$xmlDoc = new DomDocument('1.0');
$root = $xmlDoc->createElement('music');
$root = $xmlDoc->appendChild($root);

while($row = mysql_fetch_assoc($result)) {
	$rowContainer = $xmlDoc->createElement('song');
  	$rowContainer = $root->appendChild($xmlDoc);

	foreach ($row as $fieldName => $fieldValue) {
		$child = $xmlDoc->createElement($fieldName);
		$child = $rowContainer->appendChild($child);
		$value = $xmlDoc->createTextNode($fieldValue);
	        $value = $child->appendChild($value);
	}
}

$xmlString = $xmlDoc->saveXML();
echo $xmlString;
$xmlDoc->save("songs.xml")

?>

Resources

• PHP DOM Extension
• W3C XML Specifications & Recommendations
• XML Usage

Released by Amon Tobin in 2005, this is the trip hop artist’s fifth album. It is a collection of songs taken from Tom Clancy’s Splinter Cell: Chaos Theory video game. I was never a fan of the video game series, but the production quality of the video deserves my respect.

The unique aspect of this album is that it is not a true soundtrack by definition. None of the songs off the album would be heard in the game, except in small fragments. Individual segments of each song are layered throughout the game that correspond to the actions of the player.

I must recommend this for fans of hip hop, electronica and house music.

• Check for empty fields
• Check for valid characters
• Check for duplicates

If everything is ‘ok’, submit the form.

Faced with a multi-field form, it would be great if our inputs were validated on the fly. That way, you could correct any errors before the form is submitted.

XMLHttpRequest object = AJAX

All data is stored in XMLHttpRequest object which is transferred between the browser and server. Before any data can be handled we need to create an instance of this object.

function ajaxInit() {
	// XMLHttpRequest object
	var ajaxRequest = false;

	try {
		// Supports IE7+, Firefox, Chrome, Opera, Safari
		ajaxRequest = new XMLHttpRequest();

	} catch (e) {

		try {
			// Supports IE6, IE5
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");

		} catch (e) {
			// Browser doesn't support XMLHttpRequest objects
			ajaxRequest = false;
			alert("Your browser does not support the AJAX methods!");
		}
	}
        return ajaxRequest
}

This function checks your browser for XMLHttpRequest support. If the browser doesn’t support the object, the function returns false and throws up an error message rendering AJAX capabilities useless.

Get Form Values

To pass data to our server, we will have to construct a function that creates the query sent to the server.

// Get form values
function checkFields(){
	document.getElementById('user-form').onkeyup = function(){
		var params = '';
		var username = document.getElementById("name");
		var action = "action=checkUsername";

		params += username.name;
		params += '=';
		params += username.value;
		params += "&";
		params += action;

		return sendData(params);
	}
}

The onkeyup event triggers the function and when complete, the variable params holds a string of names and values taken from the form. This data will then be passed to the sendData function.

Passing Data to the Server

Three critical components involved in this process include:

• onreadystatechange
• open
• send

Without those components functioning, no data could be passed to the server.

// Send form values to the server
function sendData(params){
	var request = ajaxInit();
	if(request){
		request.onreadystatechange = function(){
			handleData(request);
		}
		request.open("POST", "register.php", true);
		request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		request.send(params);
		return true;
	} else {
		return false;
	}
}

After our onreadystatechange function fires and sends a request to the server, we have to deal with handling the server’s response.

Processing the Server’s Response

The evalstatement executes the JSON formatted data sent from the server. All JSON values are now accessible as properties of the variable resp.

function handleData(request){
	if(request.readyState == 4 && request.status == 200){
		var resp = eval('('+request.responseText+')');
		var result = resp.ok;
		var msg = resp.msg;
		var placeholder = document.getElementById("validation");

		if(!result){
			placeholder.innerHTML = msg;
		} else {
			placeholder.innerHTML = msg;
		}

		return true
	} else {
		return false;
	}
}

The innerHTMLproperty then updates the HTML element with the data stored in the variable.

Load The Script

Finally, to extract the user’s input from the form field, the checkFieldsfunction needs to be loaded into the document when requested from the server.

window.onload = checkFields();

Resources

Check out the demo to see this script in action or download the files to use for yourself.

• Mozilla Development Center: AJAX
• W3Schools AJAX Tutorial
• Bulletproof AJAX by Jeremy Keith