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.

Select a User:

 

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>&nbsp;<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:

  1. Sets xmlDoc variable as an XML document, using the responseXML function
  2. 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);
header(‘Content-type: text/xml’);
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:

  1. Set the $q variable to the data sent in the q parameter
  2. Open a connection to a MySQL server
  3. The "user" with the specified id is found
  4. The data is outputted as an XML document