Comunidad de diseño web y desarrollo en internet online

Utilizando el hash con javascript y ajax

Por ivanfc0o el 25 de Marzo de 2009 con 59,995 visitas

HTML, CSS y Javascript Otros tutoriales por ivanfc0o.

Hace tiempo vimos gracias a dano que el hash puede ser útil para flash. Sin embargo, ahora que están tan de moda las aplicaciones RIA, grandes como facebook y gmail dan unos excelentes usos para el hash útilizando javascript y ajax para dar mejor experiencia al usuario.

Primero que nada.. ¿Qué es el hash?


El hash es el contenido de una url que parte desde el signo de numero(#). Ej:

Código :

Url: http://www.example.com/index.html#algo-aqui
Hash: #algo-aqui


La forma más común de utilizarse y que quizás mucho ya conocen es la de hacer un scroll en la pantalla a la etiqueta HTML con esa ID asignada.

Si en la url el hash indica, por ejemplo.. #4 (http://www.dominio.com/pagina.html#4); el navegador desplazará la pantalla hasta el elemento qué posea ese ID. Aquí tienen un ejemplo para que quede claro.

Hash con javascript



La forma de obtener el hash con javascript es la siguiente:

Código :

window.location.hash;

Sería práctico almacenarlo en una variable si lo vas a utilizar.

Código :

var jash = window.location.hash;

Ahora para empezar a trabajar con él haremos un pequeño script, quizás inútil pero servirá de referencia. Lo que haremos será mostrar una alerta con el contenido del hash que se tenga en la barra de direcciones.

Código :

// obtenemos el hash
var jash = window.location.hash;
// lo imprimimos
alert("Tu hash es: "+jash);


Ejemplos:
Enlace con hash 1
Enlace con hash 2
Enlace con hash 3
(Todos los enlaces envian al mismo archivo pero con diferente hash)

Jquery y ajax


Primero que nada aclaro, usaré jquery para evitar adentrarnos en ajax directamente, es un tip para manejar el hash y si sabes utilizar ajax, facilmente podrás adaptarlo a tus necesidades.

Una de las GRANDES desventajas de hacer cargas asycronas(ajax) es que lo hacen sin mover nada en la url y al intentar compartir la url con un amigo o por email es muy probable que el destinario no vea exactamente lo que tú estás viendo; pero por supuesto, esto puede cambiar con hash. Hagamos un experimento..

Vamos a hacer una pequeña modificación del tutorial de ryuz en el que hace cargas de archivos html con jquery.
Este es el archivo modificado y el código está a continuación:


Código :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tabs con hash y ajax</title>
<script type="text/javascript" src="/jquery.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
   //###### Código agregado para detectar si hay hash
    //obtener hash
   var jash = window.location.hash;
    // comprobamos si existe un hash valido
   if(jash.length > 1){
      // si existe buscamos el enlace que contiene ese hash en el href y cojemos su atributo "title"
      var href = $("a[@href="+jash+"]").attr("title");
      // cargamos la página que se solicita vía hash
      $("#show").load(href);
   }
   //######
   
   
   //código del menu, nada nuevo aquí
   $("#nav a").click(function(){
      var href = $(this).attr("title");
      $("#show").load(href);
   });
});
</script>
</head>
<body>
<!-- menu -->
<ul id="nav">
   <li><a href="#default" title="e1.html">Inicio</a></li>
   <li><a href="#enlace2" title="e2.html">Enlace 2</a></li>
   <li><a href="#enlace3" title="e3.html">Enlace 3</a></li>
   <li><a href="#enlace4" title="e4.html">Enlace 4</a></li>
   <li><a href="#enlace5" title="e5.html" >Enlace 5</a></li>
</ul>
<!-- contenedor donde cargaremos el html externo -->
<div id="show"></div>
</body>
</html>



No entraré en detalles respecto a la modificación, si ya leíste y entendiste el tip de cómo crear cargas html externas con jquery supongo que entenderás la modificación que hice con sólo ver el código.

Está bien, explico un poco.. Con esta modificación que hice agregamos/cambiamos el hash de la url haciendo que la url sea diferente en cada sección, y lo más importante, detectamos si existe un hash válido y mostramos la sección que se solicita. Si no lo vieron arriba aquí tienen de nuevo el enlace. De esta manera te puedo enviar directamente a la sección numero 4.

Tengo que aclarar que aunque el hash puede tener un uso muy potente para seo, como podrán ver en este enlace (vídeo en ingles); no debería ser el remplazo de las urls amigables y permalinks básicos que ya todos conocemos. Google NO toma en cuenta el hash al momento de indexar, por lo que estas urls..

Código :

http://www.example.com/seccion/#ds
http://www.example.com/seccion/
http://www.example.com/seccion/#Com45
http://www.example.com/seccion/#445532q
http://www.example.com/seccion/#file.html
http://www.example.com/seccion/#6


Son exactamente la misma sección para google y demás motores de búsqueda. Sólo aclaro.

Bueno, es todo.. Espero les haya sido útil, estos sólo fueron unos ejemplos básicos pero se pueden hacer cosas muy interesantes con el hash para dar interactividad y usabilidad a tus aplicaciones.

Les toca experimentar. :wink:

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Envia un comentario (17)

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate