post thumbnail

jQuery desde Cero: AJAX

Publicado Por: Oscar González, El 10/03/2014


Detalles del Curso:

Dificultad: Aprendiz

Duración: 10 min


AJAX significa Asynchronous JavaScript and XML. Esta tecnología nos permite comunicarnos con un servicio web sin tener que recargar la página. A pesar de que su nombre lo dice, XML no es requerido para usar AJAX, de hecho, se utiliza JSON más seguido.

Con jQuery, hacer uso de AJAX es muy sencillo. Para demostrarlo, estaré utilizando la web API de Open Weather Map (http://openweathermap.org/), a la cual haré algunas solicitudes utilizando AJAX y jQuery.

Comencemos.


Obteniendo datos

jQuery provee varias funciones para trabajar con AJAX. La más comúnmente usada $.ajax(). Pero ya hablare de algunas otras.

jQuery Ajax

El presente ejemplo hace uso de jQuery AJAX para obtener un objeto json de la dirección "http://api.openweathermap.org/data/2.1/weather/city/caracas?type=json" con los datos del clima de la ciudad de Caracas. Revisemos los parámetros pasados a la función AJAX:

  • url: La dirección a donde enviar la solicitud.
  • type: Tipo de request (solicitud). Ejemplo: GET, POST, PUT, DELETE, etc. En caso de utilizar POST o PUT, por ejemplo, se puede enviar un objeto en otro parámetro a la misma función llamado data. Ej: data: {'clave': 'valor'},.
  • datatype: El tipo de respuesta que se espera, en este caso es json.

En este ejemplo pasé a la función AJAX 2 funciones: success y error; Estas son llamadas cuando el request fue exitoso o falló respectivamente.


Atajos

Adicionalmente a la función AJAX, jQuery provee otras funciones para usos más específicos y ahorrarnos escribir unas cuantas lineas de código.

$.get()

$.get() realiza una llamada GET a una dirección especifica:

$.get( "http://myURL.com/", function() {
    alert( "Funcionó" );
  })
  .done(function() {
    alert( "También sirve para saber que funcionó" );
  })
  .fail(function() {
    alert( "Ha ocurrido un error" );
  });

La función $.get() solo provee una función una función para saber que la operación fue exitosa. Esto es mas o menos equivalente a:

$.ajax({
  url: "http://myURL.com/",
  type: 'GET',
  success: function() {
    alert( "Funcionó" );
  },
  error: function() {
    alert( "Ha ocurrido un error" );
  }
});

$.getJSON()

Esta es muy similar a la anterior, solo que es especifica para cuando se espera una respuesta tipo json.

En caso de esperar jsonp, se debe agregar 'callback=?' a la url:

$.getJSON( "http://api.openweathermap.org/data/2.1/weather/city/caracas?callback=?", function() {
  alert( "Exito" );
});
$.ajax({
  url: "http://api.openweathermap.org/data/2.1/weather/city/caracas",
  type: 'GET',
  dataType: 'jsonp',
  success: function() {
    alert( "Exito" );
  }
});

$.getScript()

Carga un un archivo Javascript de una dirección especifica.

$.getScript( "http://myURL.com/ajax/myScript.js", function( data, textStatus, jqxhr ) {
  alert( "Exito" );
});

Es equivalente a:

$.ajax({
  url: "http://myURL.com/ajax/myScript.js",
  dataType: "script",
  success: function( data, textStatus, jqxhr ) {
    alert( "Exito" );
  }
});

$.post()

Realiza una llamada POST a una dirección URL:

$.post( "http://myURL.com/usuario", {'nombre': 'Oscar'}, function( data, textStatus, jqxhr ) {
  alert( "Exito" );
});

Esta función puede recibir como parámetro un objeto con los valores a enviar.

Es equivalente a:

$.ajax({
  url: "http://myURL.com/usuario",
  type: "POST",
  success: function( data, textStatus, jqxhr ) {
    alert( "Exito" );
  }
});

$.load()

Carga una dirección url y coloca los datos retornados en los elementos seleccionados (Con un ejemplo se entenderá mejor...).

$('body').load( "http://myURL.com/public/prueba.txt" );

El contenido del archivo "prueba.txt" sera agregado al body de la página web.


Eventos Globales

Por último, jQuery ofrece una serie de funciones que responden a eventos de AJAX. Estas funciones no deben ser invocadas manualmente, se invocan automáticamente cuando se dispara su evento correspondiente.

$.ajaxComplete()

Es llamada cuando una función AJAX es completada

$( document ).ajaxComplete(function() {
  alert('Ajax completado');
});

Si se necesita saber de que url viene:

$( document ).ajaxComplete(function( event, xhr, settings ) {
  alert('Ajax completado desde ' + settings.url);
});

$.ajaxError()

Es llamada cuando una función AJAX es completada pero con errores

$( document ).ajaxError(function() {
  alert('Ajax Error');
});

$.ajaxSend()

Se invoca cuando un AJAX es enviado

$( document ).ajaxSend(function() {
  alert('Ajax enviado');
});

$.ajaxStart()

jQuery lleva un control de todas las llamadas AJAX que ejecutas. Si ninguna esta en curso esta función es invocada.

$( document ).ajaxStart(function() {
  alert('Ajax Iniciando');
});

$.ajaxStop()

Esta se invoca cada vez que una función AJAX es completada y aún quedan otras en curso. Incluso es invocada cuando la última función AJAX es cancelada.

$( document ).ajaxStop(function() {
  alert('Ajax Stop');
});

$.ajaxSuccess()

Este es invocado cuando una función AJAX termina exitosamente.

$( document ).ajaxSuccess(function() {
  alert('Ajax Exitoso');
});

Conclusión

Con esto completamos esta serie sobre jQuery.

Gracias por leer y seguiré atendiendo sus dudas por la sección de comentarios de más abajo.

Si esta información ha sido util, compártela en las redes sociales y ayudamos a llegar a otras personas que podrían necesitarnos.

Hasta pronto.


¿Te ha gustado esta publicación?

Compártela:

Por Oscar González

Conoce más sobre este autor aquí


comments powered by Disqus