Comencemos.
Obteniendo datos
jQuery provee varias funciones para trabajar con AJAX. La más comúnmente usada $.ajax(). Pero ya hablare de algunas otras.
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:
123456789 $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:
12345678910 $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" ); });123 $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" ); } });12345678 $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" ); });123 $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" ); } });1234567 $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" ); });123 $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" ); } });1234567 $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" );1 $('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'); });123 $(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); });123 $(document)ajaxComplete(function(event,xhr,settings){ alert('Ajax completado desde '+settingsurl);});
$.ajaxError()
Es llamada cuando una función AJAX es completada pero con errores
$( document ).ajaxError(function() { alert('Ajax Error'); });123 $(document)ajaxError(function(){ alert('Ajax Error');});
$.ajaxSend()
Se invoca cuando un AJAX es enviado
$( document ).ajaxSend(function() { alert('Ajax enviado'); });123 $(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'); });123 $(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'); });123 $(document)ajaxStop(function(){ alert('Ajax Stop');});
$.ajaxSuccess()
Este es invocado cuando una función AJAX termina exitosamente.
$( document ).ajaxSuccess(function() { alert('Ajax Exitoso'); });123 $(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.
Puzzle Bobble
Karate Blazers
Puzzle De Bloques
Magical Cat Adventure