PHP Example - responseXML
responseText returns the HTTP response as a string.
responseXML returns the response as XML.
AJAX ResponseXML example
The ResponseXML property returns an XML document object, which can be examined and parsed using
the DOM.
The following example will demonstrate how a web page can fetch information from a database with AJAX technology. The selected data from the
database will this time be converted to an XML document, and then we will use the DOM to extract the values to be displayed.
This example might look equal to the "PHP AJAX and MySQL" example in the
previous
chapter. However, there is a big difference: this time we get the data from
the PHP page as XML, with the responseXML function.
Receiving the response as an XML document allows us to update this page several places, instead
of just receiving an HTML output, and displaying it.
In this example we will update several <span> elements with the information
we receive from the database.
Example explained - The MySQL Database
The database table we use in this example looks like this:
| id |
FirstName |
LastName |
Age |
Hometown |
Job |
| 1 |
Peter |
Griffin |
41 |
Quahog |
Brewery |
| 2 |
Lois |
Griffin |
40 |
Newport |
Piano Teacher |
| 3 |
Joseph |
Swanson |
39 |
Quahog |
Police Officer |
| 4 |
Glenn |
Quagmire |
41 |
Quahog |
Pilot |
Example explained - The HTML page
The HTML page contains a link to an external JavaScript, an HTML form, and
several <span> elements:
<html>
<head>
<script type="text/javascript" src="responsexml.js"></script>
</head>
<body>
<form>
Select a User:
<select name="users" onchange="showUser(this.value)">
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form>
<h2><span id="firstname"></span> <span id="lastname"></span></h2>
<span id="job"></span>
<div style="text-align: right">
<span id="age_text"></span>
<span id="age"></span>
<span id="hometown_text"></span>
<span id="hometown"></span>
</div>
</body>
</html>
|
- The HTML form contains a drop-down box called
"users", with id and names from the database table, as options
- The <span> elements are placeholders for the values we will receive
- When a user is selected, a function called "showUser()" is executed
(triggered by the "onchange" event)
In other
words: Each time a user changes the value in the drop-down box, the function showUser() is called, and outputs the result in the <span> elements.
Example explained - The JavaScript code
This is the JavaScript code stored in the file "responsexml.js":
var xmlhttp;
function showUser(str)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var url="responsexml.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
function stateChanged()
{
if (xmlhttp.readyState==4)
{
xmlDoc=xmlhttp.responseXML;
document.getElementById("firstname").innerHTML=
xmlDoc.getElementsByTagName("firstname")[0].childNodes[0].nodeValue;
document.getElementById("lastname").innerHTML=
xmlDoc.getElementsByTagName("lastname")[0].childNodes[0].nodeValue;
document.getElementById("job").innerHTML=
xmlDoc.getElementsByTagName("job")[0].childNodes[0].nodeValue;
document.getElementById("age_text").innerHTML="Age: ";
document.getElementById("age").innerHTML=
xmlDoc.getElementsByTagName("age")[0].childNodes[0].nodeValue;
document.getElementById("hometown_text").innerHTML="<br/>From: ";
document.getElementById("hometown").innerHTML=
xmlDoc.getElementsByTagName("hometown")[0].childNodes[0].nodeValue;
}
}
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
} |
The showUser() and GetXmlHttpObject functions are the same as in the
PHP AJAX and MySQL chapter, you can go to
there for an explanation of those.
The stateChanged() Function
When an option in the drop-down box is selected, the function
executes the following:
- Sets xmlDoc variable as an XML document, using the responseXML function
- Retrieves data from the XML document, and place it in the correct <span>
element
Example explained - The PHP Page
The PHP page called by the JavaScript, is called
"responsexml.php".
The PHP script runs an SQL query against a MySQL database, and returns the result
an XML document:
<?php
$q=$_GET["q"];
$con = mysql_connect('localhost', 'peter', 'abc123');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("ajax_demo", $con);
$sql="SELECT * FROM user WHERE id = ".$q."";
$result = mysql_query($sql);
echo '<?xml version="1.0" encoding="ISO-8859-1"?>
<person>';
while($row = mysql_fetch_array($result))
{
echo "<firstname>" . $row['FirstName'] . "</firstname>";
echo "<lastname>" . $row['LastName'] . "</lastname>";
echo "<age>" . $row['Age'] . "</age>";
echo "<hometown>" . $row['Hometown'] . "</hometown>";
echo "<job>" . $row['Job'] . "</job>";
}
echo "</person>";
mysql_close($con);
?>
|
When the query is sent from the JavaScript to the PHP page, the following
happens:
- Set the $q variable to the data sent in the q parameter
- Open a connection to a MySQL server
- The "user" with the specified id is found
- The data is outputted as an XML document
Need an easy way to get data into XML, or transform XML to another format?
MapForce lets you map XML data to/from any combination of XML, database, flat file, Excel 2007, XBRL, or Web services data.
Then it transforms data instantly or auto-generates royalty-free data integration code for recurrent conversions.
New features in Version 2010!
Download a free, fully functional 30-day trial to experience the following features:
- Easy-to-use, graphical data mapping interface
- Instant data transformation
- XSLT 1.0/2.0 and XQuery code generation
- Java, C#, and C++ code generation
- Advanced data processing functions
- Support for all major relational databases including SQL Server, IBM DB2, Oracle, and more
- Visual Studio & Eclipse integration
Download a fully-functional trial today!
|
|
|
|
