Ejemplo de AJAX y XML en PHP

AJAX puede interactuar de manera interactiva con archivos XML.

Ejemplo AJAX XML

En el siguiente ejemplo AJAX, demostraremos cómo una página web utiliza la tecnología AJAX para leer información de un archivo XML.

Seleccione un CD de la lista siguiente

Se enumeran aquí las informaciónes del CD.

Este ejemplo incluye tres páginas:

  • Un formulario HTML simple
  • Un archivo XML
  • Un archivo JavaScript
  • Una página PHP

Formulario HTML

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

<html>
<head>
<script src="selectcd.js"></script>
</head>
<body>
<form> 
Seleccione un CD:
<select name="cds" onchange="showCD(this.value)">
<option value="Bob Dylan">Bob Dylan</option>
<option value="Bee Gees">Bee Gees</option>
<option value="Cat Stevens">Cat Stevens</option>
</select>
</form>
<p>
<div id="txtHint"><b>La información de CD se listará aquí.</b></div>
</p>
</body>
</html>

Ejemplo de explicación:

Como puede ver, es simplemente un formulario HTML simple, que contiene una lista desplegable llamada "cds".

El párrafo debajo del formulario contiene un div llamado "txtHint".. Este div se utiliza como marcador de posición para los datos obtenidos del servidor web.

Cuando el usuario selecciona los datos, se ejecuta la función llamada "showCD".. Esta ejecución es desencadenada por el evento "onchange".

En otras palabras, cada vez que el usuario cambia el valor de la lista desplegable, se llama a la función showCD.

El archivo XML

El archivo XML es "cd_catalog.xml". Este archivo contiene datos relacionados con la colección de CDs."

JavaScript

Este es el código JavaScript almacenado en el archivo "selectcd.js":

var xmlHttp
function showCD(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("El navegador no admite solicitudes HTTP")
 return
 } 
var url="getcd.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")
 { 
 document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
 } 
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 // Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

Ejemplo de explicación:

Las funciones stateChanged() y GetXmlHttpObject son las mismas que en el capítulo anterior, puede consultar la explicación en la página anterior.

Función showCD()

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

  1. Llamar a la función GetXmlHttpObject para crear el objeto XMLHTTP
  2. Definir la URL (nombre de archivo) a enviar al servidor
  3. Agregar parámetros a la URL con contenido de lista desplegable (q)
  4. Agregar un número aleatorio para evitar que el servidor use archivos en caché
  5. Llamar a stateChanged cuando se dispara un evento
  6. Abrir el objeto XMLHTTP mediante la URL proporcionada
  7. Enviar una solicitud HTTP al servidor

Página PHP

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

Esta página está escrita en PHP, utilizando XML DOM para cargar el documento XML "cd_catalog.xml"。

La ejecución del código está destinada a realizar consultas en archivos XML y retornar resultados en HTML:

<?php
$q=$_GET["q"];
$xmlDoc = new DOMDocument();
$xmlDoc->load("cd_catalog.xml");
$x=$xmlDoc->getElementsByTagName('ARTIST');
for ($i=0; $i<=$x->length-1; $i++)
{
//Procesar solo nodos de elemento
if ($x->item($i)->nodeType==1)
  {
  if ($x->item($i)->childNodes->item(0)->nodeValue == $q)
    { 
    $y=($x->item($i)->parentNode);
    }
  }
}
$cd=($y->childNodes);
for ($i=0;$i<$cd->length;$i++)
{ 
//Procesar solo nodos de elemento
if ($cd->item($i)->nodeType==1)
  { 
  echo($cd->item($i)->nodeName);
  echo(": ");
  echo($cd->item($i)->childNodes->item(0)->nodeValue);
  echo("<br />");
  } 
}
?>

Ejemplo de explicación

Ocurre cuando se realiza una solicitud desde JavaScript a una página PHP:

  1. Objeto XML DOM de PHP para crear el archivo "cd_catalog.xml"
  2. Recorrer todos los elementos "artist" (nodetypes = 1), buscando nombres que coincidan con los datos enviados por JavaScript
  3. Encontrar el CD que contiene al artista correcto
  4. Mostrar información del álbum y enviarla al marcador de posición "txtHint"