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.
Read The Full Tutorial.
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:
01.<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
02.<people>
03.<person>
04.<firstname title="Mr">Steve</firstname>
05.<surname>Reynolds</surname>
06.</person>
07.<person>
08.<firstname title="Mr">David</firstname>
09.<surname>Grohl</surname>
10.</person>
11.</people>
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.
01.$query = "SELECT title,firstname,surname FROM people";
02.$result = mysql_query($query);
03.
04.$doc = new DomDocument('1.0');
05.
06.// create root node
07.$root = $doc->createElement('people');
08.$root = $doc->appendChild($root);
09.
10.while($array = mysql_fetch_array($result)) {
11.
12. // add node for each row
13. $occ = $doc->createElement('person');
14. $occ = $root->appendChild($occ);
15.
16. $child = $doc->createElement('firstname');
17. $child = $occ->appendChild($child);
18. $child->setAttribute('title', $array['title']);
19. $value = $doc->createTextNode($array['firstname']);
20. $value = $child->appendChild($value);
21.
22. $child = $doc->createElement('surname');
23. $child = $occ->appendChild($child);
24. $value = $doc->createTextNode($array['surname']);
25. $value = $child->appendChild($value);
26.
27.}
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:
1.$xml_string = $doc->saveXML();
2.
3.header('Content-Type: application/xml; charset=ISO-8859-1');
4.
5.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:
01.<html>
02.<head>
03.<title>The HTML</title>
04.<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
05.<script type="text/javascript" src="thejs.js"></script>
06.</head>
07.<body>
08.<div id="container"></div>
09.<input type="submit" id="getData" name="getData" value="Get Data!" />
10.</body>
11.</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:
01.$(document).ready(function() {
02.$("#getData").click(function(){
03.var data = "";
04.$.get("thephp.php", function(theXML){
05.$('person',theXML).each(function(i){
06.
07.var title = $(this).find("firstname").attr("title");
08.var firstname = $(this).find("firstname").text();
09.var surname = $(this).find("surname").text();
10.
11.data = data + title + " " + firstname + " " + surname + "<br>";
12.});
13.$("#container").html(data);
14.});
15.});
16.});
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 <firstname> and <surname> 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.
source: reynoldsftw
|
Ajax Projects
