Steve Reynolds Blog » XML

From MySQL to jQuery, via PHP, XML & Ajax

Steve Reynolds — Wed, 16 Sep 2009 15:53:49 +0000

Back in the early part of this year I posted an article around how to get MySQL data out of the database and into a web page via jQuery and Ajax. The tutorial was okay, but I made some rookie mistakes – specifically around the creation of XML data with PHP – This time, I hope to rectify that!

So this article will focus on getting data from a database using PHP, converting that to an XML document, and reading that XML in through jQuery via Ajax calls. Seems complex, but is in fact, very easy.

Database Design

This tutorial assumes you know how to connect to your database. It also assumes that you have a table setup called “people” with 3 columns: “title”, “firstname” and “surname”. Please enter some data into this table as it will be required.

The XML structure

So, the point of this tutorial is to read some XML with an Ajax call from jQuery, therefore we need to structure our data correctly. Here is an example of the structure our XML document will generate:




Steve
Reynolds


David
Grohl

I won’t go into anymore details other than that is what our PHP script will generate for us for each row entry in the database.

The PHP

First up, we’ll get the data from the database, and then iterate through each row result to generate the XML for that particular entry. We’ll do that by using the PHP function DOMDocument() which creates an XML document for us, and also allows us to add nodes and children to the XML on the fly.

$query = "SELECT title,firstname,surname FROM people";
$result = mysql_query($query);

$doc = new DomDocument('1.0');

// create root node
$root = $doc->createElement('people');
$root = $doc->appendChild($root);

while($array = mysql_fetch_array($result)) {

	// add node for each row
	$occ = $doc->createElement('person');
	$occ = $root->appendChild($occ);

	$child = $doc->createElement('firstname');
	$child = $occ->appendChild($child);
	$child->setAttribute('title', $array['title']);
	$value = $doc->createTextNode($array['firstname']);
	$value = $child->appendChild($value);

	$child = $doc->createElement('surname');
	$child = $occ->appendChild($child);
	$value = $doc->createTextNode($array['surname']);
	$value = $child->appendChild($value);

}

Next up we need to form that into an XML file. The way we do this is tell the PHP file to save the XML document with the saveXML() function, get the PHP script to respond with an XML type header, therefore anything that is echoed out will be interpreted by the browser as XML. So after the code above, add this:

$xml_string = $doc->saveXML();

header('Content-Type: application/xml; charset=ISO-8859-1');

echo $xml_string;

So, the header part tells the browser that this is an XML content type, and the rest is simply echoing out the XML data structure as mentioned previously.

Hopefully now, when you run that PHP script you should return a valid XML document…

Ajax with jQuery

The last piece to this puzzle is getting that XML data into an HTML page using jQuery and ajax. Again, it’s pretty easy to do, here is the basic HTML structure I am using for this tutorial:



The HTML

You need to obviously include the jQuery library, I am also including an external javascript file for our jQuery code. So go ahead and create a javascript file called thejs.js and put the code below into it:

$(document).ready(function() {
$("#getData").click(function(){
var data = "";
$.get("thephp.php", function(theXML){
$('person',theXML).each(function(i){

var title = $(this).find("firstname").attr("title");
var firstname = $(this).find("firstname").text();
var surname = $(this).find("surname").text();

data = data + title + " " + firstname + " " + surname + "
";
});
$("#container").html(data);
});
});
});

So this code is firstly wiring up a click event on a button, and then making a GET Ajax call to the PHP script we made earlier. Once it receives some XML data it iterates through each “person” node.

Notice, I am returning two different data sources from the XML, the data in between the and tags, as well as also returning the data for an XML node attribute, in this case “title”. This doesn’t really make much sense in this context, but what it does show you is how you can access attribute information with the function.

Download

So that’s it! You can see a working demo of this here. Download all the sourcecode by clicking the box icon on the left hand side. The code is fully working, you just need to add your database connection code to the PHP script. Feel free to leave feedback and comments in the section below!

Tools to help you learn…

Learning jQuery 1.3	PHP MySQL Development	jQuery UI 1.6

Tutorial: From PHP to XML to jQuery and Ajax

Steve Reynolds — Wed, 11 Mar 2009 13:03:31 +0000

Please Note: This article has been updated and reposted here

Back To Basics

So this is the first of many new tutorials I hope to provide under the new banner of “Back to Basics”. I hope to be able to provide high level tutorials to the beginner enabling you to take away key learning to build on, rather than give you everything in depth on a plate. I hope you find this insightful.

So today’s article will focus on getting data from a database using PHP, converting that to an XML document, and reading that XML in through jQuery via Ajax calls. Seems complex, but is in fact, very easy.

Database Design

The XML structure




Steve
Reynolds


David
Grohl

I won’t go into anymore details other than that is what our PHP script will generate for us for each row entry in the database.

The PHP

First up, we’ll get the data from the database, and then iterate through each row result to generate the XML for that particular entry. We’ll do that by creating a data variable and appending the new XML to it which we will use later. I have not included the database connection part to this, you need to do that part yourself.

$query = "SELECT title,firstname,surname FROM people";
$result = mysql_query($query);

$xml = "";

while($array = mysql_fetch_array($result)) {

$title = $array['title'];
$firstname = $array['firstname'];
$surname = $array['surname'];

$xml .= "";
$xml .= "$firstname";
$xml .= "$surname";
$xml .= "";

}

Next up we need to form that into an XML file. The way we do this is tell the PHP file to respond with an XML type header, therefore anything that is echoed out will be interpreted by the browser as XML. So after the code above, add this:

header('Content-Type: application/xml; charset=ISO-8859-1');
echo "";
echo "";
echo $xml;
echo "";

So, the header part tells the browser that this is an XML content type, and the rest is simply echoing out the XML data structure as mentioned previously.

Hopefully now, when you run that PHP script you should return a valid XML document…

Ajax with jQuery

The last piece to this puzzle is getting that XML data into an HTML page using jQuery and ajax. Again, it’s pretty easy to do, here is the basic HTML structure I am using for this tutorial:



The HTML

$(document).ready(function() {
$("#getData").click(function(){
var data = "";
$.get("thephp.php", function(theXML){
$('person',theXML).each(function(i){

var title = $(this).find("firstname").attr("title");
var firstname = $(this).find("firstname").text();
var surname = $(this).find("surname").text();

data = data + title + " " + firstname + " " + surname + "
";
});
$("#container").html(data);
});
});
});

Download

Tools to help you learn…

Learning jQuery 1.3	PHP MySQL Development	jQuery UI 1.6