AJAX XML

Este capítulo mostra como carregar dados XML de um script PHP usando AJAX e exibi-los em uma página sem um recarregamento completo. Você criará um pequeno endpoint PHP que gera XML, fará a requisição no navegador com XMLHttpRequest, analisará a resposta com o DOM e injetará o resultado na página.

Se você é novo no tema, comece pelos capítulos de introdução ao AJAX e AJAX com PHP.

O que é AJAX?

AJAX (Asynchronous JavaScript and XML) é uma técnica que permite ao navegador trocar dados com o servidor em segundo plano e atualizar apenas uma parte da página, em vez de recarregar o documento inteiro. O navegador faz uma requisição HTTP via JavaScript, recebe uma resposta e a utiliza para modificar o DOM. Isso reduz a latência percebida e a carga no servidor.

O que é XML?

XML (Extensible Markup Language) é um formato de texto para armazenar e transportar dados estruturados usando tags aninhadas. É legível por humanos e autodescritivo, o que o torna um formato de transporte conveniente entre um servidor PHP e o navegador. Quando um servidor envia XML com o cabeçalho Content-Type: text/xml, o navegador o analisa automaticamente e o expõe como uma árvore DOM através da propriedade responseXML da requisição.

Por que usar PHP, AJAX e XML juntos?

Nesse padrão, o PHP consulta uma fonte de dados (um banco de dados ou arquivo) e emite um documento XML, o navegador solicita esse documento com AJAX e o JavaScript converte os nós XML em HTML. O resultado é uma página que atualiza uma região de conteúdo sob demanda. Embora XML funcione, a maioria das aplicações modernas agora envia JSON porque o JavaScript pode analisá-lo nativamente — veja a observação na conclusão.

Como usar PHP, AJAX e XML juntos

Para usar PHP, AJAX e XML juntos, siga estas etapas:

1. Crie um script PHP que recupere dados de um banco de dados ou arquivo.
2. Use AJAX para chamar o script PHP e recuperar os dados.
3. Analise a resposta XML em JavaScript, converta-a em elementos HTML e exiba-a na página web.

Etapa 1: Criar um Script PHP

O primeiro passo é criar um script PHP que recupere dados de um banco de dados ou arquivo. Esse script será responsável por recuperar os dados que serão exibidos na página web.

Aqui está um exemplo de script PHP que recupera dados de um banco de dados:

Exemplo de script PHP que recupera dados de um banco de dados

<?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>';
?>

Observação: Em produção, substitua as credenciais codificadas diretamente por variáveis de ambiente e adicione tratamento de erros para conexões com banco de dados.

Etapa 2: Usar AJAX para Chamar o Script PHP

O próximo passo é usar AJAX para chamar o script PHP e recuperar os dados. Primeiro, certifique-se de que sua página HTML contenha um elemento contêiner onde os dados obtidos serão injetados:

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

Aqui está um exemplo de script AJAX que chama o script PHP criado na etapa 1:

Exemplo de uso de AJAX para chamar um script PHP e recuperar os dados

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();

Observação: Certifique-se de que o script PHP não gere espaços em branco ou BOM antes da declaração XML, pois isso fará com que this.responseXML retorne null. Se necessário, adicione ob_clean(); no início do arquivo PHP. Se o seu script PHP estiver hospedado em um domínio diferente, verifique se o servidor envia os cabeçalhos CORS apropriados (ex.: Access-Control-Allow-Origin: *).

Etapa 3: Formatar os Dados e Exibi-los na Página Web

O navegador expõe a resposta XML como uma árvore DOM via this.responseXML, então o JavaScript da Etapa 2 já realiza a análise: getElementsByTagName("item") retorna os nós <item>, e textContent lê o valor de cada filho. Para uma resposta típica do servidor, o XML produzido pelo script PHP da Etapa 1 é assim:

Exemplo de formatação e exibição de dados 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>

Após a análise, o JavaScript cria elementos HTML padrão (como <div>, <h3> e <span>) que podem ser estilizados com CSS. Aqui está um exemplo de CSS que corresponde à estrutura HTML gerada:

Exemplo de CSS para estilizar os dados 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; }

Conclusão

Usar PHP, AJAX e XML juntos permite que os desenvolvedores criem páginas web dinâmicas que atualizam conteúdo específico sem recarregamentos completos. Seguindo as etapas acima, você pode implementar esse padrão para melhorar a experiência do usuário e reduzir a carga no servidor.

Observação: Embora este tutorial use XML e XMLHttpRequest para fins educacionais, as aplicações web modernas geralmente preferem JSON e a API fetch para troca de dados AJAX devido ao suporte nativo do JavaScript e à sintaxe mais simples. Veja json_encode() para produzir JSON a partir do PHP.

Capítulos relacionados

• Introdução ao AJAX — os fundamentos do XMLHttpRequest e o ciclo de vida da requisição.
• AJAX e PHP — chamando scripts PHP a partir do navegador.
• AJAX e Banco de Dados — buscando linhas do banco de dados via AJAX.
• PHP SimpleXML — analisando XML no lado do servidor com PHP.

Prática