AJAX XML

Este capítulo muestra cómo cargar datos XML desde un script PHP usando AJAX y mostrarlos en una página sin recargar por completo. Crearás un pequeño endpoint en PHP que genera XML, lo obtendrás en el navegador con XMLHttpRequest, analizarás la respuesta con el DOM e inyectarás el resultado en la página.

Si eres nuevo en este tema, comienza primero con los capítulos de introducción a AJAX y AJAX con PHP.

¿Qué es AJAX?

AJAX (JavaScript y XML Asíncronos) es una técnica que permite al navegador intercambiar datos con el servidor en segundo plano y actualizar solo una parte de la página, en lugar de recargar todo el documento. El navegador realiza una petición HTTP desde JavaScript, recibe una respuesta y la usa para modificar el DOM. Esto reduce la latencia percibida y la carga del servidor.

¿Qué es XML?

XML (Lenguaje de Marcado Extensible) es un formato de texto para almacenar y transportar datos estructurados mediante etiquetas anidadas. Es legible por humanos y autodescriptivo, lo que lo convierte en un formato de transporte conveniente entre un servidor PHP y el navegador. Cuando el servidor envía XML con la cabecera Content-Type: text/xml, el navegador lo analiza automáticamente y lo expone como un árbol DOM a través de la propiedad responseXML de la petición.

¿Por qué usar PHP, AJAX y XML juntos?

En este patrón, PHP consulta una fuente de datos (una base de datos o un archivo) y emite un documento XML; el navegador solicita ese documento con AJAX, y JavaScript convierte los nodos XML en HTML. El resultado es una página que actualiza una región de contenido bajo demanda. Si bien XML funciona, la mayoría de las aplicaciones modernas envían JSON en su lugar, porque JavaScript puede analizarlo de forma nativa — consulta la nota en la conclusión.

Cómo usar PHP, AJAX y XML juntos

Para usar PHP, AJAX y XML juntos, debes seguir estos pasos:

1. Crear un script PHP que recupere datos de una base de datos o archivo.
2. Usar AJAX para llamar al script PHP y obtener los datos.
3. Analizar la respuesta XML en JavaScript, convertirla en elementos HTML y mostrarla en la página web.

Paso 1: Crear un script PHP

El primer paso es crear un script PHP que recupere datos de una base de datos o archivo. Este script será responsable de obtener los datos que se mostrarán en la página web.

A continuación se muestra un ejemplo de un script PHP que recupera datos de una base de datos:

Ejemplo de un script PHP que recupera datos de una base de datos

<?php
// Connect to database
$con = mysqli_connect("localhost","username","password","database");

if (!$con) {
    die("Connection failed: " . mysqli_connect_error());
}

// Retrieve data from database
// Note: Ensure the database contains a table named 'table' with columns: title, description, price
// Note: In production, use prepared statements to prevent SQL injection
$result = mysqli_query($con,"SELECT * FROM table");

// Set content type to XML
header('Content-Type: text/xml');
echo '<?xml version="1.0"?>';
echo '<items>';

// Loop through the results and add them to XML
while($row = mysqli_fetch_array($result)) {
    echo '<item>';
    echo '<title>' . htmlspecialchars($row['title']) . '</title>';
    echo '<description>' . htmlspecialchars($row['description']) . '</description>';
    echo '<price>' . htmlspecialchars($row['price']) . '</price>';
    echo '</item>';
}

echo '</items>';
?>

Nota: En producción, reemplaza las credenciales codificadas con variables de entorno y agrega manejo de errores para las conexiones a la base de datos.

Paso 2: Usar AJAX para llamar al script PHP

El siguiente paso es usar AJAX para llamar al script PHP y obtener los datos. Primero, asegúrate de que tu página HTML contenga un elemento contenedor donde se inyectarán los datos obtenidos:

<div id="data-container"></div>

A continuación se muestra un ejemplo de un script AJAX que llama al script PHP creado en el paso 1:

Ejemplo de uso de AJAX para llamar a un script PHP y obtener los datos

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4) {
        if (this.status == 200) {
            var xmlDoc = this.responseXML;
            var items = xmlDoc.getElementsByTagName("item");
            var container = document.getElementById("data-container");
            container.innerHTML = ""; // Clear previous data

            for (var i = 0; i < items.length; i++) {
                var title = items[i].getElementsByTagName("title")[0].textContent;
                var desc = items[i].getElementsByTagName("description")[0].textContent;
                var price = items[i].getElementsByTagName("price")[0].textContent;

                var div = document.createElement("div");
                div.className = "item";
                div.innerHTML = "<h3>" + title + "</h3><p>" + desc + "</p><span>" + price + "</span>";
                container.appendChild(div);
            }
        } else {
            console.error("Request failed with status: " + this.status);
            var container = document.getElementById("data-container");
            container.innerHTML = "<p>Error loading data.</p>";
        }
    }
};
xmlhttp.open("GET", "getdata.php", true);
xmlhttp.send();

Nota: Asegúrate de que el script PHP no genere espacios en blanco ni BOM antes de la declaración XML, ya que esto hará que this.responseXML devuelva null. Si es necesario, agrega ob_clean(); al inicio del archivo PHP. Si tu script PHP está alojado en un dominio diferente, asegúrate de que el servidor envíe las cabeceras CORS adecuadas (por ejemplo, Access-Control-Allow-Origin: *).

Paso 3: Formatear los datos y mostrarlos en la página web

El navegador expone la respuesta XML como un árbol DOM a través de this.responseXML, por lo que el JavaScript del Paso 2 ya realiza el análisis: getElementsByTagName("item") devuelve los nodos <item>, y textContent lee el valor de cada elemento hijo. Para una respuesta típica del servidor, el XML generado por el script PHP del Paso 1 tiene este aspecto:

Ejemplo de formateo y visualización de datos XML

<items>
    <item>
        <title>Item 1</title>
        <description>This is the description of item 1.</description>
        <price>$10.00</price>
    </item>
    <item>
        <title>Item 2</title>
        <description>This is the description of item 2.</description>
        <price>$20.00</price>
    </item>
    <item>
        <title>Item 3</title>
        <description>This is the description of item 3.</description>
        <price>$30.00</price>
    </item>
</items>

Tras el análisis, JavaScript crea elementos HTML estándar (como <div>, <h3> y <span>) que luego pueden estilizarse con CSS. A continuación se muestra un ejemplo de CSS que coincide con la estructura HTML generada:

Ejemplo de CSS para estilizar los datos renderizados

.item {
    border: 1px solid #ccc;
    padding: 10px;
    margin: 10px 0;
    border-radius: 4px;
}
.item h3 { margin: 0 0 5px; }
.item span { color: #2a9d8f; font-weight: bold; }

Conclusión

Usar PHP, AJAX y XML juntos permite a los desarrolladores crear páginas web dinámicas que actualizan contenido específico sin recargar por completo. Siguiendo los pasos anteriores, puedes implementar este patrón para mejorar la experiencia del usuario y reducir la carga del servidor.

Nota: Aunque este tutorial usa XML y XMLHttpRequest con fines educativos, las aplicaciones web modernas suelen preferir JSON y la API fetch para el intercambio de datos AJAX, gracias al soporte nativo de JavaScript y una sintaxis más sencilla. Consulta json_encode() para generar JSON desde PHP.

Capítulos relacionados

• Introducción a AJAX — los conceptos básicos de XMLHttpRequest y el ciclo de vida de las peticiones.
• AJAX y PHP — cómo llamar a scripts PHP desde el navegador.
• AJAX y base de datos — cómo obtener filas de una base de datos mediante AJAX.
• PHP SimpleXML — cómo analizar XML en el servidor con PHP.

Práctica