Sitio web con Ajax totalmente, y funcionando los botones de atrás y adelante del navegador – Ajax back button

Saludos,

Yo soy de los que abusa de usar ajax, y a lo mejor deba hacerle caso a alguien al respecto y usarlo solamente según se requiera en cosas específicas. Pero….
Me gusta intentar y verificas las opciones, entonces quise seguir manejando un sitio completo con ajax, pero tratando de no romper el esquema normal de la navegación web usando los botones atrás y adelante para desplazarnos entre ellas, así se va generando el historial y también tener la posibilidad de entrar a una página directamente desde la barra de direcciones.

Como no he querido usar nada de frameworks y cosas por el estilo, he utilizado la implementación que ha construido Cristian Martínez que tiene publicado en su blog en el post «Controlar el botón de atrás o botón adelante del Navegador en Javascript AJAX (Historial de navegación)«, donde nos presenta de forma clara como lo ha hecho y un ejemplo del mismo funcionando (en varios navegadores).

No voy a explicar los cómo y porqués de lo realizado pues ya está hecho, solo pretendo compartir la forma de uso que le doy (adaptación o implementación), y que sirva como otro ejemplo más para darle una idea a alguien, y anotar que yo solo lo uso para llamar páginas web dentro de todo el sitio web, pues cuando toque usar formularios y guardado de cosas, voy a usar mi forma normal (ajax) de hacerlo y efectivamente sin generar historial, ni registros en botones de atrás y adelante.

Entonces, estos son los archivos usados, tal cual:

./ajax_back

scripts/

ajax.js

controlador.js (este tiene lo más importante)

cargando.gif

estilos.css

historial.html

hola.php

hola2.php

inicio.php (página principal)

resultado_busqueda_ajax.php (busca al hacer click en los botones, o digitar url)

y esta es la implementación de lo mostrado anteriormente funcionando.

Pueden descargarlo completo, archivo ajax_back.zip.

Le agradezco a Cristian el haberme permitido compartir esto. Seguro a mucha gente le va a servir.
Cualquier duda o error comentar para corregir.

Nota: he tratado de hacer este ejemplo accesible (aún le falta.. ya saben que es complicado), verificándolo con:

http://www.tawdis.net
http://www.sidar.org/hera/index.php.es
http://www.accesible.com.ar
http://validator.w3.org

9 respuestas a «Sitio web con Ajax totalmente, y funcionando los botones de atrás y adelante del navegador – Ajax back button»

  1. Felicidades por hacer ese ejemplo, y compartirlo. Si quieres, puedo alojar el ejemplo en nuestro server, para que siempre esté accesible.

    Como critica constructiva, no olvidar que Ajax debería ser un complemento para las webs así que al ejemplo, le añadiría links html normales, para que sin javascript siguiera funcionando la página (USABILIDAD).

    Añadir, que de cara a aplicaciones web (programas) al estilo gmail u google Docs, el javascrpt pasa a ser obligatorio, pues sin el no podríamos hacer nada.

    Por otro lado quisiera dar una recomendación, las peticiones ajax, suelen dar ciertos problemas como por ejemplo:
    * Algunas peticiones se pierden.
    * Dos peticiones consecutivas al ser asíncronas pueden llegar en orden aleatorio, primero la segunda y luego la primera, de tal forma que el usuario recibe algo que no espera.
    *Se hace necesario controlar peticiones perdidas, que hacer si una petición se pierde? volvemos a poner el contenido anterior, relanzamos la petición automáticamente pasados unos segundos?

    * Adicionalmente la respuesta si es html y es muy compleja ( tabla html con un listado de 10 productos) Al retardo de la petición hay que esperar el tiempo que el navegador sube a memoria dicho html, mas el tiempo de inserción del html en el document. Este proceso puede ser bastante lento, cuando la respuesta es un poco grande. puede tardar 15 segundos. Suficiente como para que tarde mas que refrescar toda la página entera (gracias a la cache de las imágenes)

    * Y por ultimo el gran problema, que pasa si solo un trozo de la web es ajax? que el sistema de historial, se pierde tras pulsar el primer enlace html en exploradores como Explorer 6,7,…

    Así que recomiendo que SÓLO SE USE SI REALMENTE ES NECESARIO…

    Por lo demás AJAX es perfecto, y para sistemas de votaciones,

    saludos.
    Cristian Maritinez.

      1. Temporalmente (entre 8 y 15 de abril, estamos mudando el servidor donde están alojados ), no funcionan los link’s de lo mencionado funcionando.

        Hoy 15 de Abril, ya se encuentra funcionando nuevamente, 🙂

  2. El boton de actualizar o F5 elimina todo contenido asincronico…. creo que es tan importante como controlar los eventos de atras y adelante. Es una gran problema que aun nadie resuelve y los sitsemas con ajax se vuelven inviables… sorry

  3. Temporalmente (entre 20 de diciembre 2010 y finales de marzo 2011, estamos mudando el servidor donde están alojados ), no funcionan los link’s de lo mencionado funcionando.
    Ya les informaré cuando esté activo, mil disculpas..

  4. Hola he leido el blog de Cristian en buca de informacion acerca del manejo del historial de navegacion con ajax, si fueran tan amable alguien de colgar el ejemplo en otro servidor para yo poderlo descargar. de antemano gracias

Replica a Ismael Ramos Cancelar la respuesta