Editando apunte: Ajax, con X de XML

Editando apunte: Ajax, con X de XML cerrar apuntes

ID: 85 (tabla: apuntes) Título:
Fecha: [poner fecha actual ]
Categorías: Vicisitudes de un Webmaster, Programación
Etiquetas: enlaces, javascript, links, php, webmaster
Extras: enlaces, javascript, links, php, webmaster
apunte: - - - - - - - -

<p>
	<img src="diario.imagen.php?id=31&max=300" alt="Mundo" title="Mundo" longdesc="diario.ficha.php?id=31" style="float: right; margin: 0 0 .5em 1em;"/>
	[rss]Hace algunos días me preguntaron en los <a href="http://www.forosdelweb.com/f127/tooltip-con-xml-jquery-990117/#post4177110">foros del web</a> si tenía un ejemplo simple de lectura de datos estructurados XML con Ajax...[/rss]
</p>
<p>
	... 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. [rss]La conclusión ha sido crear un sistema que despliegue la lista de apuntes del sector "Archivos", a la derecha de este diario.[/rss]
</p>
<h3 class="subtitulo">
	Preliminares
</h3>
<p>
	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 "<a href="?archivos=mayo+2012&PHPSESSID=hlksceu06mlglomkvc7sbha180">?archivos=mayo+2012</a>", y al pinchar nos lleva a la lista correspondiente, pero podríamos simplemente mostrar otra lista de los títulos asociados desplegándola debajo.
</p>
<p>
	[rss]Para que sea <a href="http://es.wikipedia.org/wiki/XML">XML</a> hemos pensado que podría tener una estructura como los ficheros <a href="http://es.wikipedia.org/wiki/RSS">RSS</a> y de esa manera conseguir que sea visible fácilmente usando la hoja <a href="http://es.wikipedia.org/wiki/XSL">XSL</a> que ya teníamos hecha para nuestro sistema de sindicación.[/rss]
</p>
<p>
	Vamos a dejar de lado tantas siglas y enlazamos al fichero resultante de <a href="diario.jocker.php?extra=archivos&a=2012&m=05&PHPSESSID=hlksceu06mlglomkvc7sbha180">este mes</a>. Aunque todos nuestros códigos están accesibles en nuestros listados, a continuación mostramos el que hemos usado para nuestro propósito:
</p>
<pre class="codigo">$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>";</pre>
<p>
	Para que sea más fácil nuestro propósito con el lenguaje <a href="http://es.wikipedia.org/wiki/JavaScript">javascript</a> 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.
</p>
<h3 class="subtitulo">
	Código no intrusivo
</h3>
<p>
	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.
</p>
<pre class="codigo">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);
}</pre>
<p>
	[rss]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.[/rss] Los mismos quedan resumimos en la siguiente lista:
</p>
<ul id="lista_archivos_ajax">
<li><img src="diario/dibujos/feed-icon-16.gif" alt="rss"/><a href="diario.rss.xml?PHPSESSID=hlksceu06mlglomkvc7sbha180" style="margin-left: 1em;">Todos los ficheros</a> (no se lee con Ajax)</li>
</ul>
<p>
	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).
</p>
<h3 class="subtitulo">
	Evitando redundancias
</h3>
<p>
	[rss]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.[/rss]
	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).
</p>

Controles Otras tablas: imagenes, postales, categorias, etiquetas, extras - - (popup ) - que

Seleccionar nuevo apunte

categoria Nombre:
Controles Otras tablas: apuntes, imagenes, postales, etiquetas extras - - Seleccionar: categoria
Descripción: - - - - - - - -	Apuntes

extra Nombre:
Controles Otras tablas: apuntes, imagenes, postales, categorias etiquetas - - Seleccionar: extra
Descripción: - - - - - - - -	Apuntes

etiqueta Nombre:
Controles Otras tablas: apuntes, imagenes, postales, categorias extras - - Seleccionar: etiqueta
Descripción: - - - - - - - -	Apuntes

Editor del diario

Zona de comentarios

Evaluación