El botón lleva un id de "loginBtn" y este es importante ya que lo usaremos para referirnos a él desde jQuery utilizando el selector de la siguiente forma: $('#loginBtn').

Antes de ejecutar código javascript, debemos asegurarnos que el DOM (document objetc model) o el árbol de nodos del sitio, se haya cargado por completo, para ello, escribimos nuestro código para que se ejecute una vez completado:

$('#document').ready(function(){   /*   aquí nuestro código. */      });

En este caso $ es un alias para la función jQuery, y solo funcionara si tienen jQuery cargado.

En nuestro caso queremos lanzar la llamada al login por ajax una vez que el usuario haga click en el botón, para ello asociamos una función anónima al evento click del botón del formulario: $('#loginBtn').click(function(event){ /*. este código se ejecutara al hacer click en el botón . */ });

El comportamiento por defecto hará que el formulario se envié una vez hecho click en el botón, para prevenir esto escribimos la siguiente línea: event.preventDefault();
con esto el formulario no se enviara, y podemos enviar nuestros datos de forma asincrónica, para ello utilizamos la función $.ajax de jQuery, la cual configuramos con los siguientes valores:

type: "método de envió",
url: "enlce_al_archivo",
data: datos a enviar,
dataType: tipo de datos,
beforeSend: function(obj){ /*antes de enviar*/ }, success: function(json){ /*envió y respuesta con éxito*/ }, error: function(){ /*ejecutar en caso de error*/}

En nuestro caso el método de envió va a ser POST, la URL para el archivo va a ser login.php (el archivo que se encargara de procesar el login del usuario).

En data, debemos enviar un objeto JSON, puesto que es el tipo de datos que elegimos debajo, para ello, como tenemos un formulario vamos a hacer: data: $("#loginForm").serialize(), refiriéndonos al id que tiene nuestro formulario, serializamos los campos que este contenga.

También podríamos no tener un formulario, y en ese caso necesitamos armar un objeto JSON con los campos que necesitemos enviar, teniendo en cuenta los ids de nuestros campos: id="username" y id="userpass", los enviaríamos utilizando el siguiente código:

var nick=$('#username').val(); // almacenamos en nick el contenido del campo
var pass=$('#userpass').val(); //  de igual forma guardamos el pass en la variable
userdata=jQuery.parseJSON('{"usernick":"'+nick+'","userpass":"'+pass+'"}'); // generamos un objeto JSON utilizando jQuery.parseJSON pasándole los datos en forma de hash.
de esta forma en nuestra función $.ajax enviaríamos data: userdata, en lugar de data: $("#loginForm").serialize(),

El resultado es el mismo, ya que en el archivo login.php nos llegara en el array $_POST.
Para este ejemplo, vamos a agregar un texto que diga "cargando..." para indicar al usuario que los datos se enviaron y se están procesando.

También podríamos utilizar una imagen gif (pueden descargar gifs de carga desde la web http://ajaxload.info).

Una vez haya respuesta, vamos a cambiar el mensaje por un saludo en caso de loguear con éxito o un mensaje de error en caso de fallar.

Para decirle a jQuery que el usuario se ha logueado con exito, vamos  a enviar un login= 1 y un login=0 en caso de falla.
En caso de un error en el proceso, vamos a lanzar un alert al usuario diciendo que hubo un error y que refresque la web.
De esta forma nuestro bloque ajax completo queda de la siguiente forma:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<script type="text/javascript">
	$('document').ready(function(){
		$('#loginBtn').click(function(event){
			event.preventDefault();
			$.ajax({
				  type: "POST",
				  url: "login.php",
		          data: $("#loginForm").serialize(),
		          dataType: "json",
		          beforeSend: function(obj){
					$('#message').html('logueando...');
				  },
				  success: function(json){
					if(json.login==1){
						$('#message').html('Hola:'+json.name);
					}else{
						$('#message').html('no se ha podido loguear');
					}
				  },
				  error: function(objeto, iss, other){
					alert('error al intentar loguear, refresque la página e intentelo de nuevo);
				  }
 
				});
		});
 
 
	});
 
 

Ahora vamos a analizar el archivo login.php quien debe procesar el login y responder con un objeto JSON. Para ello el archivo debe enviar cabeceras del tipo json:

header('Content-type: application/json');

el siguiente código recoge el nick y el password enviado vía ajax, y procesa una función "login()" y utilizando json_encode() sobre el array, envía los datos de nuevo al navegador.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 10 Jul 2000 02:00:00 GMT');
header('Content-type: application/json');
$nick=isset($_POST['nickname']) ? $_POST['nickname']:'';
$pass=isset($_POST['password']) ? $_POST['password']:'';
 
if(login($nick, $pass)){
	$arr['login']=1;
	$arr['name']=$nick;
	echo json_encode($arr);
}else{
	$arr['login']=0;
	echo json_encode($arr);
}
 

Como recomendación al usar envios por ajax, utilizen el plugin Firebug, o Charles web debugging ya que los errores del lado del servidor no suelen verse en pantalla y es necesario analizar el tráfico para detectarlos.

El proceso del login es simplemente de ejemplo para poder explicar el procedimiento, en un sitio de produccion debera de hacerse algo mas robusto.