Aprendiendo jQuery: Capitulo 20 (Método ajax)

Hoy vamos a ver el primer ejemplo de una llamada AJAX usando jQuery. La iremos realizando paso a paso y con un ejemplo práctico para que se pueda aprender y comprender como realizar llamadas ajax con jquery.

Vamos a partir de un formulario muy sencillo, un par de campos (nombre y mail) y que es el que usaremos para realizar la llamada a través de ajax.

Al otro lado de la llamada tendremos el archivo “test.php” que es un archivo en php que validara si los dos campos vienen o no vacíos, con lo que establecerá un output de Incorrecto o Correcto respectivamente:


El método para realizar llamadas ajax con jQuery es “$.ajax” que recibe como parámetro un objeto de JSON que va a tener todas las propiedades o todas las configuraciones necesarias para la ejecución de la comunicación asincrónica. Veamos entonces las propiedades que vamos a utilizar en nuestro ejemplo:

  • beforeSend: para esta propiedad tenemos que establecer forzosamente una función que se ejecutará antes de enviar nuestra petición, podemos establecer todas aquellas operaciones que deseamos que se realicen antes del envío.
    beforeSend: function(){
    	$('#status').html('Procesando');
    }
    
  • url: esta propiedad es de tipo cadena e indica la url a la cual vamos a hacer la petición al servidor.
    url: $('#form').attr('action')
    
  • type: esta propiedad es de tipo cadena e indica el método por el cual se va a realizar la petición entre GET o POST.
    type: $('#form').attr('method')
    
  • data: esta es la forma en que enviamos la información de nuestro formulario, se establece un objeto de JSON con los datos necesarios para que la url de la petición procese los datos, podemos utilizar dos formas de pasar los datos, por un lado podemos utilizar el método “.serialize” de jQuery que ya convertirá nuestro formulario en el formato JSON correspondiente para el envío, la otra opción es crear nosotros mismos nuestro propio objeto de JSON. La primera solución se realiza de la siguiente manera:
    data: $('#form').serialize()
    
    Si por el contrario optasemos por crear nosotros mismos nuestro objeto de JSON tendríamos que hacer lo siguiente:
    //dentro de la función del submit creamos las variables
    //que enviarán los valores
    var name, email;
    
    //dentro de beforeSend asignamos los valores del formulario
    name = document.frm.nombre.value;
    email = document.frm.mail.value;
    
    //generamos el data correspondiente
    data: {nombre:name,mail:email}
    
  • success: esta propiedad va a ser una función que reciba un parámetro y devolverá en ese parámetro la respuesta que nos esté devolviendo la url a la que realizamos la conexión. Única y exclusivamente nos devolverá la respuesta.
    success: function(resultado){
    	$('#status').html('Éxito');
    	alert(resultado);
    }
    
  • error: igual que la propiedad anterior hay que pasarle una función que recibirá un objeto XMLHttpRequest como primer parámetro, el estado por el que se produjo el error (timeout, error, abort, parsererror) y cómo último parámetro la cadena del error en cuestión.
    error: function(jqXHR,estado, error){
    	$('#status').html('Error');
    	alert(estado);
    	alert(error);
    }
    
  • complete: esta propiedad recibe igualmente una función, en este caso, con los parámetros XMLHttpRequest como la anterior y un estado del resultado de la ejecución completa. Si la operación entra en el success primero se ejecutará aquel y luego la función que le pasemos en esta propiedad. En el caso del error igual, primero la función del error y luego la función del complete. Los estados que puede devolver en el segundo parámetro pueden ser: success, notmodified, timeout, error, abort y parsererror.
    complete: function(jqXHR, estado){
    	$('#status').html('Completado');
    	alert(estado);
    }
    
  • timeout: por último para este ejemplo vamos a modificar la propiedad timeout que sirve para establecer el tiempo máximo de espera que se va a mantener antes de recibir la respuesta sin producir un error de timeout.
    timeout:10000
    

Por último tendremos que recordar que para evitar el envío cuando pulsemos el botón submit del formulario debemos establecer e.preventDefault para parar la ejecución del mismo y poder realizar nuestra petición AJAX. Un ejemplo del formulario que hemos ido componiendo lo tenemos a continuación:

Test AJAX jQuery