PHP Example - responseXML

Basically responseText returns the HTTP response as a string but responseXML returns the response as XML.

The following example will explain how a web page can fetch information from a database with AJAX technology. The selected data from the database will be converted to an XML document, and then we will use the DOM to extract the values to be displayed. In this example we get the data from the PHP page as XML, with the responseXML function.

<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">Sandeep</option>

<option value="2">Anusmita</option>

<option value="3">Suman</option>

<option value="4">Goldee</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> 
__________________________________________
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;

}
____________________________________________
responsexml.php
<?php

$q=$_GET["q"];



$con = mysql_connect('localhost', 'root', 'root');

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);

?>