logo El diario de Pepe Molina (Caricatos)

yo

Hace algunos días me preguntaron en los foros del web si tenía un ejemplo simple de lectura de datos estructurados XML con Ajax...


Última caricatura

Andrés Iniesta: Futbolista español. En la actualidad juega en el Barcelona.

Andrés Iniesta

RSS de las imágenes: rss


La Cita

Saber no es suficiente, debemos aplicar. Desear no es suficiente, debemos hacer

Johann Wolfgang von Goethe, poeta y dramaturgo alemán (1749-1832).


En esta zona están las páginas personales del autor.


Mis clientes ahora también son mis amigos (aunque les cobre).


En Mis amigos Informáticos hay una pequeña colección de páginas de colegas webmasters..


En Mis amigos artistas podemos encontrar artistas de cualquier índole (dibujantes, pintores, escritores...)


Las recomendaciones que proponemos son de índole variada.


Aquí un cajón de sastre de enlaces.


Nos referencian desde sitios de toda índole.


Puede contribuir a mantener esta página con su donativo.


botón pay-pal

Ajax, con X de XML

emoticón de Caricatos Publicado el día 08 de mayo de 2012
id=85; categorías: Vicisitudes de un Webmaster, Programación

Mundo Hace algunos días me preguntaron en los foros del web si tenía un ejemplo simple de lectura de datos estructurados XML con Ajax...

... después de revisar mis códigos, he encontrado muchas rutinas con esa tecnología, pero de una complejidad que no creí correcto referenciar, así que se me ocurrió hacer algo nuevo que pueda usar en esta página. La conclusión ha sido crear un sistema que despliegue la lista de apuntes del sector "Archivos", a la derecha de este diario.

Preliminares

Viendo el código fuente de la página, descubrimos que se trata de una lista desordenada "ul" (unordered list) y en cada item "li" (list item) el enlace del tipo "?archivos=mayo+2012", y al pinchar nos lleva a la lista correspondiente, pero podríamos simplemente mostrar otra lista de los títulos asociados desplegándola debajo.

Para que sea XML hemos pensado que podría tener una estructura como los ficheros RSS y de esa manera conseguir que sea visible fácilmente usando la hoja XSL que ya teníamos hecha para nuestro sistema de sindicación.

Vamos a dejar de lado tantas siglas y enlazamos al fichero resultante de este mes. Aunque todos nuestros códigos están accesibles en nuestros listados, a continuación mostramos el que hemos usado para nuestro propósito:

$aaaa = $_GET["a"];
$mm = $_GET["m"];
header("Content-type: text/xml");
	ob_start();
	echo <<< cabecera
<?xml version="1.0" encoding="ISO-8859-1" ?>
<?xml-stylesheet type="text/xsl" href="diario.rss.xsl" ?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<atom:link href="$diario_ruta/diario.rss.xml" rel="self" type="application/rss+xml" />
<title>$diario_titulo: extras</title>
<link>{$_SERVER[PHP_SELF]}?extra=extras_xml</link>
<description>$diario_titulo</description>

cabecera;
$cabeza = ob_get_clean();

$sql = "select titulo, apunte from $tabla_apuntes where activo > 0 and fecha like '$aaaa-$mm%' order by fecha desc";
$listado = array();
$res = @mysql_query($sql);
$cuenta = mysql_num_rows($res);
while ($dato = mysql_fetch_array($res))	{
	$titulo = $dato["titulo"];
	$link = $diario."?titulo=".urlencode($titulo);
	preg_match('/\[rss\](.*?)\[\/rss\]/is', $dato["apunte"], $des);
	array_push($listado, "\n<item>\n<title>$titulo</title>\n<link>$link</link>\n<description>{$des[1]}</description>\n</item>\n");
}
$lista = implode("\n", $listado);

echo $cabeza.$lista."\n</channel>\n</rss>";

Para que sea más fácil nuestro propósito con el lenguaje javascript hemos modificado los enlaces añadiendo un atributo "id" del tipo "archivos_aaaa_mm", como por ejemplo: id="archivos_2012_05" para el enlace del mes de mayo de este año 2012.

Código no intrusivo

Para que sea inapreciable el arreglo hemos añadido el código después de cargarse la página. No obstante los enlaces seguirán siendo funcionales, así que mientras no se hayan cargado todos los elementos de la página serán los de siempre, y cuando se cargue el código, los enlaces desplegarán una lista con las referencias asociadas.

var lista_archivos = new Object();
function enlace_archivo_ajax(e)	{
	archivos = this;
	archivos_id = archivos.id;
	desglose_id = archivos.id.split("_");
	mes = desglose_id.pop();
	año = desglose_id.pop();
	id_archivos = "desglose_" + mes + "_" + año;
	if (lista_archivos[id_archivos] == undefined)	{
		lista_archivos[id_archivos] = [];
		lista_archivos[id_archivos]["visible"] = true;
		nueva_espera = document.createElement("img");
		nueva_espera.src = "diario/dibujos/espera.gif";
		tag(archivos_id).parentNode.appendChild(nueva_espera);
		url = "diario.jocker.php?extra=archivos&a=" + año + "&m=" + mes;
		Ajax = objetoAjax();
		Ajax.open("get", url, true);
		Ajax.onreadystatechange = function()	{
			if	(Ajax.readyState == 4 && Ajax.status == 200) {
				nueva_capa = document.createElement("ul");
				nueva_capa.id = id_archivos;
				nueva_capa.className = "enlaces";
				tag(archivos_id).parentNode.appendChild(nueva_capa);
				respuesta = Ajax.responseXML.documentElement;
				items = respuesta.getElementsByTagName("item");
				for (i = 0, total = items.length; i < total; i++)	{
					el_enlace = items[i].getElementsByTagName("link")[0].firstChild.nodeValue;
					el_titulo = items[i].getElementsByTagName("title")[0].firstChild.nodeValue;
					la_desc = (items[i].getElementsByTagName("description")[0].hasChildNodes()) ?
						items[i].getElementsByTagName("description")[0].firstChild.nodeValue: "sin descripción";
					nuevo_li = document.createElement("li");
					nuevo_enlace = document.createElement("a");
					nuevo_enlace.href = el_enlace;
					nuevo_enlace.setAttribute("title", la_desc);
					nuevo_enlace.appendChild(document.createTextNode(el_titulo));
					nuevo_li.appendChild(nuevo_enlace);
					nueva_capa.appendChild(nuevo_li);
				};
				tag(archivos_id).parentNode.removeChild(nueva_espera);
			}
		}
		Ajax.send();
	}
	else	{
		tag(id_archivos).style.display = (lista_archivos[id_archivos]["visible"]) ? "none":"block";
		lista_archivos[id_archivos]["visible"] = !lista_archivos[id_archivos]["visible"];
	}
	cancelar_evento(e);
}

Aunque pueda parecer mucho código, la parte "Ajax" es bastante sencilla: se lee el fichero XML/RSS correspondiente al enlace pinchado y se genera la lista desordenada con sus enlaces asociados. Los mismos quedan resumimos en la siguiente lista:

Por cada item de la lista se obtienen los datos: "title", "link" y "description" que usaremos al desplegar la lista (title es el texto que se muestra, link el enlace y description el atributo title).

Evitando redundancias

Otra parte fundamental del código y tal vez la razón de su extensión, es la que evita realizar más de una vez una misma consulta. Cuando se despliega una lista, se puede plegar pinchando sobre el mismo enlace, pero si volvemos a querer desplegarla simplemente se muestra lo que anteriormente se había ocultado; considerando que es casi imposible que se realizaran cambios en los enlaces de cada lista, no tienen ningún sentido volver a leer los datos ya leídos en la misma sesión (un vicio bastante común).

Zona de comentarios

Este apunte aún no tiene comentarios.

Evaluación

Valoración de esta página: (apunte.85) valor

Valoración evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar

Respuesta: Zona de mensajes (proceso de evaluación)

Historial de navegación

Esta página ha sido visitada en 6359 ocasiones


Disponemos de rss sindicar

Y del Mapa del sitio, además del sitemap.xml.


Aquí podemos encontrar los apuntes más visitados.

"Top 10" reemplaza a la sección Últimos apuntes.


Una buena forma de buscar un apunte es a partir de su categoría.


También es posible buscar apuntes por medio de las etiquetas (tags).


Hemos decidido poner al alcance de todos algunos comodines.

Adjuntamos una versión reducida del "buscador interno" que vemos en la lista anterior:

Buscar en apuntes

También estamos recopilando antiguas páginas del sitio.


Desde este recuadro se puede hacer una búsqueda cronológica.


Se puede crear una postal nueva desde el enlace del sector "Otras páginas del dominio", o editar la que sale en el recuadro, pulsando sobre ella..

http://www.pepemolina.com/postales/Fondos/FONDO010.gif
http://www.pepemolina.com/postales/Navidad/TgC_Navidad_31.gif
http://www.pepemolina.com/postales/Navidad/snow_anm.gif
http://www.pepemolina.com/postales/Navidad/xmastree2.gif
enlace a la postal
Copyright © 2002-2017 www.pepemolina.com
RSS rss | Ver Mapa del sitio