Usar AJAX con PHP y jQuery (sin recargar la página)

¿Quieres crear aplicaciones web más rápidas y dinámicas? En esta guía aprenderás a usar AJAX para enviar y recibir datos desde el servidor sin recargar la página, cómo crear una API RESTful en PHP y consumirla desde el frontend con jQuery. Todo con ejemplos prácticos que puedes copiar y probar.

Introducción a AJAX y su uso con JavaScript y jQuery

AJAX (Asynchronous JavaScript and XML) permite actualizar partes de una página web sin necesidad de recargarla completa. Es ideal para formularios, cargas dinámicas y actualizaciones en tiempo real.

Crear una API RESTful en PHP

Una API RESTful expone datos del backend para que el frontend los consuma. Aquí un ejemplo básico:

                            <?php
                                    header("Content-Type: application/json");
                                    $method = $_SERVER['REQUEST_METHOD'];

                                    if ($method == 'GET') {
                                        $data = array('mensaje' => 'API funcionando', 'estado' => 'ok');
                                        echo json_encode($data);
                                    }
                                    ?>

Guarda este código como api.php.

Consumir una API desde el Front-end

Desde JavaScript o jQuery, puedes llamar a tu API así:

$.ajax({
    url: 'api.php',
    type: 'GET',
    success: function(response) {
        console.log(response.mensaje);
        alert(response.mensaje);
    },
    error: function() {
        alert('Error al conectar con la API');
    }
});

Enviar datos al servidor con AJAX

Ejemplo: enviar un formulario sin recargar:

$('#miFormulario').on('submit', function(e) {
    e.preventDefault(); // Evita recarga
    
    $.ajax({
        url: 'procesar.php',
        type: 'POST',
        data: $(this).serialize(),
        success: function(response) {
            swal("¡Éxito!", "Datos guardados", "success");
        },
        error: function() {
            swal("Error", "No se pudo guardar", "error");
        }
    });
});

Manejo de respuestas y errores

Siempre valida la respuesta del servidor:

success: function(response) {
    try {
        var data = JSON.parse(response);
        if (data.status === 'success') {
            swal("Éxito", data.message, "success");
        } else {
            swal("Error", data.message, "error");
        }
    } catch (e) {
        swal("Error", "Respuesta inválida", "error");
    }
}

Pruebas con Postman

Postman es una herramienta para probar APIs. Puedes enviar peticiones GET, POST, PUT, DELETE y ver las respuestas del servidor antes de integrarlas al frontend.

• Descarga Postman: postman.com
• Envía una petición a tudominio.com/api.php
• Verifica que responda con JSON válido

¿Qué sigue después de AJAX?

Este es el quinto paso del desarrollo full-stack. En el siguiente módulo, aprenderás a organizar tu código con el patrón MVC en PHP y mejorar la seguridad de tus aplicaciones.

Volver a la Guía Full-Stack → Ver Módulo 4: PHP y MySQL →

¿Quieres la versión completa del libro?

Esta guía es una versión resumida del libro "Programación Full-Stack", que incluye:

• ✅ Todos los ejercicios resueltos paso a paso
• ✅ Códigos listos para copiar y probar
• ✅ Explicaciones profundas de seguridad y buenas prácticas
• ✅ Acceso a actualizaciones futuras

Comprar en Amazon →

¿Tienes dudas o sugerencias? ¡Déjalas en los comentarios!