¡Hola! Me parece que andas usando un bloqueador de anuncios =( ¿Nos desbloqueas? ¿Por qué?
F13

Funcion 13

Introducción a las peticiones AJAX en jQuery

Hoy os voy a hablar de Ajax y no, no es el detergente, ni tampoco el equipo de fútbol sino por supuesto de la técnica de programación que puede ser usada por JavaScript y, por supuesto, por jQuery.

Ajax es el acrónimo de Asynchronous JavaScript And XML o, dicho en la lengua de Cervantes, JavaScript y XML Asíncrono (JYXA no queda tan bien como AJAX). Esta técnica nos permite realizar peticiones asíncronas HTTP (POST o GET) a partes de nuestra aplicación, sin necesidad de recargar la página.

Ajax fue totalmente popularizado por Google en aplicaciones web como Gmail. Como he resaltado, la importancia es la de no necesitar recargar la página. Tradicionalmente, los datos en la web van desde un formulario HTML a algún script en otro lenguaje, que procesa la petición, e informa al usuario de vuelta. Con Ajax esto no es necesario puesto que la petición la realiza el propio navegador de manera asíncrona, es decir los datos se solicitan al servidor y ésto no interfiere con la carga de la página. Imaginad una página que tenga que calcular un complejo informe con datos enviados por un formulario. Mientras se genera el informe en el script (PHP por ejemplo), el usuario verá una página blanca durante todo el tiempo de espera, usando Ajax, lo habitual es cargar la página, solicitar al script que realice el informe y cuando tenga los datos, se le muestran al usuario y, mientras tanto, verá un mensaje de estado del tipo “Cargando…” o algún gif animado.

Como nota de humor, podéis ver la siguiente viñeta que encontré en esta página, y que me he tomado la libertad de traducir.

Después de la parrafada, pongámonos manos a la obra y escribamos algo de código. Primero, el código HTML en el que simplemente vamos a colocar un sencillo formulario:

<meta charset="utf-8">  
<title>Tutorial Ajax</title>  
<section id="contenedor-formulario">  
  <form id="tuto-ajax-form">
    <input type="text" id="nombre" name="nombre" placeholder="Su nombre">
    <br>
    <input type="tel" id="telefono" name="telefono" placeholder="Su teléfono">
    <br>
    <label for="horario">Hora de contacto</label>
    <br>
    <input name="horario" type="radio" checked="checked" value="Mañana"> Mañana
    <br>
    <input name="horario" type="radio" value="Tarde"> Tarde
    <br>
    <button type="submit">Enviar</button>
  </form>
</section>  
<section id="resultados"> </section>  
<section id="respuesta"></section>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  

El código no tiene mayor complicación y comprende tres secciones:

  • #contenedor-formulario: Esta es la sección en la que irá el formulario.
  • #resultados: En esta sección mostraremos el código JSON que obtenemos como respuesta a la petición que envía el formulario.
  • #respuesta: En esta sección almacenaremos la respuesta, procesada, que devuelve el servidor.

Vamos con el código jQuery:

$(document).ready(function() {
  $('#respuesta').hide();
  $('#tuto-ajax-form').submit(function(evento) {
    $('#respuesta').hide();
    evento.preventDefault();
    var datos_formulario = $(this).serialize();
    $.ajax({
      url: 'tutorial-ajax.php',
      data: datos_formulario,
      type: 'POST',
      dataType: 'json',
      success: function(datos) {
        $('#resultados').text(JSON.stringify(datos, null, 4));
        $('#respuesta').text(datos.respuesta).fadeIn('slow');
      }
    });
  });
});

Vayamos desgranando este código. Lo primero es, que como es habitual, nos metemos en una función gestora del evento ready, del objeto document. Esta es la práctica más habitual a la hora de escribir la mayoría del código de jQuery ya que implica que el código se ejecutará cuando el documento esté listo (y no antes). Posteriormente ocultamos la section con id de #respuesta.

Lo siguiente que hacemos es crear una función que escucha el evento submit del formulario #tuto-ajax-form. Esto es, cuando le damos el botón Enviar. Esta función recibe un objeto de evento, sobre el cual invocamos la función preventDefault() para evitar que el formulario sea enviado de manera tradicional.

Ahora nos toca obtener todos los datos del formulario, que los vamos a pasar a nuestro script PHP, para ello usamos la función de jQuery serialize(), que crea una cadena de datos típica, del tipo nombre=Paquito&telefono=996669966…, sobre el objeto this. Dado que estamos en una función que escucha un evento del formulario #tuto-ajax-form, this es el propio formulario. Podríamos usar

$('#tuto-ajax-form').serialize()

obteniendo los mismos resultados.

En la parte PHP, nos encargaremos de recibir (por POST), este formulario y devolver toda la matriz POST (por propósitos educativos) y una cadena procesada, que usa los datos que le hemos enviado. La forma de “devolver” datos a nuestro script, es haciendo un simple y común echo de PHP, aunque usamos la función json_encode ya que queremos que sea tratado como objeto json para poder manejarlo fácilmente.

$resultado['enviado'] = $_POST; 
$resultado['respuesta'] = 'Gracias por sus datos '.$_POST['nombre'].', le llamaremos al '.$_POST['telefono'].' en horario de '.$_POST['horario']; 
echo json_encode($resultado);  

En una aplicación real, podríamos haber insertado estos datos en una base de datos que contuviera contactos pendientes para una secretaria de una clínica dental (por ejemplo).

Puedes descubrir más sobre el resto de funciones Ajax de jQuery en http://api.jquery.com/category/ajax/

Ahora vamos a la parte más importante, y es el uso de $.ajax. Hay multitud de formas de realizar una petición Ajax aunque por costumbre, uso $.ajax, que es la genérica.

Los principales parámetros que usaremos son los siguientes:

  • url: La URL a la que vamos a hacer la petición.
  • data: Los datos que vamos a enviar. Puede ser una cadena como la anteriormente descrita, o un objeto JavaScript cuyas propiedades son las que se van a recibir en la petición. Un ejemplo de esta segunda forma:
$.ajax({
  url: 'tutorial-ajax.php',
  data: {
    nombre: 'Pepito',
    telefono: '996669966',
    horario: 'Tarde'
  },
  type: 'POST',
  dataType: 'json',
  success: function(datos) {
    $('#resultados').text(JSON.stringify(datos, null, 4));
    $('#respuesta').text(datos.respuesta).fadeIn('slow');
  }
});
  • type: Este es el tipo de petición que vamos a realizar. Puede ser POST o GET. Si te estás preguntando qué tipo debes usar, como norma general suelo decir que POST si vamos a modificar datos en nuestra aplicación y GET en caso de que estemos solicitando datos a la aplicación.
  • dataType: Este es el tipo de datos que la función espera de vuelta. En nuestro caso esperamos json aunque podríamos usar xml, html o script por ejemplo.
  • success: Aquí es donde ponemos en práctica la parte asíncrona de la petición. En success incluímos una función que será ejecutada cuando la petición sea completada y esta tenga éxito. La función recibe los datos que devolvemos en nuestro script PHP. En la función únicamente mostramos el json que nos devuelve el servidor y la respuesta procesada de nuestro sencillo script PHP.

Pues esto es todo. ¿Fácil no? Con las peticiones Ajax podemos realizar multitud de operaciones sin que el usuario realmente lo note. Abordaremos más veces las peticiones Ajax en otros artículos.

¿Queréis ver cómo funciona? No os perdáis la Demo.

Programador Front-end en First + Third y Potato. Trabajando con JavaScript y HTML5 desde el corazón de Sevilla.

Comentarios ¡Únete a la conversación!