Técnicas Javascript RIA(Rich Internet Applications): Uso del hash en la Url

19-12-2014
 

El hash es el símbolo almohadilla que a veces nos aparece en algunas Url, tradicionalmente para hacer que el navegador se posicionara en un punto concreto de la página(Donde había un ancla). Esto tiene aplicaciones muy chulas, por ejemplo, a la hora de crear catálogos, formularios o aplicaciones RIA(Rich Internet Applications).

Url hash

Url hash

Básicamente es una manera de guardar en la URL el estado de la página.

A la hora de usar esto debemos tener en cuenta lo siguiente:

– Al servidor nunca le llega esta parte de la URL (O por lo menos no le debería llegar).
– El procesado del hash debe hacerse siempre desde el cliente(Javascript).
– Para Google todas las URLs con distintos hash son iguales. Cuidado con el SEO!.

Para acceder al hash mediante Javascript lo podemos hacer mediante ‘window.location.hash’ que nos devolverá ‘#<resto de la URL>’.

En el siguiente ejemplo, al iniciar la página, se leen los parámetros del hash y se envían mediante Ajax al servidor:

$( function() {
	var h=window.location.hash;

	/* Quitamos el # del inicio */
	h=h.substring(1,h.length);

	/* Añadimos el parametro ria */
	if ( h!="" ) h+="&";
	h+="ria=1";

	/* Llamamos mediante Ajax la misma página añadiendo el párametro 'ria' 
	y metemos el contenidos dentro de un elemento con 'id' content. */

	$.ajax({
		type: "POST",
		url: window.location.href,
		data: h,
		success: function(msg){
			$("#content").html( msg );
			}
 		});

	});

Pero donde esta la gracia de esto es cuando podemos desde Javascript interactuar con la Url. En el siguiente ejemplo, al cambiar el estado de un elemento se introduce su valor en la Url y se hace una llamada Ajaxa:

$( function() {
	$(".list_filter").change( function() {
		var e=$(this);
		var h="";

		/* Generamos el hash leyendo todos los elementos .list_filter
		(Que son checkbox) que estan seleccionados */
		$(".list_filter:checked").each( function() {
			if ( h!="" ) h+="&";

			h+=$(this).attr("id")+"=1";
			} );

		window.location.hash=h;

		/* Añadimos al hash el parámetro ria */
		if ( h!="" ) h+="&";
		h+="ria=1";

		/* Llamamos el contenidos via Ajax */
		$.ajax({
			type: "POST",
			url: window.location.href,
			data: h,
			success: function(msg){
				jQuery("#content").html( msg );
				}
	 		});

		e.blur();	
		});

	});

Leave a Reply

© Albert Coronado Calzada