ARQUITECTURA AJAX-XML-DOM

INDICE

1.- Arquitectura Ajax – XML – DOM

2.- Objeto XMLHttpRequest
3.- Listado de un fichero XML

1.- Arquitectura Ajax – XML – DOM

La arquitectura básica en aplicaciones web es la que vimos en el tema anterior:

un servidor web con un motor de aplicaciones PHP o ASP y un sistema gestor
de base de datos, bien Mysql, SQLServer, Oracle o cualquier otro.

Este esquema nos permite desarrollar aplicaciones web que interactúan con el
cliente a través de formularios. En la mayoría de los casos estas aplicaciones
lanzan consultas a Mysql y el resultado de esa consulta es expresado en
formato HTML a través del motor PHP.

La principal ventaja de este esquema es su seguridad. Los datos están

almacenados en el servidor y sólo pueden ser consultados a través de un

1
formulario enviado al motor PHP. Sin embargo, esta forma de acceder implica
un notable intercambio de información entre servidor-cliente.

Una alternativa a este esquema es la utilización de conexiones asíncronas con

el servidor de forma que nos envíe un fichero en formato XML con los datos y
la consulta se haga en el cliente mediante DOM.

Esta estrategia es la que vamos a analizar en este tema. Su esquema sería el

siguiente:

El cliente solicita una página web al servidor, éste se la envía y en dicha página
hay un objeto (normalmente un botón) que realiza una conexión asíncrona al
servidor solicitando un fichero XML con los datos. El código javascript de la
página dispone de las instrucciones necesarias para procesar dicho fichero.
Cuando el cliente pulsa dicho botón se lanza la petición y, una vez recibido el
fichero XML, se ejecutan las consultas requeridas.

2.- Objeto XMLHttpRequest

XMLHttpRequest es un objeto JavaScript que fue diseñado por Microsoft y

adoptado por Mozilla, Apple y Google. Actualmente es un estándar de la W3C.
Proporciona una forma fácil de obtener información de una URL sin tener que
recargar la página completa. Una página web puede actualizar sólo una parte
de la página sin interrumpir lo que el usuario está haciendo. XMLHttpRequest
es ampliamente usado en la programación AJAX.

A pesar de su nombre, XMLHttpRequest puede ser usado para recibir cualquier

tipo de dato, no solo XML, y admite otros formatos además de HTTP
(incluyendo file y ftp).

Para crear una instancia de XMLHttpRequest, debes hacer lo siguiente

2
var req = new XMLHttpRequest();

Este objeto tiene las siguientes propiedades y métodos

Propiedades.

1.- readyState

Es una variable de tipo numérico que devuelve el estado en la conexión. Sus

posible valores son los siguientes:

UNSENT = 0; // initial state

OPENED = 1; // open called
HEADERS_RECEIVED = 2; // response headers received
LOADING = 3; // response is loading (a data packed is received)
DONE = 4; // request complete

Existe un método que nos permite conocer el estado de la conexión.

xmlhttp.onreadystatechange = function () {
alert(xmlhttp.readyState);
};
Si todo ha ido bien, devolverá 4. La llamada a este método se hace detrás del
método open() y antes del método send().

2.- responseText
Se le indica que la respuesta debe ser de tipo de texto y, por tanto, guardarlo
en una variable de tipo string.

3.- responseXML
Estamos indicando que el objeto debe ser enviado como un documento XML.

4.- Status

Devuelve un entero que representa el estado en el que se encuentra la

comunicación asíncrona. Los posibles valores son:

200 – OK
403 – Prohibido
404 – No encontrado

Otra posibilidad es utilizar la variable statusTex que muestra el texto indicado

arriba en lugar del número.

Por ejemplo,
alert(xmlhttp.status);

3
tendría como resultado

Mientras que si ponemos statusText tendríamos como resultado

Por tanto, una buena forma de controlar si nuestra conexión asíncrona ha sido
un éxito es chequear esta propiedad

if (xmlhttp.status==200)
alert("Fichero Recibido");
else alert("Error en la conexión");

Entre los métodos, podemos destacar los siguientes

1.- Open (método, url)

Abre una conexión asíncrona con el servidor. El parámetro método puede ser
GET o POST. La url se refiere el fichero que queremos descargar.

2.- send()

Lanza la petición con las opciones configuradas anteriormente.

4
3.- Listado de un fichero XML

Una vez analizadas las propiedades y métodos de este objeto, vamos a

utilizarlo para generar un listado de los registros del fichero XML recibido.

EN este primer ejemplo realizamos la conexión asíncrona y recibimos el fichero

<html>
<script>
function conectar(){
if (window.XMLHttpRequest)
{
// Objeto para IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
xmlhttp.open("GET","coches1.xml",false);
xmlhttp.send();
if(xmlDoc=xmlhttp.responseXM)
alert(“Fichero Recibido”);
else
alert("Error en la conexión");
}
</script>
<body>
<input type="button" value="BUSCAR" onClick="conectar()">
</body>
</html>

El resultado sería el indicado a continuación,

Si pulsamos el botón se lanza una conexión asíncrona con el servidor

solicitando el fichero “coches1.xml”. Si todo ha ido bien, el fichero estará en
nuestro ordenador y mostrará el siguiente mensaje

5
En caso de error, por ejemplo que no exista el fichero, se mostrará

Si modificamos el código para escribir el contenido de xmlDoc

document.write(xmlDoc);

obtendremos

Es decir, xmlDoc es un objeto y tendremos que utilizar DOM para situarnos

sobre un nodo del objeto XML

Por ejemplo, si nos situamos en las etiquetas Coche,

var coches=xmlDoc.getElementsByTagName("Coche");
coches es un array que contiene todas las etiquetas “Coche”. Podemos
contarlas utilizando el método length.

6
var l=coches.length;
var cadena= "Hay " + l +" Registros";
alert(cadena);

y tendríamos el siguiente resultado

En nuestro caso, coches es un objeto array y por sí sólo no contiene

información. Necesitaríamos situarnos en un nodo dentro de coches para poder
mostrarlo. En este ejemplo nos situamos en el segundo elemento del array
(i=1) y nos fijamos en el campo MARCA

var coches=xmlDoc.getElementsByTagName("Coche");
marca=coches[1].getElementsByTagName("MARCA")[0].childNodes[0].nodeValue;
alert(marca);

El resultado sería el siguiente

Fíjate en los siguientes detalles

1.- Aunque cada objeto Coches sólo tiene un objeto MARCA, debemos ponerle
el índice siempre (es decir, índice 0)

7
("MARCA")[0].
2.- MARCA sigue siendo una etiqueta, no podemos mostrarla. Lo que debemos
mostrar es el primer hijo de esta etiqueta (que es el texto incluido en ella) y en
concreto su propiedad nodeValue.

Con esto mostramos la etiqueta MARCA del segundo elemento del array
Coches. Si quisiéramos mostrar todas las etiquetas del array tendríamos que
meternos en un bucle.

var coches=xmlDoc.getElementsByTagName("Coche");
var l=coches.length;
for(i=0;i<l;i++){
marca=coches[i].getElementsByTagName("MARCA")[0].childNodes[0].nodeValue;
cadena=marca + "<br>";
document.write(cadena );}

Por último, vamos a mostrar los resultados en forma de tabla mostrando varios
campos de cada registro. También he añadido una variable contador j que
inicialmente vale 0 pero que se incrementa en cada iteración.

var coches=xmlDoc.getElementsByTagName("Coche");
var l=coches.length;
cadena="<table border='1'>";
document.write(cadena);
var j=0;
for (i=0;i<l;i++){
j++;
marca=coches[i].getElementsByTagName("MARCA")[0].childNodes[0].nodeValue;
modelo=coches[i].getElementsByTagName("MODELO")[0].childNodes[0].nodeValue;
precio=coches[i].getElementsByTagName("PRECIO")[0].childNodes[0].nodeValue;
cadena="<tr><td>" +j + "</td><td>" + marca + "</td><td>" + modelo + "</td><td>" +
precio + "</td></tr>";
document.write(cadena);
}
cadena="</table>";document.write(cadena);

El resultado es el siguiente

8
9