Editando apunte: Ajax accesible

Editando apunte: Ajax accesible cerrar apuntes

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

<p>
	<a href="diario.ficha.php?id=23&PHPSESSID=fh2i6i9updhhk66amjboal9ck4" title="accesibilidad"><img src="diario.imagen.php?id=23&max=100" alt="accesibilidad" longdesc="diario.ficha.php?id=23" style="float: right; margin: 0 0 .5em 1em" /></a>
	[rss]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.[/rss]
	Tenemos en este diario un ejemplo de <a href="http://es.wikipedia.org/wiki/AJAX">Ajax</a> accesible en el sistema de valoración con estrellitas doradas: <a href="?titulo=Este+diario%3A+Valorar+contenido&PHPSESSID=fh2i6i9updhhk66amjboal9ck4">Este diario: Valorar contenido</a>.
</p>
<h3 class="subtitulo">
	Empezando por el principio
</h3>
<p>
	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.
</p>
<p>
	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:
</p>
<pre class="codigo"><?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];
//?></pre>
<p>
	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.
</p>
<h3 class="subtitulo">
	Intentando evitar mamarrachadas
</h3>
<p>
	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: <a href="diario/diario.valorar.php?pagina=index&valor=6&PHPSESSID=fh2i6i9updhhk66amjboal9ck4">Dar valor 5 al index</a>. 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: <a href="diario/diario.valorar.php?pagina=apunte.45&valor=10&PHPSESSID=fh2i6i9updhhk66amjboal9ck4">Poner valoración "Sobresaliente"</a>.
</p>
<p>
	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:
</p>
<pre class="codigo">$ip = $_SERVER["REMOTE_ADDR"];
$sql = "select valor from $tabla_valores where pagina='$soy' and ip='$ip'";</pre>

<p>
	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).
</p>
<p>
	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.
</p>
<h3 class="subtitulo">
	Y ahora, ¡AJAX!
</h3>
<p>
	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.
</p>
<p>
	Sabiendo como crear un objeto Ajax (véase el apunte "<a href="?titulo=%A1Mitolog%EDa%21%2C+%A1F%FAtbol%21%2C+%A1Web%21...&PHPSESSID=fh2i6i9updhhk66amjboal9ck4">¡Mitología!, ¡Fútbol!, ¡Web!...</a>"), debemos realizar esa llamada programando el evento submit del formulario, y luego cancelar ese evento:
</p>
<pre class="codigo">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);
}

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