W3docs
it
Accedi

AJAX XML

Scopri come caricare dati XML con AJAX da uno script PHP e renderizzarli su una pagina senza ricaricarla. Esempio con XMLHttpRequest e parsing DOM.

Questo capitolo mostra come caricare dati XML da uno script PHP tramite AJAX e visualizzarli su una pagina senza un ricaricamento completo. Costruirai un piccolo endpoint PHP che restituisce XML, lo recupererai nel browser con XMLHttpRequest, analizzerai la risposta con il DOM e inserirai il risultato nella pagina.

Se sei nuovo all'argomento, inizia prima con i capitoli Introduzione ad AJAX e AJAX con PHP.

Cos'è AJAX?

AJAX (Asynchronous JavaScript and XML) è una tecnica che consente al browser di scambiare dati con il server in background e aggiornare solo una parte della pagina, invece di ricaricare l'intero documento. Il browser effettua una richiesta HTTP da JavaScript, riceve una risposta e la utilizza per modificare il DOM. Questo riduce la latenza percepita e il carico sul server.

Cos'è XML?

XML (Extensible Markup Language) è un formato testuale per archiviare e trasportare dati strutturati tramite tag annidati. È leggibile dall'uomo e autodescrittivo, il che lo rende un formato di trasporto comodo tra un server PHP e il browser. Quando un server invia XML con un header Content-Type: text/xml, il browser lo analizza automaticamente e lo espone come albero DOM tramite la proprietà responseXML della richiesta.

Perché usare PHP, AJAX e XML insieme?

In questo schema PHP interroga una sorgente dati (un database o un file) ed emette un documento XML, il browser richiede quel documento tramite AJAX e JavaScript trasforma i nodi XML in HTML. Il risultato è una pagina che aggiorna una regione di contenuto su richiesta. Sebbene XML funzioni, la maggior parte delle applicazioni moderne invia ora JSON al suo posto, perché JavaScript può analizzarlo nativamente — vedi la nota nelle conclusioni.

Come usare PHP, AJAX e XML insieme

Per usare PHP, AJAX e XML insieme, è necessario seguire questi passaggi:

  1. Creare uno script PHP che recupera dati da un database o da un file.
  2. Usare AJAX per chiamare lo script PHP e recuperare i dati.
  3. Analizzare la risposta XML in JavaScript, convertirla in elementi HTML e visualizzarla sulla pagina web.

Passo 1: Creare uno script PHP

Il primo passo consiste nel creare uno script PHP che recupera dati da un database o da un file. Questo script sarà responsabile del recupero dei dati da visualizzare sulla pagina web.

Ecco un esempio di script PHP che recupera dati da un database:

Esempio di script PHP che recupera dati da un database

<?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: in produzione, sostituire le credenziali hardcoded con variabili d'ambiente e aggiungere la gestione degli errori per le connessioni al database.

Passo 2: Usare AJAX per chiamare lo script PHP

Il passo successivo consiste nell'usare AJAX per chiamare lo script PHP e recuperare i dati. Prima di tutto, assicurati che la tua pagina HTML contenga un elemento contenitore in cui verranno inseriti i dati recuperati:

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

Ecco un esempio di script AJAX che chiama lo script PHP creato nel passo 1:

Esempio di utilizzo di AJAX per chiamare uno script PHP e recuperare i dati

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: assicurarsi che lo script PHP non produca spazi vuoti o BOM prima della dichiarazione XML, poiché questo causerebbe la restituzione di null da parte di this.responseXML. Se necessario, aggiungere ob_clean(); all'inizio del file PHP. Se lo script PHP è ospitato su un dominio diverso, assicurarsi che il server invii gli header CORS appropriati (ad es. Access-Control-Allow-Origin: *).

Passo 3: Formattare i dati e visualizzarli sulla pagina web

Il browser espone la risposta XML come albero DOM tramite this.responseXML, quindi il JavaScript del Passo 2 esegue già il parsing: getElementsByTagName("item") restituisce i nodi <item> e textContent legge il valore di ciascun figlio. Per una tipica risposta del server, l'XML prodotto dallo script PHP del Passo 1 è simile a questo:

Esempio di formattazione e visualizzazione di dati 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>

Dopo il parsing, JavaScript crea elementi HTML standard (come <div>, <h3> e <span>) che possono poi essere stilizzati con CSS. Ecco un esempio di CSS che corrisponde alla struttura HTML generata:

Esempio di CSS per stilizzare i dati visualizzati

.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; }

Conclusione

L'utilizzo combinato di PHP, AJAX e XML consente agli sviluppatori di creare pagine web dinamiche che aggiornano contenuti specifici senza ricaricare completamente la pagina. Seguendo i passaggi precedenti, puoi implementare questo schema per migliorare l'esperienza utente e ridurre il carico sul server.

Nota: sebbene questo tutorial utilizzi XML e XMLHttpRequest a scopo didattico, le applicazioni web moderne preferiscono tipicamente JSON e l'API fetch per lo scambio di dati AJAX, grazie al supporto nativo di JavaScript e alla sintassi più semplice. Vedi json_encode() per produrre JSON da PHP.

Capitoli correlati

Esercizio

Pratica
Qual è il modo corretto per restituire un oggetto XMLHttpRequest in PHP usando AJAX XML?
Qual è il modo corretto per restituire un oggetto XMLHttpRequest in PHP usando AJAX XML?
Was this page helpful?