DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
28-08-2014

AJAX por sus siglas en inglés de Asynchronous JavaScript And XML no es más que una tecnología que permite crear aplicaciones que mantienen una comunicación asíncrona con el servidor; crear un AJAX con jQuery resulta de lo más simple pero a su vez potente debido a la gran cantidad de posibilidades que ofrece y lo sencillo que resulta integrarlo con otras secciones de código (ya que a la final es JavaScript).

¿Qué nos ofrece AJAX?

Con AJAX podemos hacer multitud de cosas para crear páginas interactivas sin la necesidad de refrescar todos los elementos de la página:

¿Pero... para que podemos usar AJAX?

Con AJAX ninguna de las acciones anteriores requiere de una carga completa de la página (como lo tendría que hacer si no utilizaras AJAX), simplemente refrescar secciones del documento.

Parámetros de jQuery.ajax()

jQuery.ajax() maneja una gran cantidad de parámetros que permiten configurar el AJAX de muchas maneras acorde a nuestras necesidades; pero entre los que considero más importantes podemos mencionar los siguientes:

Ejemplos

En esta sección veremos un conjunto de ejemplos para demostrar algunas de las funcionalidades del AJAX y ejemplificando su uso en el camino; a lo largo de los ejemplos referenciamos algunos archivos a través de su URL:

Ejemplo de un jQuery.ajax() sencillo

El AJAX más sencillo que considero que podemos crear con jQuery debería ser algo muy similar al siguiente script:


var url="test.php";

$.ajax({
type : "GET",
url : url,
success : function(data) {
console.log("data",data);
},
error : function(objXMLHttpRequest) {
console.log("error",objXMLHttpRequest);
}
});

O inclusive podemos obtener la página directamente:


var url="pagina.html";

$.ajax({
type : "GET",
url : url,
success : function(data) {
console.log("data",data);
},
error : function(objXMLHttpRequest) {
console.log("error",objXMLHttpRequest);
}
});

En ambos casos, si miramos la consola de desarrolladores, veríamos algo como esto:

data <html>
<head>
<title>Mi página</title>
</head>
<body>
<h3>Mi página</h3>
</body>
</html>

Obtuvimos el contenido de la página HTML llamada página.html mediante AJAX.

¿Qué hicimos?

Solo enviamos una petición al recurso indicado en el parámetro url y retorna un contenido.

El recurso podría ser también un XML, JSON, un archivo, etc.

Ejemplo de jQuery.ajax() con pase de parámetros

Si nuestro recurso necesita pasarle uno o varios parámetros, es necesario emplear el parámetro data como veremos a continuación:

var url="test2.php";
$.ajax({
type : "GET",
data : {
	id : 5
},
url : url,
success : function(data) {
console.log("data",data);
},
error : function(objXMLHttpRequest) {
console.log("error",objXMLHttpRequest);
}
});

Si miramos la consola de desarrolladores, veríamos un String como esto:

data {
    "aaData": [
        {
            "id": "132",
            "nombre_autor": "Jean",
            "apellido_autor": "Arp",
            "nombre_tipo": "Escultura",
            "nombre_zona": "Plaza Cubierta del Rectorado"
        },
        {
            "id": "133",
            "nombre_autor": "Jean",
            "apellido_autor": "Arp",
            "nombre_tipo": "Elementos plásticos",
            "nombre_zona": "Edif. de la Facultad de Humanidades y Educación"
        }
    ]
}

Y tuviésemos que castear el mismo a un array para poder manipularlo con un método como:

$.parseJSON(data);

Si queremos traer un JSON mediante AJAX ya casteado como un array para poder manipularlo fácilmente:

$.getJSON(url, function( data ) {
  console.log("data",data);
});

La diferencia

Ahora devuelve la data como un array en vez de un string.

data 
Object {aaData: Array[2]}
aaData: Array[2]
0: Object
apellido_autor: "Arp"
id: "132"
nombre_autor: "Jean"
nombre_tipo: "Escultura"
nombre_zona: "Plaza Cubierta del Rectorado"
__proto__: Object
1: Object
apellido_autor: "Arp"
id: "133"
nombre_autor: "Jean"
nombre_tipo: "Elementos plásticos"
nombre_zona: "Edif. de la Facultad de Humanidades y Educación"

¿Cual es el objetivo de pasar data en el request?

Si estamos interesados en obtener un listado dado un o una serie identificadores, debemos emplear el parámetro data indicando el nombre del parámetro y el valor del mismo; si son varios hay que separarlos por comas (,) los parámetros:

data : {
	id : 5,
	nombre : 'juan'
},

¿Cómo enviar un formulario por AJAX?

Si queremos enviar un formulario por AJAX, podemos emplear el método serialize() provisto por jQuery que ya hemos hablado en otra ocasión: Así funciona serialize en jQuery.

$.ajax({
type : "GET",
data: $("form").serialize(),
url : url,
success : function(data) {
console.log("data",data);
},
error : function(objXMLHttpRequest) {
console.log("error",objXMLHttpRequest);
}
});

Sincrono VS Asincrono con AJAX

Un punto interesante de la tecnología AJAX es que es asíncrono; es decir, que el AJAX se ejecuta sin interrumpir el resto del código JavaScript; esto puede resultar en un inconveniente en algunas ocasiones dependiendo de las circunstancias o de lo que deseamos hacer:

$.ajax({
type : "GET",
url : url,
success : function(data) {
console.log("msj1","esto se ejecutará de último");
},
error : function(objXMLHttpRequest) {
console.log("error",objXMLHttpRequest);
}
});
console.log("msj2","esto se ejecutará antes del ajax");

Retorna los mensajes en el siguiente orden:

msj2 esto se ejecutará antes del ajax
msj1 esto se ejecutará de último

Ya que el AJAX no "bloquea" al resto del JavaScript por defecto no detiene la ejecución del JavaScript restante.

Si queremos que por defecto se "bloquee" o detenga la ejecución del JavaScript, debemos usar el parámetro async (asíncrono) establecido en false.

$.ajax({
type : "GET",
async : false,
url : url,
success : function(data) {
console.log("msj1","esto se ejecutará primero");
},
error : function(objXMLHttpRequest) {
console.log("error",objXMLHttpRequest);
}
});
console.log("msj2","esto se ejecutará después del ajax");
msj1 esto se ejecutará primero
msj2 esto se ejecutará después del ajax

Enlaces de Interés


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

FastClick para eliminar el delay de los 300ms

FastClick para eliminar el delay de los 300ms

Partículas con Canvas en JavaScript

Partículas con Canvas en JavaScript

anime.js librería para animaciones en JavaScript

anime.js librería para animaciones en JavaScript

Algunos artículos que te pueden interesar

Recortes de imágenes con HTML5 y jQuery

Recortes de imágenes con HTML5 y jQuery

En este artículo veremos cómo recortar imágenes y guardarlas en nuestra computadora o dispositivo móvil con HTML5 y jQuery.

Andrés Cruz 07-05-2014

Los web workers para ejecutar JavaScript en paralelo

Los web workers para ejecutar JavaScript en paralelo

Los web workers permiten ejecutar secciones de código de archivos JavaScript en paralelo en un hilo aparte; en esta entrada veremos cómo trabajar con los web workers.

Andrés Cruz 01-10-2015

Carrusel automático infinito con jQuery y CSS

Carrusel automático infinito con jQuery y CSS

En esta entrada veremos cómo crear un Carrusel automático e infinito con jQuery y un poco de CSS.

Andrés Cruz 27-06-2017