Inicio de Sesion en PHP y AJAX

zextor · #1 (**permalink**) 05/02/2008, 20:46

Estimados, Resulta que estoy intentando hacer un módulo de inicio de sesion en php y ajax, resulta que cuando ejecuto el código en local, no me aparece en mensaje de que si fue correcto o nombre de usuario no válido, nose que podrá ser, tampoco me muestra un error, bueno dejo el código aquí para ver si me pueden hechar un ayudadita...

ajax.js

Código:

function getXMLHTTPRequest() {
try {
req = new XMLHttpRequest();
} catch(err1) {
  try {
  req = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (err2) {
    try {
    req = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (err3) {
      req = false;
    }
  }
}
return req;
}

var http = getXMLHTTPRequest();

function logear()
{
  var v1,v2;
  v1=document.getElementById('usuario').value;
  v2=document.getElementById('clave').value;
  http.onreadystatechange=validarDatos;
  http.open("POST","login2.php",true);
  http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;');
  http.send("usuario="+encodeURIComponent(v1)+"&clave="+encodeURIComponent(v2));
}

function validarDatos()
{
  
    if(http.readyState==4)
    {
        if(http.status==200)
       {
             var miTexto = http.responseText;
             document.getElementById('Texto').innerHTML = miTexto; 
           
       }
      
    }else{
         document.getElementById('Texto').innerHTML = "Procesando..."; 
    }
}

Conectar.php

Código PHP:

  <?php 
 function Conectarse() 
 { 
    if(!($con=mysql_connect("localhost","us","***"))) 
    { 
           echo "Error al conectar a la Base de Datos."; 
           exit(); 
    } 
    if (!mysql_select_db("evalpinguinos",$con)) 
    { 
         echo "No se encuentra la Base de Datos."; 
         exit(); 
     } 
     return $con; 
} 
?>

login.php

Código PHP:

  <html> 
<head> 
<link href="sislog.css" rel="stylesheet" type="text/css"> 
 
<title>Sistema web de Logros Academicos de Jardines Infantiles</title> 
<script language="javascript" type="text/javascript" src="ajax.js"></script> 
</head> 
<body> 
   <div id="contenedor"> 
      <div id="login">   
          <div id="formu"> 
             <form method="post" name="logeo" size="15"> 
                <div class="etiqueta">Nombre de Usuario:</div> 
                <div class="cajas"><input type="text" name="usuario" size="15" /></div> 
                <div class="etiqueta">Contraseña:</div> 
                <div class="cajas"><input type="password" name="clave" size="15" /></div> 
                <div align="left"><input type="submit" name="aceptar" class="button" value="Aceptar" onsubmit="logear()"></div> 
             </form> 
          </div> 
          <div class="imagen"> 
             <img src="pg.gif" width="100" heigth="100" /> 
          </div> 
             <div class="texto-login"><p><strong>Identificación de Usuario</strong><br /> 
                Ingrese nombre de usuario y contraseña.</p> 
             </div> 
      </div> 
      <div id="Texto"></div> 
   </div> 
  
</body> 
</html>

login2.php

Código PHP:

  <?php 
   include("Conectar.php"); 
   $con=Conectarse(); 
   header("Content-type: text/html; charset=utf-8"); 
   $user=utf8_decode($_POST['v1']); 
   $clave=utf8_decode($_POST['v2']); 
   $resultado=mysql_query("select Nombre_usuario_pk,Contrasenia from usuario where Nombre_usuario_pk='$user'",$con); 
   if($row = mysql_fetch_array($resultado)) 
   { 
          if($row["Contrasenia"]==$clave) 
          { 
              echo utf8_encode("Usuario Válido"); 
           } 
           else{ 
              echo utf8_encode("Password incorrecto"); 
             
           } 
       
    } 
    else{ 
          echo utf8_encode("Usuario no existe en la base de datos"); 
    } 
 
   mysql_free_result($resultado); 
   mysql_close($con); 
?>

ZiTAL · #2 (**permalink**) 06/02/2008, 01:59

No puedes llamar en 2 funciones diferentes al mismo:

Código:

var http = getXMLHTTPRequest();

metelo en cada funcion asi:

Código:

var http = new getXMLHTTPRequest();

suerte!!!

zextor · #3 (**permalink**) 06/02/2008, 20:49

Zital, muchas gracias por la respuesta, pero tu podrias probarlo en forma local, ya que sigue sin mostrarme el mensaje el div llamado Texto, la verdad que nose que podrá ser, pero he probado varias cosas y sigo sin recibir resultados...

saludos!!!

ZiTAL · #4 (**permalink**) 07/02/2008, 01:40

Para debugear mete alert's y usa el add-on firebug para firefox.

zextor · #5 (**permalink**) 08/02/2008, 16:52

Gracias Zital, voy a probar a depurar el còdigo con esa herramienta,

tendrás por ahi algun tutorial.

saludos

ZiTAL · #6 (**permalink**) 08/02/2008, 18:16

tutorial de que de ajax?

http://librosweb.es/ajax/index.html

http://www.w3schools.com/ajax/default.asp

zextor · #7 (**permalink**) 08/02/2008, 19:33

no, me referia a tutorial de la herramienta para depurar...

Bueno he estado depurando el còdigo, pero realmente estoy desesperado no encuentro el error y no se por que el readyState nunca llega a 4, alguien que me ayude porfa :D

Saludos

ZiTAL · #8 (**permalink**) 09/02/2008, 03:01

Código:

function validarDatos()
{
  
    if(http.readyState==4)
    {
        if(http.status==200)
       {
             var miTexto = http.responseText;
             document.getElementById('Texto').innerHTML = miTexto; 
           
       }
      
    }else{
         document.getElementById('Texto').innerHTML = "Procesando..."; 
    }
}

aqui no tienes ningun evento ajax por lo tanto no te entrara nunca en la parte readyState, que es lo que quieres hacer aqui

zextor · #9 (**permalink**) 09/02/2008, 18:29

Es increible que no me quiera resultar jajaja, soy un inutil para esto :P

aqui pongo el código que lo modifique pero me arroja un error.

ajax_old.js

Código:

function ConstructorXMLHttpRequest()
{
   if(window.XMLHttpRequest)
   {
      return new XMLHttpRequest();
   }
   else if(window.ActiveXObject)
   {
      var versionesObj = new Array('Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0', 'Msxml2.XMLHTTP.3.0', 'Msxml2.XMLHTTP', 'Microsoft.XMLHTTP');
         for(var i=0;i<versionesObj.length;i++)
         {
             try
             {
                return new ActiveXObject(versionesObj[i]);
             }
             catch(errorControlado)
             {
             }
          }
     }
     throw new Error("No se pudo crear el objeto XMLHttpRequest");
}
function objetoAjax()
{
  this.objetoRequest = new ConstructorXMLHttpRequest();
}

function ajaxPost(url)
{
    var v1,v2, contenedor;
    contenedor = document.getElementById('Texto');
    v1=document.getElementById('usuario').value;
    v2=document.getElementById('contra').value;
    cadena="usuario="+v1+"&clave="+v2+"&nocache="+Math.random();
    var objetoActual=this;
    this.objetoRequest.open('POST',url,true);
    this.objetoRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    this.objetoRequest.onreadystatechange = 
            function()
            {
                  switch(objetoActual.objetoRequest.readyState)
                  {
                       case 1:
                          objetoActual.cargando();
                       break;
                       case 2:
                           objetoActual.cargado();
                       break;
                       case 3:
                           objetoActual.interactivo();
                       break;
                       case 4:
                           objetoActual.completado(objetoActual.objetoRequest.status,
                                                   objetoActual.objetoRequest.statusText,
                                                   objetoActual.objetoRequest.responseText,
                                                   objetoActual.objetoRequest.responseXML);
                       break;
                 }
             }
            this.objetoRequest.send(cadena);
}

function objetoRequestCargando() {} 
function objetoRequestCargado() {} 
function objetoRequestInteractivo() {} 
function objetoRequestCompletado(estado, estadoTexto, respuestaTexto, respuestaXML) {}

//Definimos la función de recoger información. 
objetoAjax.prototype.coger = ajaxPost ; 
//Definimos una serie de funciones que sería posible utilizar y las dejamos en blanco en esta clase. 
objetoAjax.prototype.cargando = objetoRequestCargando;
 objetoAjax.prototype.cargado = objetoRequestCargado;
 objetoAjax.prototype.interactivo = objetoRequestInteractivo; 
objetoAjax.prototype.completado = objetoRequestCompletado;

y este es el login.html

Código:

<html>
<head>
<title>Sistema web de Logros Academicos de Jardines Infantiles</title>
<link href="sislog.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/javascript" src="ajax_old.js"></script>
<script language="JavaScript" type="text/javascript">
   var PeticionAjax01 = new objetoAjax();
   PeticionAjax01.completado = objetoRequestCompletado01;
   function objetoRequestCompletado01(estado,estadoTexto,respuestaTexto,respuestaXML)
   {
        document.getElementById('Texto').innerHTML=respuestaTexto;
   }
</script>
</head>
<body>
   <div id="contenedor">
      <div id="login">  
          <div id="formu">
             <form method="post" name="formulario" size="15">

                <div class="etiqueta">Nombre de Usuario:</div>
                    <div class="cajas"><input type="text" id="usuario" name="Nom" size="15" /></div>
                <div class="etiqueta">Contraseña:</div>
                <div id="Pass">
                   <div class="cajas"><input type="password" id="contra" name="clave" size="15" /></div>
                </div>
            
                <div align="left"><input type="submit" onclick="PeticionAjax01.ajaxPost('login2.php')" name="aceptar" class="button" value="Aceptar"></div>
          
             </form>

          </div>
          <div class="imagen">
             <img src="pg.gif" width="100" heigth="100" />
          </div>
             <div class="texto-login"><p><strong>Identificación de Usuario</strong><br />
                Ingrese nombre de usuario y contraseña.</p>
             </div>
      </div>

      <div id="Texto"></div>
   </div>
 
</body>
</html>

me arroja este error:

PeticionAjax01.ajaxPost is not a function

la verdad que creo que necesito leer más sobre ajax, pero si ustedes me lo pudieran aclarar que estoy haciendo mal se los agradeceria bastante.

Gracias

Saludos