AJAX se puede utilizar para la comunicación interactiva con un archivo XML.
Ejemplo XML AJAX
El siguiente ejemplo demostrará cómo una página web puede recuperar información de un archivo XML con AJAX:
Ejemplo
CD info will be listed here...
Ejemplo Explicación - La página HTML
Cuando un usuario selecciona un CD en la lista desplegable anteriormente, una función llamada " showCD() " se ejecuta. La función se activa por el "onchange" evento:
<html>
<head>
<script>
function showCD(str)
{
if (str=="") {
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("txtHint").innerHTML=xmlhttp.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>El showCD() la función hace lo siguiente:
- Compruebe si se ha seleccionado un CD
- Crear un objeto XMLHttpRequest
- Cree la función a ejecutar cuando la respuesta del servidor está listo
- Enviar la solicitud fuera a un archivo en el servidor
- Nótese que un parámetro (q) se añade a la URL (con el contenido de la lista desplegable)
El archivo PHP
La página en el servidor llamado por el código JavaScript anterior es un archivo PHP llamado "getcd.php" .
El script PHP carga un documento XML, " cd_catalog.xml ", se 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 el código JavaScript a la página PHP, ocurre lo siguiente:
- PHP crea un objeto XML DOM
- Buscar todos los <artist> elementos que coincide con el nombre enviado desde el Javascript
- Salida de la información del álbum (send to the "txtHint" placeholder)