Saltar al contenido

¿Cómo Entender AJAX JQUERY?

5 junio, 2019

En este post nos hemos tomado la molestia de elaborar una guía práctica para comprender AJAX en JQUERY con métodos fáciles y sencillos. AJAX significa JavaScript asíncrono y XML  Es un conjunto de técnica nuevas que envuelve diversas tecnologías antiguas tales como: JavaScript, XML, Document, Object Model (DOM). Entre estas tecnologías el único elemento nuevo es el XMLHttpRequest.

JQUERY es una librería que pertenece al lenguaje de programación JavaScript, Es una de las más utilizadas en desarrollo web, código abierto y con la capacidad de mejorar la interactividad de una página de internet.

Para diseñar aplicaciones Web similares a las de escritorio, muchos desarrolladores han tomado la decisión de utilizar JQUERY para implementar comportamientos AJAX. En JQUERY existe diversidad de funciones para producir AJAX. A continuación se le ofrece los métodos disponibles para comprender AJAX en JQUERY de forma sencilla.

Métodos AJAX JQUERY

.load()

Este permite cargar datos en un elemento de la página, indicándole a la URL del archivo que usted quiere  traerlos por AJAX. Este  método actualiza el HTML del elemento sobre el que se está invocando .load(). No permite más parámetros y no realiza más acciones de las nombradas.

$(“#elemento”).load(“pagina.html”);

Si usted quiere mandar datos a través de GET a una página, podría usar .load() indicando esos datos “a mano” en la URL del archivo al que está accediendo, aunque  existen otros métodos más indicados para hacer esto.

$(“#elemento”).load(“pagina.php?dato=222”);

El load() como método se encarga de todo, realiza la solicitud al servidor y envia el HTML de la respuesta al contenedor sobre el que está invocado .load().

$.get() y $.post()

Estos son dos métodos hermanos que hacen casi lo mismo: una conexión AJAX enviando datos al servidor. La diferencia es que $.get() manda los datos por GET (en la URL) y $.post() los manda por POST (en las cabeceras del HTTP).  Para estos métodos le envía un juego de parámetros con más complejidad, sin embargo solamente es obligatorio el primero de ellos.

$.get(“url.php”, {

dato: “valor”,

dato2: “valor2”

}, function(respuesta){

$( “#resultado” ).html( data );

}, “html”);

Esto llamaría a la URL “url.php” pasando por el método GET los datos y valores señalados en el segundo parámetro. Al  recibir la respuesta ejecutará la función señalada en el tercer parámetro y el dato que espera recibir del servidor como respuesta tiene el formato señalado en el cuarto parámetro. Cabe destacar que existen distintos  formatos de respuesta: JSON, script, HTML o XML.

$.post() es exactamente idéntico, los datos los enviará jQuery con el método POST, es así como todo lo que usted pueda aprender sobre $.get() lo puede aplicar a $.post().

Aspectos para Tomar en Cuenta

Debe considerar que .load() se invoca sobre un objeto jQuery, que presente uno o varios elementos de la página, en la que quiera cargar el contenido que trae por AJAX. Para ejecutar un método como $.post() o $.get(), debe realizarlo de la función $ o la jQuery, considerando que esta llamada no está asociada a un elemento de la página.

En la función que se ejecuta cuando se produce el resultado de la solicitud AJAX debe seleccionar el elemento o elementos donde quiera mostrar los resultados.

Estos métodos tienen otra utilidad, debido a que devuelven un objeto AJAX, que puede usar para realizar otras acciones que le permitan configurar una solicitud. Ejemplo de ello es cuando puede definir aspectos, como qué realizar cuando la solicitud se ejecute si se produce un error.

var objetoAJAX = $.get( “loquesea.php”, function() {

//hacer algo cuando hay respuesta del AJAX

});

objetoAJAX.done(function() {

//hacer otra cosa cuando hay respuesta correcta de la solicitud

})

objetoAJAX.fail(function() {

//hacer algo cuando se produce un error

})

objetoAJAX.always(function() {

//hacer algo tanto en error como en éxito

});

$.getScript()

Este es otro método “shorthand”, resulta  un atajo para cargar un script Javascript y ponerlo en ejecución, en el momento en el que se haya recibido correctamente. Puede configurar un envío de datos y este método lo hará por GET, igual que se enviaban en $.get().

$.getJSON()

Es otro “shorthand method” altamente utilizado.  Recibe una respuesta en JSON. Es exactamente igual que lo descrito con “getScript()”, solo que en la respuesta recibirá un objeto Javascript.

Como respuesta El servidor debe mandar el contenido del objeto, en un JSON que jQuery de forma interna se encargará de interpretar y transformar en un objeto nativo de Javascript, al que puede acceder para recuperar cualquiera de sus datos.

Hay Otra Clasificación de Métodos en la Documentación de JQuery

Se llama “Global AJAX Event Handlers”, son eventos globales que puede asignar a cualquier solicitud AJAX que se desarrolle en una página. Se definen una sola vez y afectan todas las llamadas AJAX que pueda hacer en esa página.

Así puede ahorrar la  configuración de diversos comportamientos típicos, como los mensajes de “cargando…”, de cada una de las funciones AJAX

Hay eventos para los momentos cuando se genera una solicitud, cuando se produce un error, éxito en la respuesta, entre otros. Cuyos eventos los añade al objeto jQuery del documento extendido.

$( document ).AJAXError(function() {

alert(“error en una solicitud AJAX (no me preguntes en cuál)”);

});

Esto ha sido todo, con esta información que te hemos proporcionado podrás comprender AJAX en JQUERY de forma sencilla y en pocos minutos.

¿Nos das 5 estrellas? ?