Hola

Pues ahora que esta de moda esto del Ajax, aquí les traigo un sistema de login hecho con PHP y Ajax que funciona a la perfección. Es muy simple la verdad y solo es de entender como funciona básicamente, y para implementarlo solo necesitas agregarle unas 5 lineas de código con los datos de tu Base de Datos donde guardas los datos del usuario que desea iniciar sesión.

Aquí te dejo un link donde puedes ver funcionando en linea el Sistema de Login en Ajax

DEMO EN LINEA

Y bueno, una vez que te das a la idea de como queda el sistema, vamos con la explicación y el codigo fuente:

Mira iré explicando paso a paso lo que se necesita:
Primero tienes que tener en cuenta que se necesitaran 2 archivos: login.php que es donde aparecerá el formulario para que introduzca los datos el user, y otro es checar.php que será donde se verificará mediante ajax, que los datos introducidos por el user sean correctos.

El archivo login.php contiene esto:
NOTA: mas abajo lo iré explicando paso a paso

PLAIN TEXT
HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <META NAME="Language" CONTENT="Spanish">
  5. <title>Recursos Del Web - Sistema De Login (Logeo) En Ajax</title>
  6. </head>
  7. <script language="javascript">
  8.     <!--      
  9.       /*
  10.       Esta funcion lo que hace es enviar mediante Ajax, por el metodo post, los datos (user y pass) a un archivo "checar.php" para ser comparados en la base de datos. De ser correctos se dará mensaje de bienvenida, sino, entonces marcara error de usuario o password incorrectos
  11.       */
  12.       function POST_AJAX(url, variables) {
  13.         objeto = false;
  14.         //creamos el onjeto XMLHttpRequest para poder enviar datos mediante ajax
  15.         if (window.XMLHttpRequest) { // Mozilla, Safari,...
  16.            objeto = new XMLHttpRequest();
  17.            if (objeto.overrideMimeType) {
  18.             objeto.overrideMimeType('text/xml');
  19.            }
  20.         } else if (window.ActiveXObject) { // IE
  21.            try {
  22.               objeto = new ActiveXObject("Msxml2.XMLHTTP");
  23.            } catch (e) {
  24.               try {
  25.                  objeto = new ActiveXObject("Microsoft.XMLHTTP");
  26.               } catch (e) {}
  27.            }
  28.         }
  29.         if (!objeto) {
  30.            alert("No se puede crear la instancia XMLHTTP");
  31.            return false;
  32.         }
  33.             
  34.         objeto.onreadystatechange = avisos;    /*Cuando el archivo que se mando llamar mediante ajax (checar.php) regrese un resultado, entonces lo primero que se hace es mandar llamar la funcion avios(), que es donde se imprimirá mensaje de bienvenida*/
  35.         objeto.open("POST", url, true);  /* enviaremos los datos por el metodo POST hacia checar.php */
  36.         objeto.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); /*asignamos header. Esto no tiene relacion con el sistema de logeo. Solo es necesario para poder enviar los datos mediante ajax*/
  37.         objeto.setRequestHeader("Content-length", variables.length);
  38.         objeto.setRequestHeader("Connection", "close");
  39.         objeto.send(variables); /* enviamos las variables con un formato como este: "user=minombre&pass=123456&n=0" */
  40.       }
  41.       
  42.       
  43.       /* Esta funcion lo unico que hace, es acomodar los datos introducidos en el formulario a una cadena "variables" con este formato: "user=minombre&pass=123456&n=0" o este "n=0"
  44.       NOTA:
  45.       n=1 significa que el formulario esta siendo enviado por el usuario (es decir que en este punto, el ususario previamente tuvo que haber introducido su user y pass y despues presionado el boton "enviar").
  46.       n=0 significa que el formulario se esta enviando automaticamente cuando se carga la pagina. Esto lo hace para verificar si ya se habia logeado un usuario, entonces en cuanto se cargue la pagina, ya no le pedira su user y pass... ahora solo imprimirá mensaje de bienvenida. Es decir que si se logea, cierra el navegador sin haber cerrado sesion y en 3 dias por ejemplo vuelve a entrar a la pagina, lo que se le imprimirá será un mensaje de bienvenida, ya que no cerro sesion la ultima vez que salio. Esto solo dura una semana, es decir que las COOKIES de user y pass expiraran una semana despues de haber sido creadas.
  47.       */
  48.       function enviar(id_form,n) { 
  49.         if (n=='1') //si el formulario fue enviado al darle en el boton
  50.          {
  51.           document.getElementById('inp_enviar').innerHTML = '<input type="submit" class="MC_enviar" name="enviar" value="Enviar"/><img src="ajax.gif"/>';
  52.           if (vacio(document.getElementById(id_form).user.value)==false || vacio(document.getElementById(id_form).pass.value)==false)/*si alguno de los campos de user y pass estan vacios, entonces se imprime mensaje de error. NOTA: vacio() es una funcion que verifica que alla algo diferente a "" o puros espacios en blanco. Esta funcion esta mas abajo*/
  53.            {
  54.             document.getElementById('r').innerHTML = '<label class="res">Llena correctamente los campos</label>'; //"r" es un div que tenemos debajo del formulario para imprimir los mensajes de error.
  55.             document.getElementById('inp_enviar').innerHTML = '<input type="submit" class="MC_enviar" name="enviar" value="Enviar"/>';
  56.            }
  57.           else //sí SI habia llenado correctamente el user y pass, entonces se crear una cadena "variables" con los datos de user y pass con el siguiente formato: "user=minombre&pass=123456&n=0"
  58.            {
  59.             var Formulario = document.getElementById(id_form);
  60.             var longitudFormulario = Formulario.elements.length;
  61.             var variables = "";
  62.             var sepCampos = "";
  63.             for (var i=0; i<=Formulario.elements.length-1; i++)
  64.               {
  65.                variables += sepCampos+Formulario.elements[i].name + '=' + encodeURI(Formulario.elements[i].value);
  66.                sepCampos="&";
  67.               }
  68.             //indice para saber si envio formulario
  69.             variables += '&n=' + n;
  70.             POST_AJAX('checar.php', variables); //se envia el nombre del archivo donde se verificaran los datos en la BD y la cadena que se acaba de crear con los datos de user y pass, hacia la funcion POST_AJAX, que lo que hace es enviar los datos por medio de AJAX utilizando el metodo POST hacia "checar.php"
  71.            }
  72.          }
  73.         else //si el formulario fue enviado automaticamente solo para procesos
  74.          {
  75.             variables = 'n=' + n;
  76.             POST_AJAX('checar.php', variables);
  77.          }
  78.       }
  79.    
  80.       function avisos() {
  81.          if ((objeto.readyState==4) && (objeto.status==200))                     
  82.            {
  83.             document.getElementById('form').innerHTML = objeto.responseText;  //se inserta en el DIV "form" el mensaje de bienvenida que nos imprimio "checar.php"                   
  84.            }//end if
  85.       }
  86.       
  87.      enviar('login','0'); //se envia a la funcion "enviar()" el id del formulario y el valor 0 (cero); Este valor (0) nos indicará que el formulario esta siendo enviado cuando la pagina se esta cargando apenas. NO lo esta enviando el usuario
  88.     
  89.       /*Esta funcion recorre una cadena en busca de algo diferente de espacios en blanco. Si la cadena contenia puros espacios en blanco entonces regresara False*/
  90.       function vacio(q) {
  91.          for ( i = 0; i <q.length; i++ ) {
  92.            if ( q.charAt(i) != " " ) { return true }
  93.          }
  94.          return false
  95.       }
  96.     -->
  97. </script>
  98.  
  99. <style type="text/css">
  100.   #contenido{
  101.     margin:0 auto;
  102.     margin-top:50px;
  103.     width:275px;
  104.     padding:15px;
  105.     border:solid 1px #990000;
  106.     font-family:Arial, Helvetica, sans-serif;
  107.     color:#990000;
  108.   }
  109.  
  110.   #contenido label{
  111.     font-size:18px;
  112.     width:200px;
  113.   }
  114.  
  115.   .MC_input{
  116.     font-size:18px;
  117.     color:#000000;
  118.     width:180px;
  119.     height:25px;
  120.     margin-right:10px;
  121.     margin-bottom:6px;
  122.   }
  123.  
  124.   .MC_enviar{
  125.      width:80px;
  126.      height:34px;
  127.      font-size:18px;
  128.      margin-right:10px;
  129.   }
  130.  
  131.   #labels{
  132.     float:left;
  133.     width:90px;
  134.   }
  135.  
  136.   #lbl_user{
  137.     margin-top:10px;
  138.     margin-bottom:10px;
  139.   }
  140.  
  141.   #inputs{
  142.     float:right;
  143.     width:180px;
  144.   }
  145.  
  146.   #inp_enviar{
  147.     margin-bottom:10px;
  148.   }
  149.  
  150.   .res{
  151.     color:#FF0000;
  152.   }
  153.  
  154.   #texto{
  155.     font-size:12px;
  156.   }
  157.  
  158.   #texto a{
  159.     font-size:14px;
  160.   }
  161. </style>
  162.  
  164.     <div id="contenido">
  165.       <div id="texto">
  166.         <p>Este es el demo en linea del Sistema De Login en Ajax.</p>
  167.         <p>Para ver el codigo fuente y la expliaci&oacute;n ve a <a href="http://www.recursosdelweb.com/" target="_blank">Recursos Del Web</a></p>
  168.         <p>Para ver su funcionamiento, trata con los siguientes datos:</p>
  169.         <p>User=admin<br />
  170.         Password=123456 </p>
  171.       </div>
  172.       <div id="form"></div>
  173.     </div>
  174. </body>
  175. </html>

Como podrás ver, el codigo esta bien comentado, pero como sea lo explicaré:

Y bueno vamos explicandolo paso por paso. Primero como veras tenemos varias funciones JavaScript: la primera (POST_AJAX()) es esta:

PLAIN TEXT
JavaScript:
  1. /*
  2.       Esta funcion lo que hace es enviar mediante Ajax, por el metodo post, los datos (user y pass) a un archivo "checar.php" para ser comparados en la base de datos. De ser correctos se dará mensaje de bienvenida, sino, entonces marcara error de usuario o password incorrectos
  3.       */
  4.       function POST_AJAX(url, variables) {
  5.         objeto = false;
  6.         //creamos el onjeto XMLHttpRequest para poder enviar datos mediante ajax
  7.         if (window.XMLHttpRequest) { // Mozilla, Safari,...
  8.            objeto = new XMLHttpRequest();
  9.            if (objeto.overrideMimeType) {
  10.             objeto.overrideMimeType('text/xml');
  11.            }
  12.         } else if (window.ActiveXObject) { // IE
  13.            try {
  14.               objeto = new ActiveXObject("Msxml2.XMLHTTP");
  15.            } catch (e) {
  16.               try {
  17.                  objeto = new ActiveXObject("Microsoft.XMLHTTP");
  18.               } catch (e) {}
  19.            }
  20.         }
  21.         if (!objeto) {
  22.            alert("No se puede crear la instancia XMLHTTP");
  23.            return false;
  24.         }
  25.             
  26.         objeto.onreadystatechange = avisos;    /*Cuando el archivo que se mando llamar mediante ajax (checar.php) regrese un resultado, entonces lo primero que se hace es mandar llamar la funcion avios(), que es donde se imprimirá mensaje de bienvenida*/
  27.         objeto.open("POST", url, true);  /* enviaremos los datos por el metodo POST hacia checar.php */
  28.         objeto.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); /*asignamos header. Esto no tiene relacion con el sistema de logeo. Solo es necesario para poder enviar los datos mediante ajax*/
  29.         objeto.setRequestHeader("Content-length", variables.length);
  30.         objeto.setRequestHeader("Connection", "close");
  31.         objeto.send(variables); /* enviamos las variables con un formato como este: "user=minombre&pass=123456&n=0" */
  32.        }

Lo que hace esta función es crear el objeto XMLHttpRequest para poder enviar datos mediante Ajax por metodo POST. Despues asigna las cabeceras para que nada falle y envia las variables (user y pass) a checar.php donde serán recibidas para compararlas en la BD y verificar si los datos son correctos. Checa el codigo, ahi esta bien comentado linea por linea.

Despues tenemos esta funcion:

PLAIN TEXT
JavaScript:
  1. /* Esta funcion lo unico que hace, es acomodar los datos introducidos en el formulario a una cadena "variables" con este formato: "user=minombre&pass=123456&n=0" o este "n=0"
  2.       NOTA:
  3.       n=1 significa que el formulario esta siendo enviado por el usuario (es decir que en este punto, el ususario previamente tuvo que haber introducido su user y pass y despues presionado el boton "enviar").
  4.       n=0 significa que el formulario se esta enviando automaticamente cuando se carga la pagina. Esto lo hace para verificar si ya se habia logeado un usuario, entonces en cuanto se cargue la pagina, ya no le pedira su user y pass... ahora solo imprimirá mensaje de bienvenida. Es decir que si se logea, cierra el navegador sin haber cerrado sesion y en 3 dias por ejemplo vuelve a entrar a la pagina, lo que se le imprimirá será un mensaje de bienvenida, ya que no cerro sesion la ultima vez que salio. Esto solo dura una semana, es decir que las COOKIES de user y pass expiraran una semana despues de haber sido creadas.
  5.       */
  6.       function enviar(id_form,n) { 
  7.         if (n=='1') //si el formulario fue enviado al darle en el boton
  8.          {
  9.           document.getElementById('inp_enviar').innerHTML = '<input type="submit" class="MC_enviar" name="enviar" value="Enviar"/><img src="ajax.gif"/>';
  10.           if (vacio(document.getElementById(id_form).user.value)==false || vacio(document.getElementById(id_form).pass.value)==false)/*si alguno de los campos de user y pass estan vacios, entonces se imprime mensaje de error. NOTA: vacio() es una funcion que verifica que alla algo diferente a "" o puros espacios en blanco. Esta funcion esta mas abajo*/
  11.            {
  12.             document.getElementById('r').innerHTML = '<label class="res">Llena correctamente los campos</label>'; //"r" es un div que tenemos debajo del formulario para imprimir los mensajes de error.
  13.             document.getElementById('inp_enviar').innerHTML = '<input type="submit" class="MC_enviar" name="enviar" value="Enviar"/>';
  14.            }
  15.           else //sí SI habia llenado correctamente el user y pass, entonces se crear una cadena "variables" con los datos de user y pass con el siguiente formato: "user=minombre&pass=123456&n=0"
  16.            {
  17.             var Formulario = document.getElementById(id_form);
  18.             var longitudFormulario = Formulario.elements.length;
  19.             var variables = "";
  20.             var sepCampos = "";
  21.             for (var i=0; i<=Formulario.elements.length-1; i++)
  22.               {
  23.                variables += sepCampos+Formulario.elements[i].name + '=' + encodeURI(Formulario.elements[i].value);
  24.                sepCampos="&";
  25.               }
  26.             //indice para saber si envio formulario
  27.             variables += '&n=' + n;
  28.             POST_AJAX('checar.php', variables); //se envia el nombre del archivo donde se verificaran los datos en la BD y la cadena que se acaba de crear con los datos de user y pass, hacia la funcion POST_AJAX, que lo que hace es enviar los datos por medio de AJAX utilizando el metodo POST hacia "checar.php"
  29.            }
  30.          }
  31.         else //si el formulario fue enviado automaticamente solo para procesos
  32.          {
  33.             variables = 'n=' + n;
  34.             POST_AJAX('checar.php', variables);
  35.          }
  36.       }

Esta funcion lo unico que hace, es acomodar los datos introducidos en el formulario a una cadena "variables" con este formato: "user=minombre&pass=123456&n=0" o este "n=0"

NOTA:
n=1 significa que el formulario esta siendo enviado por el usuario (es decir que en este punto, el ususario previamente tuvo que haber introducido su user y pass y despues presionado el boton "enviar").
n=0 significa que el formulario se esta enviando automaticamente cuando se carga la pagina.

Esto lo hace para verificar si ya se habia logeado un usuario, entonces en cuanto se cargue la pagina, ya no le pedira su user y pass... ahora solo imprimirá mensaje de bienvenida. Es decir que si se logea, cierra el navegador sin haber cerrado sesion y en 3 dias por ejemplo vuelve a entrar a la pagina, lo que se le imprimirá será un mensaje de bienvenida, ya que no cerro sesion la ultima vez que salio. Esto solo dura una semana, es decir que las COOKIES de user y pass expiraran una semana despues de haber sido creadas.

Enseguida tenemos esto:

PLAIN TEXT
JavaScript:
  1. function avisos() {
  2.          if ((objeto.readyState==4) && (objeto.status==200))                     
  3.            {
  4.             document.getElementById('form').innerHTML = objeto.responseText;  //se inserta en el DIV "form" el mensaje de bienvenida que nos imprimio "checar.php"                   
  5.            }//end if
  6.       }

Esta función se ejecutará cuando el archivo checar.php le responda a login.php mediante ajax, es decir cuando se reciba el responseText. Y lo único que se hace es insertar en el div "form" el texto que se imprimió en el archivo checar.php, que depende de lo que alla sucedido:
-Si el usuario está queriendo iniciar sesión y los datos de user y pass fueron correctos; entonces se imprime el mensaje de bienvenida.
-Si el ususario está queriendo iniciar sesion y los datos de user y pass fueron incorrectos; entonces se imprime el mensaje de error.
-Si el formulario se acaba de terminar de cargar y ya se había logeado alguien, entonces imprime mensaje de bienvenida.
-Si el formulario se acaba de terminar de cargar y no se había logeado alguien, entonces imprime el formulario para que el user inicie sesión.

Estas son los posibles resultados que le pueden llegar en el responseText mediante Ajax.

Enseguida como podrás ver, se manda llamar a la función enviar() pasandole como parámetros el nombre del formulario y el valor de la bandera "n" que en este caso será 0 para indicar que la pagina esta enviando el formulario (NO el user) para verificar si ya se había logueado alguien.

PLAIN TEXT
JavaScript:
  1. enviar('login','0'); /*se envia a la funcion "enviar()" el id del formulario y el valor 0 (cero); Este valor (0) nos indicará que el formulario esta siendo enviado cuando la pagina se esta cargando apenas. NO lo esta enviando el usuario*/

Finalmente tenemos una función Vacio() que simplemente recorre una cadena caracter por caracter en busca de espacios en blanco, si alla algo de texto regresa true, sino regresa false. Esta solo la usamos para verificar que el user alla introducido correctamente los datos de user y pass.

PLAIN TEXT
JavaScript:
  1. /*Esta funcion recorre una cadena en busca de algo diferente de espacios en blanco. Si la cadena contenia puros espacios en blanco entonces regresara False*/
  2.       function vacio(q) {
  3.          for ( i = 0; i <q.length; i++ ) {
  4.            if ( q.charAt(i) != " " ) { return true }
  5.          }
  6.          return false
  7.       }

Despues unicamente tenemos el estilo (CSS) y el html. Notar que tenemos un div "form" vacio, que es donde se insertara la respuesta que nos llegue mediando Ajax de checar.php

Ahora vamos con checar.php
Este es el codigo:
NOTA: mas abajo lo explicare paso por paso

PLAIN TEXT
PHP:
  1. ob_start(); //esto es para habilitar el buffer de salida. Esto para poder enviar las cookies al navegador sin que te marque error
  2.  
  3. //Desconectar
  4. if ($_POST["n"]=='2') //si n=2 significa que el usuario ya habia iniciado sesion y ahora esta cerrando sesion
  5.  {
  6.   setcookie("Nick"); //borramos el valor de las cookies
  7.   setcookie("Pass"); 
  8.   $aux="'login','0'";
  9.   header("location: checar.php"); //redireccionamos a este mismo archivo nuevamente
  10.  }
  11. $n=$_COOKIE["Nick"]; //sí el usuario ya habia iniciado sesion, $n y $p contendran el user y pass de ese usuario
  12. $p=$_COOKIE["Pass"];
  13.  
  14. /*
  15. NOTA: esta sentencia SQL es un ejemplo de lo que puedes hacer para checar que sea correcto el user y pass. Yo por el momento lo haré manualmente con el user=admin y pass=123456
  17. $sql=mysql_query("SELECT * FROM usuarios1 WHERE user='$n' AND pass='$p'") or die (mysql_error());
  18. $total=mysql_num_rows($sql);
  19. if (mysql_num_rows($sql)==0) //si NO ha iniciado sesion   
  20. */
  21. if ($n!='admin' or $p!='123456') //si NO ha iniciado sesion [NOTA: esta linea borrala y sustituyela por las de arriba pero con la sentencia SQL con tu tabla y campos]
  22.   {
  23.    if ($_POST["n"]=='1') //si el user ya envio el formulario
  24.     {
  25.      $usuario=$_POST["user"];  //recivimos datos enviados desde login.php mediante post usando ajax
  26.      $contraseña=$_POST["pass"];
  27.      /*
  28.      NOTA: este seria un ejemplo de la sentencia SQL que va aqui. Por el momento yo lo hare manualmente usando user=admin y pass=123456
  29.       
  30.      $cad=mysql_query("SELECT * FROM usuarios1 WHERE user='$usuario' AND pass_md5='$contraseña'") or die (mysql_error());
  31.      if (mysql_num_rows($cad)==0) //Si es INCORRECTO el user y pass
  32.      */
  33.      if ($usuario!='admin' or $contraseña!='123456') //Si es INCORRECTO el user y pass
  34.        { 
  35.        //echo '3';  //el usuario o pass son incorrectos... imprimimos formulario y mensaje de error
  36.        echo '<form action="javascript: enviar(\'login\',\'1\');" name="login" id="login">
  37.           <div id="labels">
  38.             <div id="lbl_user"><label>Usuario</label></div>
  39.             <div id="lbl_pass"><label>Password</label></div>
  40.           </div>
  41.           
  42.           <div id="inputs">
  43.             <div id="inp_user"><input name="user" class="MC_input" id="user" type="text" maxlength="30" /></div>
  44.             <div id="inp_pass"><input name="pass" class="MC_input" id="pass" type="password" maxlength="30" /></div>
  45.             <div id="inp_enviar"><input type="submit" class="MC_enviar" name="enviar" value="Enviar"/></div>
  46.           </div>
  47.           
  48.           <div style="clear:both;"></div>
  49.           
  50.           <div id="inp_r"><label id="r" class="res">Usuario o password incorrectos</label></div>
  51.         </form>';   
  52.        }
  53.      else //si todo salio bien
  54.        {
  55.         setcookie("Nick", $usuario, time()+604800); //enviamos las cookies al nacegador [expiraran dentro de una semana]
  56.         setcookie("Pass", $contraseña, time()+604800); 
  57.         //echo '1'; //damos bienvenida
  58.         echo '<form action="javascript: enviar(\'login\',\'1\');" name="login" id="login">
  59.           <div id="inp_r"><label>Bienvenid@ '.$usuario.'</label></div>
  60.           <div id="salir"><a href="javascript: enviar(\'login\',\'2\');">Cerrar sesion</a></div>
  61.         </form>';   
  62.        }
  63.     }
  64.    else //si NO ha enviado el formulario      
  65.     { 
  66.      //echo '2'; //no ha enviado formulario... imprimimos formulario
  67.      echo '<form action="javascript: enviar(\'login\',\'1\');" name="login" id="login">
  68.           <div id="labels">
  69.             <div id="lbl_user"><label>Usuario</label></div>
  70.             <div id="lbl_pass"><label>Password</label></div>
  71.           </div>
  72.           
  73.           <div id="inputs">
  74.             <div id="inp_user"><input name="user" class="MC_input" id="user" type="text" maxlength="30" /></div>
  75.            &nbs