Leer XML desde Ajax

Posted in Documentación - HTML

 

En esta sesión vamos a ver como podemos leer directamente un archivo XML, donde estará el contenido de nuestro portfolio (recordamos que este mismo contenido se leerá desde el flash). Lo vamos a conseguir gracias a AJAX. (Asynchronous JavaScript And XML)
Para ello vamos a repasar rápidamente conceptos como html, javascript, css y XML.

Ajax nos permite crear aplicaciones en una página web donde el contenido cambia dinámicamente sin necesidad de recargar la página. De alguna manera es similar a Flash, aunque con muchas limitaciones.

Porqué usamos Ajax para leer el XML en lugar de PHP?

En primer lugar porqué de esta manera aprenderemos Ajax, y conseguiremos entender mejor la estructura de una página web.

Además de esta manera nos evitamos la necesidad de tener un servidor web instalado, con el PHP activado.

Algunos referencias interesantes sobre ajax/javascript:

http://script.aculo.us/
http://www.prototypejs.org/
http://www.miniajax.com/

Javascript vs PHP

Javascript es un lenguage de cliente (client-side), en cambio PHP es un lenguaje de servidor.

Existen muchas otras alternativas a PHP como lenguaje de servidor (ASP,.NET,Ruby,Java,Perl,Phyton,etc...)

En cambio no existe ninguna alternativa a javascript como lenguaje en el cliente.

Si leemos el XML desde javascript es importante entender que el XML se interpreta en el cliente, en el propio navegador.

En cambio si leemos el XML desde PHP en el servidor y luego generamos una página HTML el trabajo lo hace el servidor, de hecho ni siquiera se da cuenta el cliente de donde ha salido la información, de un XML, de una base de datos, o si se ha usado php, asp o cualquier otro lenguaje diferente. El navegador solo vé html y javascript, nada mas.


Introducción al html

Un documento html se compone basicamente de una cabecera (head), y el contenido (body), las dos partes incluidas del propio documento (html)

La estructura básica seria

<html>
<head>
</head>
<body>
El contenido de la página
</body>
</html>

Formato básico del contenido en html

Existen algunas etiquetas básicas que nos sirven para marcar el contenido del documento.

<b>negrita</b>
<i>cursiva</i>
<h1>cabezera</h1>
<h2>cabezera</h2>
...

Divs

Los divs sirven para definir secciones de contenido dentro del documento.
A veces se habla de los divs como "layers", ya que en realidad se pueden considerar capas, y pueden estar una sobre la otra.

Podemos definir el estilo de un div de dos maneras básicamente:

con id si es un div único en el documento:

<div id="menu>opcion1 opcion2</div>

o con class si es un estilo compartido

<div class="estilo1">opcion1 opcion 2</div>

 

Integración de un CSS en el documento

Podemos definir los estilos dentro del documento html de la siguiente manera, dentro de la cabecera (head)

<style type="text/css"> /*mis estilos*/ </style>

o mejor, recomendado, en un archivo externo, de esta manera los podremos compartir con otros documentos html

<link href="css/mis_estilos.css" rel="stylesheet" type="text/css">


Javascript

Javascript es un lenguaje de prorgamación intimamente emparentado con actionscript de flash.
Es un lenguaje que implementa el navegador, y que por tanto, tiene diferencias según la versión, tipo de navegador o sistema operativo.
Para incluir código javascript en la página debemos insertar los tags <script> de la siguiente manera

<script language="javascript">
//aqui está el programa de javascript
alert("esto es una alerta");
window.status="esto es un mensaje en la barra inferior";
</script>

Muchas veces nos interesa ejecutar algunas instrucciones cuando se ha cargado el documento (no antes)
Para ello podemos usar el evento onload, en el tag body del documento.

<body onload="init();">

En el caso anterior se llamará a la función init(), definida en la parte de javascript, pero en el momento que el documento esté totalmente cargado.

Si queremos hacer que el contenido sea dinámico, modificable por javascript, lo mas recomendable es usar una libreria intermedia de javascript para evitar al máximo el problema de compatibilidad entre diferentes navegadores. La libreria mas usada se llama prototype.

Prototype.js

Tenemos que descargar el archivo prototype.js e incrustarlo en nuestro documento. Es recomendable tener una carpeta llamada "js" para guardar los archivos javascript compartidos.
Una vez estamos usando prototype podemos cambiar el contenido de cualquier div facilmente mediante la siguiente instrucción:

$('nombre_div').update("esto es el contenido que quiero poner dentro del div");

Introducción al XML

Un archivo XML es un archivo de texto donde se han definido una serie de etiquetas para el contenido, y se han seguido unas pautas para su creación, básicamente que todas las etiquetas tienen que estar anidadas correctamente (es lo que se llama un documento bien "formado")

Para el portfolio vamos a usar un documento xml donde tendremos la información

Un ejemplo muy sencillo podria ser el siguiente:

<portfolio>
<project>
<name>Mi primer proyecto</name>
<year>2007</year>
<desc>Es un proyecto muy chulo que hice ese año</desc>
<link>http://www.coolthing.com/</link>
<thumb>thumbs/cool.jpg</thumb>
<image>images/cool.jpg</image>
</project>

<project>
<name>Mi segundo proyecto</name>
<year>2008</year>
<desc>Otro proyecto todavia mas chulo</desc>
<link>http://www.frogopogo.com/</link>
<thumb>thumbs/frog.jpg</thumb>
<image>images/frog.jpg</image>
</project>

Leer un acrhivo XML desde javascript

Para leer un archivo desde javascript necesitamos dos cosas.

En primer lugar leer el archivo externo (el xml no es mas que un archivo de texto).

En segundo lugar, u na vez tenemos el archivo, necesitamos "parsearlo". Parsear el documento quiere decir interpretar el contenido que hay dentro.

Para leer el archivo usaremos el objecto Ajax de la libreria prototype.

Para "parsear" el documento usaremos una libreria que convierte el archivo XML en un objeto de javascript (mucho mas práctico)

A continuación el código que necesitamos para realizar estos dos pasos

En el head insertar las dos librerias que necesitamos:

<script src="js/prototype.js"/></script>
<script src="js/ObjTree.js"></script>

luego en el body escribir el evento onload

<body onload="init();">

Para cargar el archivo externo en ajax:

new Ajax.Request('portfolio.xml', { onSuccess:hecho, onFailure:errFunc});

Vemos que el primer parámetro es el archivo que queremos abrir, luego tenemos que pasar el nombre de la función que queremos que se llame una vez tenemos el resultado (de manera muy similar a LoadVars y onLoad en actionscript)

Una vez obtenemos el resultado, usamos la libreria que convierte el XML en un objeto de javascript

var xotree = new XML.ObjTree();
tree = xotree.parseXML( t.responseText );

Luego podemos hacer lo que queramos con esta información usando la libreria prototype,
a continuación un ejemplo donde se leen los nombres de los proyectos y el texto y se escriben dentro del div "content"

var projects=tree["portfolio"].project;
var txt="";
for(i=0;i<projects.length;i++){
txt+="<h1>"+projects[i].name+"</h1>";
txt+=projects[i].desc
}

$('content').update(txt);

Siguiente >