AJAX con jQuery: $.ajax(), $.get() y $.post() paso a paso

AJAX permite comunicarnos con un servidor sin recargar toda la página. jQuery popularizó una API sencilla para realizar estas peticiones.

¿Qué significa AJAX?

AJAX significa Asynchronous JavaScript and XML. Aunque el nombre menciona XML, hoy es muy común trabajar con JSON.

GET con $.get()

$.get() se utiliza para realizar una petición GET de forma abreviada.

$.get("https://jsonplaceholder.typicode.com/users")
    .done(function (usuarios) {
        console.log(usuarios);
    });

GET se usa habitualmente para consultar información sin modificarla.

POST con $.post()

$.post() permite enviar datos mediante POST.

$.post(
    "https://jsonplaceholder.typicode.com/posts",
    {
        title: "Aprender jQuery",
        body: "Ejemplo de POST"
    }
)
.done(function (respuesta) {
    console.log(respuesta);
});

$.ajax()

$.ajax() ofrece más control sobre la petición: URL, método, datos, headers, formato y manejo de errores.

$.ajax({
    url: "https://jsonplaceholder.typicode.com/posts",
    method: "POST",
    contentType: "application/json",
    data: JSON.stringify({
        title: "Nueva publicación",
        body: "Contenido"
    })
})
.done(function (respuesta) {
    console.log(respuesta);
})
.fail(function (xhr) {
    console.log("Error", xhr.status);
});

done(), fail() y always()

done() se ejecuta si la petición termina correctamente, fail() si falla y always() en ambos casos.

$.get("/api/usuarios")
    .done(function (datos) {
        console.log(datos);
    })
    .fail(function () {
        console.log("No se pudieron cargar los datos");
    })
    .always(function () {
        console.log("Petición finalizada");
    });

Enviar parámetros en GET

$.get("/api/productos", {
    categoria: "tecnologia",
    pagina: 2
});

jQuery convierte ese objeto en parámetros de consulta de la URL.

Mostrar un indicador de carga

$("#cargando").show();

$.get("/api/usuarios")
    .done(function (usuarios) {
        console.log(usuarios);
    })
    .always(function () {
        $("#cargando").hide();
    });

AJAX no significa backend inexistente

jQuery realiza la petición desde el navegador, pero del otro lado debe existir una API o endpoint que reciba y procese la solicitud.

Ejercicio

Consultá una API pública, mostrá “Cargando…”, listá los resultados y mostrale al usuario un mensaje si ocurre un error.

Errores comunes

• confundir AJAX con una base de datos;
• no manejar errores;
• enviar JSON sin indicar correctamente el tipo de contenido;
• ignorar problemas de CORS;
• exponer secretos o credenciales en el frontend.

---

¿Te sirvió esta guía? ☕

Si este contenido te ayudó a aprender jQuery, podés apoyar a Club Programador. Cada aporte ayuda a mantener el sitio online y a seguir publicando material gratuito.

🇦🇷 Apoyar desde Argentina

☕ Invitame un café con Mercado Pago

🌎 Apoyar desde otro país

☕ Apoyar con PayPal

Seguí aprendiendo jQuery

← Formularios y validaciones con jQuery

jQuery y APIs: trabajar con JSON y renderizar datos dinámicos →