¿Qué quieres buscar? Buscar

» Tutoriales / AJAX en jQuery

AJAX en jQueryPor Lunatic Lycanthrop el 26 de Junio de 2007 con 319,357 visitas HTML, CSS y Javascript Otros tutoriales por Lunatic Lycanthrop.

Twittear

32

13

La librería en JavaScript jQuery es una de las más sencillas y útiles que se puedan necesitar a la hora de desarrollarun sitio web. Posee caracteristicas potentes (selectores de CSS, XPath, con el poder de javascript de crearvariables y funciones que interactuen con el documento) y es muy fácil de usar, y es a la vez muy liviana. Ademástrae 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 nosbrinda.

Requerimientos

Haber leído el tutorial de AJAXHaber leído el tutorial de uso básico de jQuery

¿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

asyncDetermina 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 existosoFuncion: Los valores que retorna son elobjeto XMLHttpRequest y un string queindica el resultado.

contentType Se usa cuando se mandan datos a los servidores a modo de encabezado.String: "application/x­www­form­urlencoded" funciona perfectamente

dataSe usa para especificar datos a mandar. Estos tienen la siguiente forma: foo=bar&foo2=bar2;. Si losdatos a enviar son un vector(array) jQuery los convierte a varios valores con un mismo nombre (sifoo["alt1","alt2"], foo="alt1"&foo="alt2";)

Array / String con la forma antesmencionada.

dataTypeIndica el tipo de datos que se van a llamar. Si no se especifica jQuery automaticamente encontrará eltipo basado en el header del archivo llamado (pero toma mas tiempo en cargar, asi que especificalou_u)

"xml": Devuelve un documento XML."html": Devuelve HTML con texto plano,y respeta las etiquetas."script": Evalua el JavaScript ydevuelve texto plano."json": Evalua la respuesta JSON ydevuelve un objeto Javascript

43

Like

Foros Blog Tutoriales Cursos Videotutoriales Comic

Publica un tutorial ¿Qué es Cristalab? Tags Ejemplos Contáctanos

o Buscar..¿Olvidaste tu usuario o clave? EntrarUsuario Contraseña registrate

errorSe 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.

globalPermite hacer que el objeto ajax obedezca o desobedezca las reglas para objetos ajax que el usuariopone.

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

processDataPor defecto, cada objeto que no sea un string y sea pasado de otro documento, sera transformado encadena. 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 fueronllamados

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. Tambienes 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.

Cómo crear un menú desplegable conJquery

Recargar pagina al cerrar colorbox onyroModal

Lector de feeds RSS en AJAX con JQuery

Envia un comentario (0)

$.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 estamanera 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, algunosnavegadores 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, quetrataré 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

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlosen el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado enCristalab y quieres

publicar tu URL y avatar?

Inicia sesión

¿No estás registrado aúnpero quieres hacerlo antesde publicar tu comentario?

Registrate

Blog Foros Tutoriales Tutoriales de Flash Ejemplos .fla Anime Videotutoriales Cursos Curso de Flash Curso de HTML Tags

Cristalab funciona gracias a Infranetworking