Ajax Con Jquery
En este tutorial vamos a estudiar el uso de jQuery para AJAX, con las facilidades y parametros de opción que nos brinda.
Requerimientos
Haber leído el tutorial de AJAX
Haber 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
async Determina que la cargada delobjeto 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 sifue 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 unvector(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": Devuelveun 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.
globalPermite 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 datosel 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({...
Regístrate para leer el documento completo.