Por: Lunatic Lycanthrop + Otros tutoriales de Lunatic Lycanthrop + 26 de Junio del 2007
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.
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({});").
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) |
|
| 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. |
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?
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.
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
Si tienes alguna pregunta de este tutorial; puedes hacerla aqui en los foros
