Ejemplo de responseXML con AJAX y PHP

AJAX se puede usar para devolver información de base de datos en formato XML.

Ejemplo de AJAX Database a XML (indicaciones de prueba: la función de este ejemplo no está implementada)

En el siguiente ejemplo AJAX, demostraremos cómo una página web puede leer información de una base de datos MySQL, convertir los datos en un documento XML y usar este documento en diferentes lugares para mostrar información.

Este ejemplo es muy similar al de la sección anterior "PHP AJAX Database", aunque hay una gran diferencia: en este caso, obtenemos datos en formato XML usando la función responseXML desde la página PHP.

Recibir un documento XML como respuesta nos permite actualizar múltiples ubicaciones en la página, no solo recibir una salida PHP y mostrarla.

En este ejemplo, utilizaremos la información recibida de la base de datos para actualizar varios elementos <span>.

Seleccione un nombre en la lista desplegable

Por favor, seleccione a un usuario:

　

Esta columna se compone de cuatro elementos:

  • Base de datos MySQL
  • Formulario HTML simple
  • JavaScript
  • Página PHP

Base de datos

La base de datos que se utilizará en este ejemplo se parece a esto:

id Nombre Apellido Edad Pueblo Nacimiento Trabajo
1 Peter Griffin 41 Quahog Cervecería
2 Lois Griffin 40 Newport Profesor de Piano
3 Joseph Swanson 39 Quahog Oficial de Policía
4 Glenn Quagmire 41 Quahog Pilot

Formulario HTML

El ejemplo anterior incluye un formulario HTML simple y un enlace a JavaScript:

<html>
<head>
<script src="responsexml.js"></script>
</head>
<body>
<form> 
Seleccione un Usuario:
<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>

Ejemplo de explicación - formulario HTML

  • El formulario HTML es una lista desplegable, con el valor de la propiedad name como "users" y las opciones corresponden al campo id de la base de datos
  • Bajo el formulario hay varios elementos <span>, que se utilizan como marcadores de posición para los diferentes valores que recibimos
  • Cuando el usuario selecciona una opción específica, se ejecuta la función "showUser()" y su ejecución se desencadena por el evento "onchange"

En otras palabras, cada vez que el usuario cambia el valor en la lista desplegable, la función showUser() se ejecuta y muestra los resultados en el elemento <span> especificado.

JavaScript

Este es el código JavaScript almacenado en el archivo "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 || xmlHttp.readyState=="complete")
{
 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()
 { 
 var objXMLHttp = null
 if (window.XMLHttpRequest)
  {
  objXMLHttp = new XMLHttpRequest()
  }
 else if (window.ActiveXObject)
  {
  objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP")
  }
 return objXMLHttp
 }

Ejemplo de explicación:

La función showUser() y GetXmlHttpObject junto con Ejemplo de base de datos MySQL con AJAX y PHP Los ejemplos en esta sección son los mismos. Puede consultar las explicaciones relacionadas.

La función stateChanged()

Si se selecciona un elemento en la lista desplegable, esta función ejecuta:

  1. Usando la función responseXML, define la variable "xmlDoc" como un documento XML
  2. Recupera los datos de este documento XML y colócalos en los elementos "span" correctos

Página PHP

Esta página del servidor llamada por JavaScript, es un archivo PHP simple llamado "responsexml.php".

Esta página está escrita en PHP y utiliza la base de datos MySQL.

El código ejecutará una consulta SQL contra la base de datos y devolverá los resultados en un documento XML:

<?php
header('Content-Type: text/xml');
header("Cache-Control: no-cache, must-revalidate");
//Una fecha en el pasado
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
$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);
?>

Ejemplo de explicación:

Ocurriera cuando la consulta se envíe desde JavaScript a la página PHP

  • El tipo de contenido del documento PHP se establece como "text/xml"
  • El documento PHP se establece como "no-cache" para evitar la caché
  • Establece la variable $q con los datos enviados por una página HTML
  • PHP abre la conexión con el servidor MySQL
  • Encontrar "user" con el id especificado
  • Exportar datos en documento XML