Como usar AJAX en jQuery?

jQuery trae incorporado un "mdulo" de AJAX, que hace muy facil la utilizacin 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({});").

Parmetros
jQuery admite un gran numero de parmetros para ajax. (Hay ejemplos de cdigo despues de la tabla): Parmetro Explicacion Valores

async

Determina que la cargada del objeto ajax se sncrona o asncrona. Por lo general asncrona es ms til, ya que la forma Boolean: true por defecto sncroa puede trabar el navegador hasta que la carga este completa Permite llamar una funcin antes de mandar el objeto ajax. Es una funcion que se ejecuta cuando el llamado al ajax esta completo. Permite saber si fue existoso Se usa cuando se mandan datos a los servidores a modo de encabezado. Funcin: El unico parametro el el objeto. Funcion: Los valores que retorna son el objeto XMLHttpRequest y un string que indica el resultado. String: "application/xwww-form-urlencoded"

beforeSend

complete

contentType

funciona perfectamente Se usa para especificar datos a mandar. Estos tienen la siguiente forma: foo=bar&foo2=bar2;. Si los datos a enviar Array / String con la son un vector(array) jQuery los convierte a forma antes mencionada. varios valores con un mismo nombre (si foo["alt1","alt2"], foo="alt1"&foo="alt2";)

data

"xml": Devuelve un documento XML. "html": Devuelve HTML con texto plano, y

dataType

Indica el tipo de datos que se van a llamar. respeta las etiquetas. Si no se especifica jQuery automaticamente "script": Evalua el encontrar el tipo basado en el header del JavaScript y devuelve archivo llamado (pero toma mas tiempo en texto plano. cargar, asi que especificalo u_u) "json": Evalua la respuesta JSON y devuelve un objeto Javascript 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. Permite hacer que el objeto ajax obedezca Boolean: Por defecto o desobedezca las reglas para objetos ajax true que el usuario pone. Permite que el objeto ajax se active solo si Boolean: Por defecto la pagina a cargar se ha modificado. false

error

global

ifModified

Por defecto, cada objeto que no sea un string y sea pasado de otro documento, processData sera transformado en cadena. Para evitar que esto pase, este parametro se puede poner en false success Permite ejecutar cdigo al ser exitoso un

Boolean: Por defecto true.

Funcin: Recibe los

llamado. Permite definir un tiempo de espera antes de ejecutar un objeto ajax. Indica el mtodo que se va a usar Indica la url de la que va a cargar datos el objeto ajax.

datos que fueron llamados Nemro: Un nmero de milisegundos (ms) "GET" o "POST" String: La url local del documento.

timeout type url

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 cdigo mnimo 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 necesrio pues de otro modo el script no se ejecutara. 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("Adis, 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 aadir 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 mtodo "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 ms 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 ejecucin de este tipo de llamados. Sin embargo, hay tcnicas (hacks) que se pueden usar para usar ajax cross-domain. Lamentablemente no hablar de ellas hoy, pero puedes buscar por ajax crossdomain.