Para el siguiente tutorial se necesitan conocimientos en AJAX, JavaScript, XML y XML DOM.
Se tiene la siguiente información en un archivo XML:
Archivo libros.xml
Obtendremos a través de AJAX esa información y la mostraremos en el navegador en una tabla HTML.
En nuestro archivo index.php creamos un div y un botón para que cuando sea presionado muestre dentro del div la información que contiene el archivo XML. En el head importamos el archivo ajax.js que contiene la funcion JavaScript loadXMLDoc().
Archivo index.php
<!DOCTYPE html>
<html>
<head>
<script src="ajax.js"></script>
</head>
<body>
<h1>Asynchronous JavaScript and XML (AJAX)</h1>
<p>Obtener información de un archivo XML a través de AJAX.</p>
<div id="info">
<button type="button" onclick="loadXMLDoc()">Obtener datos</button>
</div>
</body>
</html>
El archivo ajax.js es el archivo principal, el método open() carga el archivo que vamos a procesar (libros.xml), pero es con el método getElementsByTagName(name) que obtenemos todos los elementos (datos) de una etiqueta específica. Por ejemplo en la línea:
Lo que hace es obtener todos los elementos de la etiqueta libro y almacenarlos en la variable x como una lista de nodos. Una lista de nodos es un array de nodos, que se pueden recorrer a través de posiciones (como un arreglo) comenzando desde cero.
Con un ciclo for recorremos el array x:
for (i=0;i<x.length;i++)
{
txt=txt+"<tr><td>";
txt=txt + x[i].getElementsByTagName("titulo")[0].childNodes[0].nodeValue;
txt=txt+"</td>";
txt=txt+"<td>";
txt=txt + x[i].getElementsByTagName("autor")[0].childNodes[0].nodeValue;
txt=txt+"</td>";
txt=txt+"<td>";
txt=txt + x[i].getElementsByTagName("pais")[0].childNodes[0].nodeValue;
txt=txt+"</td></tr>";
}
Con la propiedad length calculamos automaticamente el tamaño del array. En este caso 5 libros.
La funcion o tarea de la línea:
Es que para cada libro obtenga el texto que contiene el elemento <title>.
getElementsByTagName("title")[0] - El primer elemento <title>
childNodes[0] - El primer hijo del elemento <title> (el texto del nodo)
nodeValue - El valor del nodo (el propio texto)
Lo anterior tambien aplica para obtener el autor y pais de cada libro. La variable txt es para mostrar la información en una tabla HTML.
Archivo ajax.js
function loadXMLDoc()
{
var xmlhttp;
var txt,x,i;
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)
{
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("libro");
txt="<table border='1'><tr><th>Titulo</th><th>Autor</th><th>Pais</th></tr>";
for (i=0;i<x.length;i++)
{
txt=txt+"<tr><td>";
txt=txt + x[i].getElementsByTagName("titulo")[0].childNodes[0].nodeValue;
txt=txt+"</td>";
txt=txt+"<td>";
txt=txt + x[i].getElementsByTagName("autor")[0].childNodes[0].nodeValue;
txt=txt+"</td>";
txt=txt+"<td>";
txt=txt + x[i].getElementsByTagName("pais")[0].childNodes[0].nodeValue;
txt=txt+"</td></tr>";
}
txt=txt+"</table>";
document.getElementById("info").innerHTML=txt;
}
}
xmlhttp.open("GET","libros.xml",true);
xmlhttp.send();
}
Demo/Código fuente
Se tiene la siguiente información en un archivo XML:
Archivo libros.xml
Obtendremos a través de AJAX esa información y la mostraremos en el navegador en una tabla HTML.
En nuestro archivo index.php creamos un div y un botón para que cuando sea presionado muestre dentro del div la información que contiene el archivo XML. En el head importamos el archivo ajax.js que contiene la funcion JavaScript loadXMLDoc().
Archivo index.php
<!DOCTYPE html>
<html>
<head>
<script src="ajax.js"></script>
</head>
<body>
<h1>Asynchronous JavaScript and XML (AJAX)</h1>
<p>Obtener información de un archivo XML a través de AJAX.</p>
<div id="info">
<button type="button" onclick="loadXMLDoc()">Obtener datos</button>
</div>
</body>
</html>
El archivo ajax.js es el archivo principal, el método open() carga el archivo que vamos a procesar (libros.xml), pero es con el método getElementsByTagName(name) que obtenemos todos los elementos (datos) de una etiqueta específica. Por ejemplo en la línea:
x=xmlDoc.getElementsByTagName("libro");
Lo que hace es obtener todos los elementos de la etiqueta libro y almacenarlos en la variable x como una lista de nodos. Una lista de nodos es un array de nodos, que se pueden recorrer a través de posiciones (como un arreglo) comenzando desde cero.
Con un ciclo for recorremos el array x:
for (i=0;i<x.length;i++)
{
txt=txt+"<tr><td>";
txt=txt + x[i].getElementsByTagName("titulo")[0].childNodes[0].nodeValue;
txt=txt+"</td>";
txt=txt+"<td>";
txt=txt + x[i].getElementsByTagName("autor")[0].childNodes[0].nodeValue;
txt=txt+"</td>";
txt=txt+"<td>";
txt=txt + x[i].getElementsByTagName("pais")[0].childNodes[0].nodeValue;
txt=txt+"</td></tr>";
}
Con la propiedad length calculamos automaticamente el tamaño del array. En este caso 5 libros.
La funcion o tarea de la línea:
x[i].getElementsByTagName("titulo")[0].childNodes[0].nodeValue;
Es que para cada libro obtenga el texto que contiene el elemento <title>.
getElementsByTagName("title")[0] - El primer elemento <title>
childNodes[0] - El primer hijo del elemento <title> (el texto del nodo)
nodeValue - El valor del nodo (el propio texto)
Lo anterior tambien aplica para obtener el autor y pais de cada libro. La variable txt es para mostrar la información en una tabla HTML.
Archivo ajax.js
function loadXMLDoc()
{
var xmlhttp;
var txt,x,i;
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)
{
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("libro");
txt="<table border='1'><tr><th>Titulo</th><th>Autor</th><th>Pais</th></tr>";
for (i=0;i<x.length;i++)
{
txt=txt+"<tr><td>";
txt=txt + x[i].getElementsByTagName("titulo")[0].childNodes[0].nodeValue;
txt=txt+"</td>";
txt=txt+"<td>";
txt=txt + x[i].getElementsByTagName("autor")[0].childNodes[0].nodeValue;
txt=txt+"</td>";
txt=txt+"<td>";
txt=txt + x[i].getElementsByTagName("pais")[0].childNodes[0].nodeValue;
txt=txt+"</td></tr>";
}
txt=txt+"</table>";
document.getElementById("info").innerHTML=txt;
}
}
xmlhttp.open("GET","libros.xml",true);
xmlhttp.send();
}
Demo/Código fuente
Comentarios
Publicar un comentario