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

Error al recuperar un generador de clases COM para el componente con CLSID {############} debido al siguiente error: 80040154

Hello Everyone!! Realmente no se si este mensaje de error es genérico o específio. Por ende, voy a decirles que si están: - Usan Visual Studio 2010 - Windows 7 x64 - Y tan trantando de correr un programa desarrollado en una versión anterior al VS 2010 y que hace referencia a DLL's, entonces chequeate este video, porque te va a dar la solución: www.youtube.com/watch?v=pDtyGns6mOw Fin!!!

Como Aplicar un Patch a un Programa en Linux (How to Apply a Patch en Linux)

Los comandos aplicados en este articulo fueron realizados en la distro Kali 1.0 (based in Debian) Una de las ventajas de los programas (software) open source es que podemos descargar los paquetes fuentes de estos que son los que contienen todos los codigos fuentes. Con ellos podriamos, modificar el mismo y crear nuevas funcionalidades (features) o corregir algun fallo. Para mantener un orden o integridad, es bueno que las modificaciones hechas al paquete fuente original, se realicen en un patch file. El patch file es un archivo que debe aplicarse al codigo fuente original utilizando el comando con el nombre patch . Que contiene un archivo patch? Contiene lineas de codigo fuente de uno o mas archivos contenidos en el paquete fuente original. La extension de un archivo patch es .patch Consideraciones Cosas que hasta el momento no encontre en la Web y que debes de saber de como aplicar un Patch son: 1.  El patch se aplica al paquete fuente de la aplicacion que deseas aplicar

Pasar Valores de Ventana Hija a Padre (Pass values from Child to Parent Windows with PHP and Javascript)

En este articulo, la ventana hija es un listado de clientes, donde el usuario a darle clic a un cliente, se retorna el ID del Cliente a un objeto Input tipo  hidden y el Nombre del Cliente a un objeto Input tipo  Text . En la ventana padre agrega un hipervinculo como el siguiente: <a href="#" id="customer_search" onClick="showModalSendAndReturnValues('customers_search.php', ''); return false;">Abrir Ventana Hija</a> y crea dos objetos HTML Input: <input type="text" id="customer_name"> <input type="hidden" id="customer_id"> El evento onClick sera el que dispare la función que abre la ventana hija.  El return false , es importante ya que evita que la ventana padre se auto-refresque y nos lleve a otra pagina. La funcion showModalSendAndReturnValues , es un Javascript que puede ir en el header de tu pagina padre o en un archivo de funciones javas