Ir al contenido principal

AJAX: Redireccionar a una nueva página después de haber iniciado sesión

Estaba trabajando en una app, la cual quería que mostrará un mensaje cada vez que el usuario por error introducía el nombre de usuario o contraseña inválida. Bueno esto no fue díficil, ya que conozco como hacerlo. Pero lo que en ese momento no habia pensado era lo contrario, si el usuario introduce correctamente sus datos, no debo mostrar ningún mensaje. Lo que debo hacer es redireccionar al usuario a su pantalla inicial luego del logeo.

No les voy a contar todo el sufrimiento que pase con esto (la solución era sencilla), porque este blog no es  mi diario. Asi que vamos con la solución de ves:

1. No te empeñes en hacerlo con PHP, ASP o cualquier otro lenguaje a nivel del servidor, hazlo con Javascript.

2. Yo use la sentencia window.location = "URL Destino".

3. Luego de haber validado correctamente los datos del usuario, has que esta funcion retorne un tag definido por ti, el cual el AJAX deberá entender y seguido de este tag, pon el URL Destino. Es como si le estuvieras enviando el mensaje de que el usuario se logeo correctamente, pero en vez de ese mensaje, envias una cadena conformada por el tag definido por ti y entendido por el AJAX, y el URL al cual quieres enviar al usuario (pagina inicial).

En código esto sería algo asi (Este ejemplo supone que conoces de AJAX).

En las funciones básicas de AJAX, específicamente en stateChanged debes tener algo como esto:
function stateChanged(xmlHttp, placeHolder) {
   if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
        if (xmlHttp.responseText != "" && xmlHttp.responseText.substring(0, 9) ! = "redirect:") {
         document.getElementById(placeHolder).innerHTML =    xmlHttp.responseText;
   
      } else if (xmlHttp.responseText.substring(0, 9) == "redirect:" && xmlHttp.responseText != "") {  
       window.location = xmlHttp.responseText.substr(9);
        }
    }


}

Como puedes ver mi tag es "redirect:" y luego uso el window.location, el cual me enviará a la página que he concatenado a mi tag. De no recibir este tag definido, el AJAX mostrará en pantalla la cadena de caracteres enviada (el mensaje de error).

Esto es una forma en la que podemos redireccionar a nuestro usuarios, utilizando AJAX en nuestra página de inicio de sesión (login page). Lo otro aqui es que agreges tu función de validación de usuario en el lenguaje que la tengas y que retorne la cadena de acuerdo al resultado de la validación.

Comentarios

  1. SD.

    Es super interesante este post, yo andaba buscando algo asi, pero yo hago las consultas en asp, si podrias por favor dar un poquito mas del detalle acerca del javascript.

    Gracias

    ResponderEliminar
  2. Que deseas saber? Dame más detalles

    ResponderEliminar
  3. Hola,estoy haciendo un trabajo para la universidad en jsp y tengo exactamente el mismo problema me he partido la cabeza tratando de que mi servlet me redureccione a una pagina y no me muestre esta en la etiqueta DIV, mando un script de vuelta y este no funciona ya no se k hacer.

    /////
    session.setAttribute("nombre", rs.getString(2));
    //no funciona
    out.println("");
    out.println("window.location.href='welcome.jsp'");
    out.println("");

    login.jsp

    ///
    function Enviar() {

    var obj = false;

    if (window.XMLHttpRequest) {
    //Cuidado aqui, el objeto XMLHttpRequest no esta disponible en versiones previas a IE7
    obj = new XMLHttpRequest();
    } else {
    return false;
    }
    obj.onreadystatechange = function () {
    if ( obj.readyState == 4 && (obj.status == 200 || window.location.href.indexOf ("http")==- 1)) {
    document.getElementById("Respuesta_Hello").innerHTML = obj.responseText;
    } else {
    document.getElementById("Respuesta_Hello").innerHTML = '';
    }
    };
    obj.open("GET", "Login?rut=" + document.getElementById("rut").value + "&pass=" + document.getElementById("pass").value , true);
    obj.send(null);

    return (true);
    }

    ResponderEliminar
  4. tengo un problema similar de redireccion que no quiero que me muestre en el div sino me redireccione pero no se que hacer gracias por el script voy a probarlo.

    ResponderEliminar
  5. ASDAD ajjajaja busque en google y aparecio tu pagina XD
    peoro no lei tu articulo porque me dava flojera, despues busque y busque alguna solucion y me tarde mucho tiempo ._. despues bobi aca y me funciono e_e

    ResponderEliminar

Publicar un comentario

Entradas populares de este blog

Consultas SQL basadas en fecha y/o hora

Manejando SQL Server 2005, me encontre que tratando hacer consultas basadas en fechas, obtenía como resultado nada (empty). Esto se debía a que no tenía claro como trabajan los tipos de dato datetime y smalldatetime. Estos dos tipos de datos son muy similares, se diferencia en que datetime es más detallado a la hora de almacenar la fecha. Estas diferencias pueden ser vistas en la siguiente tabla: Tipo Minimo Maximo Precision datetime Ene 1, 1753 media-noche Dic 31, 9999 23:59:59.997 (0.003 segundos hasta la media-noche) Más cercano 3.33 millisegundos smalldatetime Ene 1, 1900 media-noche Jun 6, 2079 23:59 (un minuto hasta la media-noche) Más cercano al mínuto Ambos, representan una fecha y hora que es igual al número de días en relación a una fecha base. En SQL Server la fecha base es la medianoche del 1 de Enero de 1900 . Observando la tabla, el tipo de dato smalldatetime, puede solo representar fechas desde esta fech...

Ajax - Tedioso Error: "Could not complete the operation due to error c00ce514"

Yo tuve de 9:30 AM hasta las 2:00 PM del día de hoy tratando de resolver este bendito error. Busque en Google y nada, asi que me tome la molestía de resolver este problema. Revise las funciones Ajax habitual, donde uno hace el statechanged y luego el open del objeto XmlHttp. Estas son las mías (lo hago para dar una referencia más clara): xmlHttp.onreadystatechange = function() { stateChanged(xmlHttp, placeHolder) } xmlHttp.open(method, url, true); Y nada. Hasta que me pude dar cuenta que en mi caso el bendito error salia porque el mensaje que queria desplegar en el "Place Holder" (no se como decirlo en español), tenía tilde y la letra Ñ-ñ. Asi que al parecer el Ajax no se lleva bien con caracteres fuera del alfabeto gringo. Te tocará a ti, decirme si realmente esto es un bugs o existe alguna forma de configurar en cualquiera de las capaz involucradas en el funcionamiento del Ajax para que este problem no se presente.