Como Implementar Ajax En Mi Login?

warex · #1 (**permalink**) 20/07/2010, 17:46

pues antes que nada soy muy nuevo en esto, apenas se mas o menos css y html.
mi login y registro lo consegui en un tutorial, y mi duda es que como puedo implementar ajax en mi login ?

me explico:

cuando el user le de a iniciar sesion no se refresque la pagina.
saben como puedo hacerlo ?

no es que sea un total bruto en esto, tengo experiencia en phpAdmin y se hacer consultas.

este es el resultado de mi pagina, todo menos el login es echo por mi:

http://diariogamer.webege.com/

perdonen por favor si es spam, es solo para que vean el nivel en el que estoy y me puedan puedan explicar mejor.

un salu2 a todos. y perdonen si esto no va aqui. soy staff de otro foro y se que es feo que hagan post donde no es xDDD

cesarpunk · #2 (**permalink**) 21/07/2010, 13:18

Pues si no sabes nada de ajax investiga en las FAQ para que te documentes. Ahora, si sabes lo básico de ajax como pasar datos al servidor con el objeto ajax, pues sólo te queda pasar el usuario y contraseña al servidor, validar si es correcto en la BD y simplemente devuelves 2 respuestas: "1" si el usuario existe y "0" si no existe y solo te queda preguntar en tu funcion ajax si el responseText del servidor es "1" (haces un window.location) y si es "0" mandas un mensaje de error.

No es nada fuera de lo común, claro te explico todo esto si ya sabes lo básico de ajax, suerte.

Adler · #3 (**permalink**) 21/07/2010, 17:05

Hola

Este sería el AJAX

Código Javascript:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml"lang="es" xml:lang="es">
<head>
<style type="text/css">
#frm {
background: #eee;
border: 1px solid #963;
}
 
#frm ul li {display:inline;font:10px Verdana;}
</style>
 
<script type="text/javascript">
 var ns4 = (document.layers)? true:false
var ie4 = (document.all)? true:false
var ns6 = (document.getElementById)? true:false
 
function captura_objeto(idnombre) {
    if (ns6)
    {
    return document.getElementById(idnombre);
    }
    else if (ie4)
    {
    return document.all[idnombre];
    }
    else if (ns4)
    {
    return document.layers[idnombre];
    }
    else
    {
    return null;
    }
}
 
 
function creaAjax(){
    var ajaxs = ["Msxml2.XMLHTTP","Msxml2.XMLHTTP.4.0","Msxml2.XMLH TTP.5.0","Msxml2.XMLHTTP.3.0","Microsoft.XMLHTTP"];
    var ajax = false;
    for(var i=0 ; !ajax && i<ajaxs.length ; i++){
        try{ 
            ajax = new ActiveXObject(ajaxs[i]);   // Internet Explorer
        }
        catch(e) { 
            ajax = false; 
        }
    }
    if(!ajax && typeof XMLHttpRequest!='undefined') {
        ajax = new XMLHttpRequest();  // Firefox, Opera 8.0+, Safari
    }
    return ajax;
}
 
 
function MuestraDatos(val) {
var url = "validar.php"
var ajax=creaAjax();
var cargar = captura_objeto("cargando");
var ensistema = captura_objeto("frm");
ajax.open('POST',url,true);
ajax.onreadystatechange = function() {
 
        if (ajax==null){
        alert ("Tu navegador web no soporta AJAX!");
        return;
        }
 
        if (ajax.readyState==1 || ajax.readyState==2 || ajax.readyState==3) {
                                      cargar.innerHTML= "";
                }
 
                else if (ajax.readyState==4){
                            if(ajax.status==200){   
 
                if (ajax.responseText.length == 0 || ajax.responseText == null || ajax.responseText == 'undefined') {
                    cargar.innerHTML = 'No ha sido posible';
                } else {
                    ensistema.innerHTML = 'Bienvenido ' + ajax.responseText;
                }
                            }
 
            else if (ajax.status==404) {
                alert('La dirección no existe');
            } else {
                                        alert('Se ha producido un error');
            }
        }
}
    
    ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            //ajax.setRequestHeader('Content-Length', val[0].length);   
    ajax.send('nom='+val[0].value+'&priv='+val[1].value);
            return
}
</script>
</head>
<body>
<div id="frm">
<form action="b.asp" method="post">
<ul>
<li>Nombre: <input type="text" id="nombre" name="nombre" value="" /></li>
<li>Privilegios: <input type="text" id="privilegio" name="privilegio" value="" /></li>
<li><input type="button" value="Validar" onclick="MuestraDatos(this.form)" /></li>
<li id="cargando"></li>
</ul>
</form>
</div>
</body>
</html>

Ahora crea una pagina para recibir los valores (validar.php). Estaría bien que encriptaras los valore del form antes de enviarlos

Suerte

yense · #4 (**permalink**) 21/07/2010, 20:23

bueno en el caso de que quieras que solo se refresque tu pagina solo deberias agregar esta linea cuando cumple la validacion

Código Javascript:

Ver originaldocument.location=("./");

en este caso solo lo que hace es ir a la ruta origen de la carpeta cuando tengas un archivo index
pero lo puedes cambias el "./" por ejemplo validacion.php o principal.php

lo que deseas