AJAX en jQuery

La librería en JavaScript jQuery es una de las más sencillas y útiles que se puedan necesitar a la hora de desarrollar un sitio web. Posee caracteristicas potentes (selectores de CSS, XPath, con el poder de javascript de crear variables y funciones que interactuen con el documento) y es muy fácil de usar, y es a la vez muy liviana. Además trae incorporadas funciones adicionales, como AJAX, manipulacion del DOM y deteccion de navegadores.

En este tutorial vamos a estudiar el uso de jQuery para AJAX, con las facilidades y parametros de opción que nos brinda.

Requerimientos

¿Como usar AJAX en jQuery?

jQuery trae incorporado un "módulo" de AJAX, que hace muy facil la utilización de este. Accedemos a la funcion de la siguiente manera:

$(document).ready(function(){
        $.ajax({
        });
});

Este se puede poner de la forma expuesta arriba o en una variable (como en "myajax= $.ajax({});").

Parámetros

jQuery admite un gran numero de parámetros para ajax. (Hay ejemplos de código despues de la tabla):

Parámetro	Explicacion	Valores
async	Determina que la cargada del objeto ajax se síncrona o asíncrona. Por lo general asíncrona es más útil, ya que la forma síncroa puede trabar el navegador hasta que la carga este completa	Boolean: true por defecto
beforeSend	Permite llamar una función antes de mandar el objeto ajax.	Función: El unico parametro el el objeto.
complete	Es una funcion que se ejecuta cuando el llamado al ajax esta completo. Permite saber si fue existoso	Funcion: Los valores que retorna son el objeto XMLHttpRequest y un string que indica el resultado.
contentType	Se usa cuando se mandan datos a los servidores a modo de encabezado.	String: "application/x-www-form-urlencoded" funciona perfectamente
data	Se usa para especificar datos a mandar. Estos tienen la siguiente forma: foo=bar&foo2=bar2;. Si los datos a enviar son un vector(array) jQuery los convierte a varios valores con un mismo nombre (si foo["alt1","alt2"], foo="alt1"&foo="alt2";)	Array / String con la forma antes mencionada.
dataType	Indica el tipo de datos que se van a llamar. Si no se especifica jQuery automaticamente encontrará el tipo basado en el header del archivo llamado (pero toma mas tiempo en cargar, asi que especificalo u_u)	"xml": Devuelve un documento XML. "html": Devuelve HTML con texto plano, y respeta las etiquetas. "script": Evalua el JavaScript y devuelve texto plano. "json": Evalua la respuesta JSON y devuelve un objeto Javascript
error	Se ejecuta si ocurre un error al llamar el archivo. Devuelve 3 parametros: El objeto, un string con el error, y un objeto adicional de error, si este ocurre.
global	Permite hacer que el objeto ajax obedezca o desobedezca las reglas para objetos ajax que el usuario pone.	Boolean: Por defecto true
ifModified	Permite que el objeto ajax se active solo si la pagina a cargar se ha modificado.	Boolean: Por defecto false
processData	Por defecto, cada objeto que no sea un string y sea pasado de otro documento, sera transformado en cadena. Para evitar que esto pase, este parametro se puede poner en false	Boolean: Por defecto true.
success	Permite ejecutar código al ser exitoso un llamado.	Función: Recibe los datos que fueron llamados
timeout	Permite definir un tiempo de espera antes de ejecutar un objeto ajax.	Núemro: Un número de milisegundos (ms)
type	Indica el método que se va a usar	"GET" o "POST"
url	Indica la url de la que va a cargar datos el objeto ajax.	String: La url local del documento.

Ejemplos

Ahora, despues de ver esa cantidad de parametros tan útiles, pasemos a la parte cool: Ver como se usan

$.ajax({
        url: "mi-pagina-cool.html",
        success: function(datos){
            alert(datos);
        }
});

El código mínimo que necesitamos para hacer funcionar ajax. Sencillo y efectivo.

$.ajax({
      type: "GET",
      url: "test.js",
      dataType: "script"
      async:false;
});

Vamos a cargar un JavaScript, usando los parametros type, url, dataType y async. DataType es necesário pues de otro modo el script no se ejecutaría. Tambien es bueno usar async en "false" si el script es vital: Asi el usuario no podra interactuar hasta que se cargue.

$.ajax({
        type: "POST",
        url: "formulario.php",
        data: "nombre=Juan&apellido=Luna",
        success: function(datos){
       alert( "Se guardaron los datos: " + datos);
      }
});

Insertamos datos en una pagina de php de forma muy sencilla.

$.ajax({
        url: "introduccion-a-jquery.htm",
        async:true,
        beforeSend: function(objeto){
            alert("Adiós, me voy a ejecutar");
        },
        complete: function(objeto, exito){
            alert("Me acabo de completar")
            if(exito=="success"){
                alert("Y con éxito");
            }
        },
        contentType: "application/x-www-form-urlencoded",
        dataType: "html",
        error: function(objeto, quepaso, otroobj){
            alert("Estas viendo esto por que fallé");
            alert("Pasó lo siguiente: "+quepaso);
        },
        global: true,
        ifModified: false,
        processData:true,
        success: function(datos){
            alert(datos);
        },
        timeout: 3000,
        type: "GET"
});

Un llamado ajax con todos los parametros (menos data, ya que no iba a mandar datos) y con sus opciones en default. Verdad que se puede hacer mucho?

Opciones por defecto para los objetos ajax

jQuery tambien nos da la opcion de añadir parametros por defecto a todos los ajax que carguemos, con la funcion $.ajaxSetup y los parametros ya vistos:

     $.ajaxSetup( {
      url: "/xmlhttp/",
      type: "POST",
      contentType: "application/xhtml+xml"
     } );

Esto haria que los ajax llamados buscaran sus archivos a cargar en la ruta "/xmlhttp/", con método "POST" y los jalara como "application/xhtml+xml". De esta manera se puede ahorrar mucho tiempo y espacio al no tener que escribir lo mismo en todos los llamados.

Problemas

El problema más frecuente que ocurre con ajax es cuando se trata de cargar por este una pagina de otro servidor. Por cuestiones de seguridad, algunos navegadores no permiten la ejecución de este tipo de llamados. Sin embargo, hay técnicas (hacks) que se pueden usar para usar ajax cross-domain. Lamentablemente no hablaré de ellas hoy, pero puedes buscar por ajax cross-domain.

Bueno, este fue todo el tutorial de ajax por jQuery por el momento. Existen otras funciones, como $.post() y $.get(), que son mas sencillas pero menos c00l, que trataré en otro tuto.

Por si acaso, pueden revisar la documentación oficial de ajax en jQuery (link en inglés): http://docs.jquery.com/Ajax

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.