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
Whether you're new to XML or already an advanced user,
the user-friendly views and powerful entry helpers,
wizards, and debuggers in XMLSpy are designed to meet your XML
and Web development needs from start to finish.
New features in Version 2010!
- XML editor
- Graphical XML Schema / DTD editors
- XSLT 1.0/2.0 editor, debugger, profiler
- XQuery editor, debugger, profiler
- XBRL validator, taxonomy editor, taxonomy wizard
- Support for Office Open XML (OOXML)
- Graphical WSDL 1.1/2.0 editor & SOAP debugger
- JSON editing & conversion
- Java, C#, C++ code generation
- And much more!
Download a free trial today!
|
|
|
|
