Uso de Métodos AJAX en jQuery: $.get, $.post, $.getJSON y $.ajax

El ecosistema de jQuery proporciona una serie de herramientas optimizadas para gestionar la comunicación cliente-servidor de forma asíncrona. A continuación, se detalla el funcionamiento, la sintaxis y la configuración de sus principales métodos para peticiones HTTP.

  1. $.get()

El método $.get() actúa como un atajo para realizar peticiones utilizando el verbo HTTP GET. Su estructura básica requiere la URL de destino, permitiendo adjuntar un objeto con datos que se serializarán como Query String, y una función de retorno (callback) que procesará la respuesta exitosa.

Sintaxis: $.get(url, [data], [callback])

$.get(
    "/api/v1/usuarios/buscar",
    { 
        rol: 'administrador', 
        estado: 'activo' 
    },
    function(respuesta, estadoHttp) {
        console.log("Estado de la transacción:", estadoHttp);
        console.log("Listado de usuarios:", respuesta);
    }
);

  1. $.post()

Para el envío de información que requiere el verbo POST, se utiliza $.post(). Su firma es prácticamente idéntica a la de $.get(), con la adición de un cuarto parámetro opcional denominado dataType. Este argumento define el formato esperado de la respuesta del servidor (por ejemplo, json, xml, html). Si se omite, jQuery intentará inferir el tipo basándose en el encabezado MIME de la respuesta.

Sintaxis: $.post(url, [data], [callback], [dataType])

$.post(
    "/api/v1/autenticacion/login",
    { 
        credencial: 'usuario_01', 
        contrasena: 'clave_segura_99' 
    },
    function(sesion, estadoHttp) {
        if (estadoHttp === 'success') {
            console.log("Inicio de sesión exitoso. Token:", sesion.token);
        }
    },
    "json"
);

  1. $.getJSON()

Diseñado específicamente para consumir endpoints que retornan estructuras JSON, $.getJSON() es una abstrcación de alto nivel. Una de sus características más destacadas es el soporte nativo para llamadas de dominio cruzado (Cross-Domain) mediante JSONP. Si la URL incluye un parámetro como ?callback=?, jQuery transformará automáticamenet la petición para eludir las restrciciones del Same-Origin Policy.

Sintaxis: $.getJSON(url, [data], [callback])

$.getJSON(
    "https://api.proveedor-externo.com/v2/configuracion?callback=?",
    { formato: 'minimalista' },
    function(datosRemotos) {
        console.log("Preferencias cargadas:", datosRemotos.tema);
    }
);

  1. $.ajax()

En el núcleo de todas las abreviaturas de jQuery se encuentra $.ajax(). Esta función expone la API completa de XMLHttpRequest, otorgando un control exhaustivo sobre cada fase del ciclo de vida de la petición. Recibe un único objeto de configuración que permite definir encabezados personalizados, tiempos de espera, manejo granular de errores y eventos previos al envío.

Sintaxis: $.ajax(options)

$.ajax({
    url: '/api/v1/pedidos/generar',
    method: 'POST',
    dataType: 'json',
    contentType: 'application/json',
    data: JSON.stringify({ 
        productoId: 4592, 
        cantidad: 3 
    }),
    beforeSend: function(xhr) {
        console.log("Preparando solicitud...");
        // Lógica para mostrar un indicador de carga en la interfaz gráfica
    },
    success: function(resultado) {
        console.log("Orden confirmada con el identificador:", resultado.id);
    },
    error: function(xhr, status, error) {
        console.error("Fallo en la comunicación:", status, error);
    },
    complete: function() {
        // Lógica para ocultar el indicador de carga independientemente del resultado
        console.log("Ciclo de petición finalizado.");
    }
});

Etiquetas: jQuery AJAX JavaScript JSONP Peticiones HTTP

Publicado el 6-27 04:06