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

Publicado: marzo 9, 2010 en Aplicaciones Web

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

Anuncios
comentarios
  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.

    • mrkents dice:

      claro, puedes alojarlo sin ningún problema, y gracias por las sugerencias.
      Estamos en contacto.

      • mrkents dice:

        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. Rodrigo dice:

    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. […] Posts Más Vistos Permitir Conexión remota a servidor MysqlEncontrar claves de WiFi o Wi-Fi con cifrado WEP en Ubuntu 10.04sudoers debianPostgreSQL + PHP + Gnu/LinuxSaber que equipos están conectados a mi red con overlook-fingDBDesigner and Geany in Ubuntu 8.04Sitio web con Ajax totalmente, y funcionando los botones de atrás y adelante del navegador – Ajax b… […]

  4. mrkents dice:

    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..

  5. Ismael Ramos dice:

    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

  6. rulo dice:

    buen ejemplo, pero no puedo descargar el archivo

  7. tengo un proyecto similar y me gustaria bajar el archivo, pero no va.podrian solucionarlo??? gracias.

  8. RIA dice:

    Cabe mencionar que en el ejemplo proporcionado por “controlz.net” existen varios fallos prioritarios para la web…

    entre ellos, está el hecho de que cuando realizas una busqueda y cierras la pestaña de exploración, al abrir nuevamente el sitio, este permanece en la última instancia como si tratara de una sesión…

    la prueba la hice con 2 URL

    http://sintoner.com/#Garantía de devolución

    http://sintoner.com/#epson

    esto indica una fuerte problematica al momento de compartir vínculos… pues me llevaria a la última instancia en caso de existir o a la página principal en caso de no existir, pero nunca al línk compartido… espero puedan tomarlo en cuenta.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s