Ejemplo PHP - AJAX y XML
AJAX se puede utilizar para la comunicación interactiva con un archivo XML.
Ejemplo XML de AJAX
El siguiente ejemplo demostrará cómo una página web puede obtener información de un archivo XML con AJAX:
Ejemplo
CD info will be listed here...
Ejemplo explicado: la página HTML
Cuando un usuario selecciona un CD en la lista desplegable anterior, se ejecuta una función llamada "showCD()". La función es activada por el evento "onchange":
<html>
<head>
<script>
function showCD(str)
{
if (str=="") {
document.getElementById("txtHint").innerHTML="";
return;
}
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function() {
if (this.readyState==4 && this.status==200) {
document.getElementById("txtHint").innerHTML=this.responseText;
}
}
xmlhttp.open("GET","getcd.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
Select a CD:
<select name="cds" onchange="showCD(this.value)">
<option value="">Select a CD:</option>
<option value="Bob Dylan">Bob Dylan</option>
<option value="Bee Gees">Bee Gees</option>
<option value="Cat Stevens">Cat Stevens</option>
</select>
</form>
<div id="txtHint"><b>CD info will be listed here...</b></div>
</body>
</html>La función showCD() hace lo siguiente:
- Comprobar si hay un CD seleccionado
- Crear un objeto XMLHttpRequest
- Cree la función que se ejecutará cuando la respuesta del servidor esté lista
- Enviar la solicitud a un archivo en el servidor
- Observe que se agrega un parámetro (q) a la URL (con el contenido de la lista desplegable)
El archivo PHP
La página en el servidor llamado por el JavaScript anterior es un archivo PHP llamado "getcd.php".
El script PHP carga un documento XML, " cd_catalog.xml ", ejecuta una consulta en el archivo XML y devuelve el resultado como 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++)
{
//Process only element nodes
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++)
{
//Process only element nodes
if ($cd->item($i)->nodeType==1) {
echo("<b>" . $cd->item($i)->nodeName . ":</b> ");
echo($cd->item($i)->childNodes->item(0)->nodeValue);
echo("<br>");
}
}
?>
Cuando la consulta de CD se envía desde JavaScript a la página de PHP, sucede lo siguiente:
- PHP crea un objeto DOM XML
- Encuentre todos los elementos <artist> que coincidan con el nombre enviado desde el JavaScript
- Salida de la información del álbum (enviar al marcador de posición "txtHint")