Caricare dati dinamici con AJAX, Fetch API e PHP
Se stai sviluppando un sito con HTML, JavaScript e PHP, prima o poi vuoi una cosa semplice: caricare dati dal server senza ricaricare la pagina. Il modo moderno per farlo è usare la Fetch API (al posto del vecchio XMLHttpRequest).
Perché Fetch API (e non XMLHttpRequest)
- Codice più pulito e leggibile (soprattutto con async/await)
- Migliore gestione di JSON, errori e status HTTP
- Supporto totale sui browser moderni
In questa guida creiamo:
- un endpoint PHP che legge dal database e restituisce JSON
- una pagina HTML che richiama l’endpoint con fetch e visualizza i dati
1) Endpoint PHP che restituisce JSON
Crea un file chiamato data.php. Qui sotto trovi una versione robusta con PDO: imposta header JSON, gestisce errori senza esporre dettagli sensibili e restituisce un array.
<?php
declare(strict_types=1);
header('Content-Type: application/json; charset=utf-8');
// In produzione: NON hardcodare credenziali.
// Usa variabili d'ambiente o un file di config non pubblico.
$host = "localhost";
$db = "database";
$user = "username";
$pass = "password";
$dsn = "mysql:host={$host};dbname={$db};charset=utf8mb4";
try {
$pdo = new PDO($dsn, $user, $pass, [
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
PDO::ATTR_EMULATE_PREPARES => false,
]);
// Esempio: tabella users(id, name)
$stmt = $pdo->query("SELECT id, name FROM users ORDER BY id ASC");
$data = $stmt->fetchAll();
http_response_code(200);
echo json_encode($data, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
} catch (Throwable $e) {
// Non mostrare errori al client (loggali lato server se serve).
http_response_code(500);
echo json_encode(["error" => "Server error"]);
}
Risultato: chiamando data.php ottieni una risposta JSON tipo:
[
{"id":1,"name":"Mario"},
{"id":2,"name":"Giulia"}
]2) Frontend HTML + JavaScript con Fetch (async/await)
Ora creiamo una pagina che carica i dati quando premi un pulsante e aggiorna il DOM. Niente onclick inline: usiamo addEventListener (più pulito, più manutenibile).
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Caricare dati dinamici con AJAX, Fetch API e PHP</title>
</head>
<body>
<h2>Elenco utenti</h2>
<button id="btn-load" type="button">Carica utenti</button>
<p id="status" aria-live="polite"></p>
<ul id="user-list"></ul>
<script>
const btn = document.getElementById('btn-load');
const list = document.getElementById('user-list');
const status = document.getElementById('status');
btn.addEventListener('click', loadData);
async function loadData() {
status.textContent = 'Caricamento...';
list.innerHTML = '';
try {
const res = await fetch('data.php', {
headers: { 'Accept': 'application/json' }
});
if (!res.ok) {
throw new Error(`HTTP ${res.status}`);
}
const data = await res.json();
if (!Array.isArray(data)) {
throw new Error('Risposta non valida (atteso array JSON)');
}
for (const user of data) {
const li = document.createElement('li');
li.textContent = user.name;
list.appendChild(li);
}
status.textContent = `OK: ${data.length} utenti caricati.`;
} catch (err) {
console.error(err);
status.textContent = 'Errore nel caricamento dei dati.';
}
}
</script>
</body>
</html>
Quando premi il pulsante:
- fetch richiama data.php
- la risposta viene convertita in JSON
- il contenuto viene renderizzato in lista senza refresh
3) Note tecniche che fanno la differenza
HTTP status: non “solo JSON”, ma anche semantica
- 200 quando tutto va bene
- 500 se il server fallisce (senza rivelare dettagli)
- 404 se l’endpoint non esiste (routing errato)
Same-origin e CORS
Se frontend e backend stanno sullo stesso dominio, non hai problemi. Se invece chiami un altro dominio, devi configurare il CORS (Access-Control-Allow-Origin) lato server.
Sicurezza pratica
- Non stampare eccezioni PDO al client (logga lato server)
- Usa variabili d’ambiente per credenziali DB
- Se ricevi input (query, filtri), usa prepared statements
Debug rapido
Prova l’endpoint direttamente dal browser o con curl:
curl -i https://TUO-DOMINIO/data.phpConclusione
Con questo schema (PHP che restituisce JSON + Fetch API in JavaScript) ottieni interfacce più fluide, meno pesanti e più moderne: il contenuto si aggiorna in tempo reale senza ricaricare l’intera pagina. È la base solida per dashboard, liste, filtri, ricerca live e paginazione.