logo El diario de Pepe Molina (Caricatos)

yo

Cuando leo los problemas que plantean los usuarios de los foros, y sus códigos, encuentro que raras veces se preocupan que esos códigos sirvan aún con javascript desactivado en los navegadores.


Última caricatura

IV Asamblea de la AEC: IV Asamblea General de la Asociación Española de Caricaturistas

IV Asamblea de la AEC

RSS de las imágenes: rss


La Cita

Media calamidad es mejor que una entera

T. E. Lawrence, oficial del ejército británico (1888-1935).


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 accesible

emoticón de Caricatos Publicado el día 11 de octubre de 2011
id=45; categorías: Vicisitudes de un Webmaster, Globalización, Programación

accesibilidad Cuando leo los problemas que plantean los usuarios de los foros, y sus códigos, encuentro que raras veces se preocupan que esos códigos sirvan aún con javascript desactivado en los navegadores. Tenemos en este diario un ejemplo de Ajax accesible en el sistema de valoración con estrellitas doradas: Este diario: Valorar contenido.

Empezando por el principio

Nos limitaremos a explicar el sistema en cuestión (nuestro sistema de valoración), donde en un recuadro tenemos un simple formulario con unas estrellitas, un control "select" y un botón con el texto "Valorar" escrito en él. Si urgamos en el código, encontramos también un campo oculto con el nombre de la página (en este caso pagina.45); el formulario tiene el método get, y va dirigido a una página externa cuyo nombre no viene al caso, pero sí su contenido que detallaremos más adelante.

No se encuentra ningún tratamiento de eventos, o sea que si no se dispone de la oportuna inicialización javascript, al presionar el botón de tipo submit "Valorar", se enviará el contenido al destino cuyo código (en realidad mostraremos algunas partes) vemos a continuación:

<?php
	session_start();
	$ajax = isset($_POST["ajax"]);
	$pagina = $_GET["pagina"];
	$soy = $_SESSION["soy"];
	$valor = $_GET["valor"];
	$hay_valor = (isset($_GET[valor]) && ($_GET["valor"] > "0"));
	$vale = ($hay_valor && ($pagina == $soy));
	$volver = $_SERVER[HTTP_REFERER];
//?>

Vemos en estas pocas líneas del principio de la página receptora de la valoración que hay una variable "$ajax" que se envía por el método "post", junto a las dos variables que están en el formulario original; en otra variable guardamos la página origen de la valoración, y una gestión de variables de sesión que comentaremos a continuación.

Intentando evitar mamarrachadas

Hemos visto que los valores se envían por el método "get" o línea de comandos, lo que significa que si desde otra página externa ponen la dirección de la página receptora con los valores que a cada uno les dé la gana, el sistema de seguridad sería vulnerado y eso no nos interesa. Podrían incluso usar enlaces o peticiones Ajax ocultas ajenas a esta página... ponemos un ejemplo de un enlace para dar valoracióon escasa al index: Dar valor 5 al index. Si activamos el enlace veremos un mensaje de valoración incorrecta, ya que no coinciden la variable de sesión con la página referenciada, pero si podríamos modificar la valoración de este mismo apunte con el siguiente enlace: Poner valoración "Sobresaliente".

Ya chequeada la validez de los parámetros (variable $vale), podemos consultar nuestra tabla en la base de datos previa obtención de la IP del ordenador remoto:

$ip = $_SERVER["REMOTE_ADDR"];
$sql = "select valor from $tabla_valores where pagina='$soy' and ip='$ip'";

Con esta consulta, las acciones que realizaremos dependerá de la respuesta para hacer una inserción, o una modificación o nada (junto a los respectivos mensajes).

Aún no hemos comentado nada sobre Ajax, simplemente porque antes de programar una petición Ajax, nuestra recomendación es que debemos controlar que todo funcione correctamente sin el uso de javascript.

Y ahora, ¡AJAX!

Habíamos dejado en el aire el sentido de la variable que encontramos con el método "post"; pues justamente en este caso se usa para la discriminación de la petición ajax, o sea usando javascript.

Sabiendo como crear un objeto Ajax (véase el apunte "¡Mitología!, ¡Fútbol!, ¡Web!..."), debemos realizar esa llamada programando el evento submit del formulario, y luego cancelar ese evento:

function tag(id)	{return document.getElementById(id);}
function poner_evento(elemento, evento, f)	{
	if (document.addEventListener)
		elemento.addEventListener(evento, f, true);
	else
		if (document.attachEvent)
			elemento.attachEvent("on" + evento, f);
		else
			elemento["on" + evento] = f;
}

window.onload = function()	{
	// inicializamos otros eventos en otros elementos...
	poner_evento(tag("evaluar"), "submit", evaluar_con_Ajax);
}

function evaluar_con_Ajax(e)	{
	f = this;
	if (f.valor.value == "0")	{
		respuesta = "No ha hecho ninguna valoración...";
		tag("mensaje_respuesta_valorador").innerHTML = respuesta;
	}
	else	{
		url = f.action + "?pagina=" + f.pagina.value + "&valor=" + f.valor.value;
		Ajax = objetoAjax();
		params = "ajax=si";
		Ajax.open("POST", url, true);
		Ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		Ajax.onreadystatechange = function()	{
			if(Ajax.readyState == 4 && Ajax.status == 200) {
				nueva_imagen = "diario.estrellas.php?pagina=" + f.pagina.value + "&fantasma=" + Math.random();
				tag("valorada").src = nueva_imagen;
				respuesta = Ajax.responseXML.getElementsByTagName("error")[0].firstChild.data;
				tag("mensaje_respuesta_valorador").innerHTML = respuesta;
			}
		}
		Ajax.send(params);
	}
	cancelar_evento(e);
}

function cancelar_evento(e) {
	if (!e) e = window.event;
	if (e.preventDefault)	{
		e.preventDefault();
	}
	else	{
		e.returnValue = false;
	}
}

En el código hemos omitido lo referente a la modificación de las estrella, pero siempre se puede ver el código fuente de la página.

Resumiendo lo visto, la petición Ajax se hace por el método "post", pero los datos de la valoración siguen enviándose por "get", así entre otras cosas evitamos complicar el código con dos gestiones distintas según el método... y ahora solo nos queda mostrar el uso de la variable discriminante:

if ($ajax)	{
	header("Content-type: text/xml");
	echo <<< xml
	// aquí el código xml (con Ajax)
xml;
}
else	{
	header("Content-type: text/html");
	echo <<< html
	// aquí el código html (sin Ajax)
html;
}

Solo nos queda comentar que aquella variable "$volver" que omitimos comentar, simplemente se aprovecha para volver (vaya la redundancia) a la página valorada en el código que no usa AJAX.

Zona de comentarios

Este apunte aún no tiene comentarios.

Evaluación

Valoración de esta página: (apunte.45) 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 10481 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/santa.gif
http://www.pepemolina.com/postales/animales/gato8t.gif
Feliz Navidad
Feliz Navidad
enlace a la postal
Copyright © 2002-2024 www.pepemolina.com
RSS rss | Ver Mapa del sitio