Ejemplo Práctico: AJAX

Este ejemplo muestra cómo jQuery gestiona eventos y peticiones asíncronas para actualizar la interfaz sin recargar la página.

Funcionamiento técnico

Al hacer clic en el botón, jQuery captura el evento, ejecuta una petición AJAX hacia una API externa, procesa la respuesta en formato JSON y la inyecta dinámicamente en el DOM.

El código incluye un bloque de error, el cual se activa automáticamente si la petición falla (por ejemplo, debido a problemas de conexión), permitiendo informar al usuario sobre el fallo.

Caso 1: Listado de Usuarios

En este primer escenario, recuperamos un array de objetos con información de usuarios.

$('#btnCargarUsuarios').click(function() {
    $.ajax({
        url: 'https://jsonplaceholder.typicode.com/users',
        method: 'GET',
        success: function(data) {
            let html = '<ul>';
            $.each(data, function(index, user) {
                html += '<li>' + user.name + ' - ' + user.email + '</li>';
            });
            html += '</ul>';
            $('#resultadoUsuarios').html(html);
        },
        error: function() {
            $('#resultadoUsuarios').html('<p>Error al cargar usuarios.</p>');
        }
    });
});

Caso 2: Gestión de Publicaciones (Escenario adicional)

Para demostrar la versatilidad de la función $.ajax(), implementamos un segundo consumo de API enfocado en publicaciones (posts). Aquí utilizamos el parámetro de consulta _limit=5, lo cual permite filtrar la cantidad de datos recibidos directamente desde la fuente.

$('#btnCargarPosts').click(function() {
    $.ajax({
        url: 'https://jsonplaceholder.typicode.com/posts?_limit=5',
        method: 'GET',
        success: function(data) {
            let html = '<h3>Últimos Posts:</h3><ul>';
            $.each(data, function(index, post) {
                html += '<li>' + post.title + '</li>';
            });
            html += '</ul>';
            $('#resultadoPosts').html(html);
        },
        error: function() {
            $('#resultadoPosts').html('<p>Error al cargar posts.</p>');
        }
    });
});

Ejecución