Realidad IT

Una aplicacion web full ajax, debe manejar los botones de navegación y favoritos, te explico como

Creo que hay que saber que cuando uno decide encarar el desarrollo de un sitio, o aplicación web, implementar ajax no es simplemente tomar una API de javascript y usarla. Hay factores muy importantes a tener en cuenta, y conviene encararlos antes de iniciar el desarrollo porque una vez que la web app esté lista se va a tornar mas dificil realizar los cambios, lo positivo es que las consideraciones no son tantas:

1. Debe funcionar el Historial (Back & Foward).
2. Se deben poder guardar secciones en Favoritos, parece tonto lo que digo, pero cuando se actualiza una parte de una página, la URL no cambia, y si yo quiero guardar el estado actual no voy a poder.
3. Debo tener claro que vínculos u onclicks llevaran a una recarga completa o solo la recarga de una sección.
4. Debo tener una sola función que se dedica a hacer los envíos sincrónicos
5. Debo tener cuidado con los plugins que voy agregando que no afecten a la navegación.
6. Especial cuidado con el envío de formularios (submits)

La mayoría de los puntos mencionados tienen que ver con que por desgracia los navegadores no registran los cambios de una porción de una página en el historial y eso hace que que la funcionalidad básica del buscador no funcione y que los usuarios avanzados de internet se terminen frustrando al usar tu sitio, imaginate que si estoy en Facebook, estoy viendo fotos y de repente quiero volver a ver la anterior, preciono el botón Back del navegador y me lleva a Yahoo por ejemplo, no estaría bien, no?

La mayoría de los plugins que implementan ajax tienen por lo menos una extensión que maneja dicha navegación. Por ejemplo para los que usan JQuery, existe el plugin jquery.history.js

Voy a explicar como funciona dicho plugin brevemente, porque aunque parece una cosa facil, es bastante confuso cuando uno pone manos en la masa:

Para empezar, el plugin registra la página agregando un link con un anchor de seccion "#" a cada link que requiera ser registrado en el historial. Esto se logra llamando a la siguiente función en el evento onclick

     $.historyLoad(href);

Hasta acá viene fácil, de hecho, yo pensé que eso era todo, pero que pasó? A pesar de que quedan todas mis acciones registradas en el historial, cuando le daba al botón back, siempre apareciá la misma página, no me traía el contenido anterior.

El plugin registraba en el historia los anchors pero no el contenido. Por lo tanto, tuve que agregar un código que cuando uno presionaba back se recarga la sección que queremos ver, esto el plugin lo permite hacer utilizando una callback function.

$.historyInit(pageload, "index.php");

function pageload(hash) {
//la siguiente línea llama a mi funcion ajax, el hash son los parametros a enviar
     HistoryBackContentLoader(hash);
}

Acá les muestro la solución completa que armé para que puedan unir las piezas:

function pageload(hash) {
 HistoryBackContentLoader(hash);
}

$(document).ready(function(){
     $.historyInit(pageload, "index.php");
});

function HistoryBackContentLoader(parametros)
{
     $('#ajaxcontent').attr("innerHTML", "");
 $('body').css('cursor','wait');

     $.ajax({
          async:     true,
          success: resultadoDetalleOK,
          data:      parametros,
          url:   "ajax_accion.php",
          type:      "post",
          dataType:  "json"
     });
     return false;
};

function resultadoDetalleOK(responseText) {
     $('body').css('cursor','default');
     var oMensaje = $('#ajaxcontent');
     if (responseText.Ok)
     {
          mostrarMensaje(oMensaje, responseText.Datos);
          AnchorLink('#ajaxcontent a');
          AnchorLink('.historial');
     }
     else
     {
          responseText.Mensaje = 'Lo sentimos. NO se han podido obtener los datos.';
          mostrarMensaje(oMensaje, responseText.Mensaje);
     }
}

function AnchorLink(id)
{
     $(id).each(function() {
          if( $(this).attr('href') ) {
               var aHREF = $(this).attr('href').split('?');
               if(aHREF.length > 1) {
                    $(this).attr('href', $(this).attr('href') + "#" + aHREF[1]);
                    $(this).click(function(){
                         $.historyLoad(aHREF[1]);
                         return false;
                    });
               }
          }
     });
}

Si vieron el código y lograron comprenderlo, podrán ver que la función AnchorLink que escribí, aplica el $.historyLoad a aquellos objetos que me interesan que queden guardados en el historial. Estos son: '#ajaxcontent a': Todos los links cargados dinamicamente y '.historial' todos los objetos que tengan definida la clase historial, estos pueden ser "div" pero entonces para que funcione tienen que agregarle al div una propiedad href (no estandar) que indica la url destino.

Adicionalmente, para saber que información es la que se debe recargar, guardo en el "#" los mismos parámetros del pedido original, por ejemplo, si dinamicamente llamo a index.php?lang=es&photos=yes, la url con historial sería index.php?#lang=es&photos=yes

Espero que les haya servido, éxito con sus páginas!