AJAX con PHP y jQuery: APIs sin recargar

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.

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 que se envían sin recargar
• Cargas dinámicas de contenido (infinite scroll)
• Actualizaciones en tiempo real (notificaciones, chats)
• Búsquedas con autocompletado

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
// api.php
header("Content-Type: application/json");
header("Access-Control-Allow-Origin: *"); // Para desarrollo

$method = $_SERVER['REQUEST_METHOD'];

if ($method === 'GET') {
    $data = [
        'mensaje' => 'API funcionando',
        'estado' => 'ok',
        'timestamp' => time()
    ];
    echo json_encode($data, JSON_PRETTY_PRINT);
} elseif ($method === 'POST') {
    // Leer datos JSON enviados
    $input = json_decode(file_get_contents('php://input'), true);
    
    // Procesar datos (ejemplo: guardar en BD)
    $response = [
        'mensaje' => 'Datos recibidos',
        'recibido' => $input
    ];
    echo json_encode($response);
}
?>

Consumir una API desde el Frontend

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

$.ajax({
    url: 'api.php',
    type: 'GET',
    dataType: 'json',
    success: function(response) {
        console.log(response.mensaje);
        // Actualizar DOM
        $('#resultado').text(response.mensaje);
    },
    error: function(xhr, status, error) {
        console.error('Error:', error);
        swal("Error", "No se pudo conectar con la API", "error");
    }
});

fetch('api.php')
    .then(response => response.json())
    .then(data => {
        console.log(data.mensaje);
        document.getElementById('resultado').textContent = data.mensaje;
    })
    .catch(error => {
        console.error('Error:', error);
        swal("Error", "No se pudo conectar", "error");
    });

Enviar datos al servidor con AJAX

Ejemplo: enviar un formulario sin recargar la página:

$('#miFormulario').on('submit', function(e) {
    e.preventDefault(); // Evita recarga tradicional
    
    $.ajax({
        url: 'procesar.php',
        type: 'POST',
        data: $(this).serialize(),
        dataType: 'json',
        beforeSend: function() {
            // Mostrar loading
            $('#btnEnviar').prop('disabled', true).text('Enviando...');
        },
        success: function(response) {
            if (response.status === 'success') {
                swal("¡Éxito!", response.message, "success");
                $('#miFormulario')[0].reset(); // Limpiar formulario
            } else {
                swal("Error", response.message, "error");
            }
        },
        error: function(xhr, status, error) {
            swal("Error", "No se pudo procesar la solicitud", "error");
        },
        complete: function() {
            // Restaurar botón
            $('#btnEnviar').prop('disabled', false).text('Enviar');
        }
    });
});

Manejo de respuestas y errores

Siempre valida la respuesta del servidor para evitar errores:

success: function(response) {
    try {
        // Si la respuesta no es JSON, intentar parsear
        var data = typeof response === 'string' ? JSON.parse(response) : response;
        
        if (data.status === 'success') {
            swal("Éxito", data.message, "success");
            // Redirigir o actualizar UI
        } else {
            swal("Error", data.message || 'Error desconocido', "error");
        }
    } catch (e) {
        console.error('Error parseando respuesta:', e);
        swal("Error", "Respuesta inválida del servidor", "error");
    }
}

Pruebas con Postman

Postman es una herramienta esencial para probar APIs antes de integrarlas al frontend:

• Descarga Postman: postman.com
• Crea una nueva petición con método GET/POST
• Ingresa la URL de tu API: tudominio.com/api.php
• Envía la petición y verifica la respuesta JSON
• Prueba diferentes métodos: GET, POST, PUT, DELETE

¿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.

¿Tienes dudas sobre AJAX, APIs o jQuery? ¡Déjalas en los comentarios! 👇