PHP e AJAX

Questo capitolo spiega come combinare AJAX (nel browser) con PHP (sul server) in modo che una pagina possa comunicare con il server in background e aggiornare solo la parte che è cambiata — senza ricaricare l'intera pagina. Costruirai un esempio completo e funzionante, vedrai come leggere la richiesta in PHP e restituire JSON, e imparerai le regole di sicurezza e gestione degli errori di cui le applicazioni reali hanno bisogno.

Cos'è PHP AJAX?

AJAX sta per Asynchronous JavaScript and XML. Nonostante il nome, AJAX moderno usa raramente XML — invia e riceve JSON, perché JSON si mappa direttamente sugli oggetti JavaScript e sugli array PHP. La parola chiave è asincrono: il browser invia una richiesta e continua a funzionare. Quando il server risponde, un callback aggiorna la pagina. L'utente non vede mai una schermata bianca di ricaricamento.

"PHP AJAX" è semplicemente questo schema con PHP come lato server: JavaScript invia la richiesta, uno script PHP la gestisce (spesso interrogando un database), e PHP restituisce JSON in echo per JavaScript da renderizzare.

Usi comuni:

• Ricerca live / completamento automatico — i suggerimenti appaiono mentre si digita.
• Validazione inline dei form — controlla un nome utente o un'email prima che l'utente invii.
• Pulsanti Mi piace / vota / preferiti — aggiorna un contatore senza lasciare la pagina.
• Scroll infinito e "carica altro" — recupera la pagina successiva dei risultati su richiesta.

Come fluisce una richiesta AJAX

Un singolo round trip segue sempre gli stessi quattro passaggi:

1. Evento — l'utente digita, fa clic o invia. JavaScript intercetta l'evento.
2. Richiesta — JavaScript invia una richiesta HTTP a un endpoint PHP (con fetch o XMLHttpRequest).
3. Elaborazione server — PHP legge l'input da $_GET, $_POST, o dal corpo grezzo della richiesta, svolge il suo lavoro (ad es. una query al database) e restituisce in echo una risposta JSON.
4. Aggiornamento — JavaScript riceve il JSON, lo analizza e aggiorna il DOM.

Il browser è il client; lo script PHP è il server. Scambiano solo piccole porzioni di dati, ed è per questo che AJAX sembra istantaneo rispetto al ricaricare un'intera pagina.

Inviare la richiesta: fetch vs XMLHttpRequest

XMLHttpRequest (XHR) è l'API AJAX originale. fetch è la sostituzione moderna basata su promise — più breve, più facile da leggere e integrata in ogni browser attuale. Usa fetch per il nuovo codice; hai bisogno di XHR solo quando supporti browser molto vecchi.

// Modern: fetch returns a Promise
fetch('endpoint.php')
  .then(res => res.json())   // parse the JSON body
  .then(data => console.log(data));

// Legacy: the equivalent with XMLHttpRequest
const xhr = new XMLHttpRequest();
xhr.open('GET', 'endpoint.php');
xhr.onload = () => console.log(JSON.parse(xhr.responseText));
xhr.send();

Leggere la richiesta e rispondere con JSON in PHP

Come PHP legge i dati in arrivo dipende da come JavaScript li ha inviati:

Qualunque sia l'input, la risposta dovrebbe essere JSON con l'intestazione corretta affinché il browser la analizzi correttamente:

<?php
header('Content-Type: application/json');
echo json_encode(['status' => 'success', 'value' => 42]);

La riga header() dice al browser che il corpo è JSON. json_encode() trasforma l'array PHP in una stringa JSON. Consulta PHP JSON e json_encode() per il riferimento completo.

Un esempio completo: suggerimenti di ricerca live

Questo è un completamento automatico completo e funzionante: digita nella casella, JavaScript interroga search.php, e PHP restituisce gli elementi corrispondenti come JSON.

HTML + JavaScript (la pagina):

<input id="searchInput" type="text" placeholder="Search fruit…" autocomplete="off">
<ul id="results"></ul>

<script>
const input = document.getElementById('searchInput');
const list = document.getElementById('results');
let timer;

input.addEventListener('input', () => {
  // Debounce: wait until the user pauses typing (avoids a request per keystroke)
  clearTimeout(timer);
  timer = setTimeout(() => {
    const query = input.value.trim();
    if (!query) { list.innerHTML = ''; return; }

    fetch(`search.php?q=${encodeURIComponent(query)}`)
      .then(res => res.json())
      .then(data => {
        list.innerHTML = data.suggestions
          .map(item => `<li>${item}</li>`)
          .join('');
      })
      .catch(() => { list.innerHTML = '<li>Search failed</li>'; });
  }, 250);
});
</script>

PHP (search.php):

<?php
header('Content-Type: application/json');

// 1. Read and sanitise the input
$query = trim($_GET['q'] ?? '');

// 2. Do the work. In real code this is a *prepared* SQL query — see the note below.
$fruits = ['apple', 'apricot', 'banana', 'cherry', 'grape', 'mango'];
$matches = array_values(array_filter(
    $fruits,
    fn($fruit) => str_contains($fruit, strtolower($query))
));

// 3. Reply with JSON
echo json_encode(['suggestions' => $matches]);

Digita ap e la lista mostra ogni frutto contenente quelle lettere — apple, apricot e grape — e la pagina non si ricarica mai. Per recuperare i suggerimenti da un database invece dell'array in memoria, usa un'istruzione preparata come mostrato in AJAX e MySQL Database.

Usa sempre le istruzioni preparate. Non inserire mai $_GET['q'] direttamente in una stringa SQL — è una falla di SQL injection. Usa parametri associati (consulta PHP MySQLi).

Validazione inline dei form

Valida un campo sul server prima che l'utente invii l'intero form. Le stesse regole PHP che proteggono l'invio possono essere riutilizzate per il controllo AJAX.

const form = document.getElementById('myForm');
form.addEventListener('submit', (e) => {
  e.preventDefault();              // stop the normal page reload
  fetch('validate.php', {
    method: 'POST',
    body: new FormData(form)       // sends fields as $_POST
  })
    .then(res => res.json())
    .then(data => {
      if (data.valid) form.submit();
      else console.log(data.errors);
    });
});

<?php
header('Content-Type: application/json');

$errors = [];
$email  = trim($_POST['email'] ?? '');

if ($email === '') {
    $errors[] = 'Email is required';
} elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
    $errors[] = 'Invalid email format';
}

echo json_encode(['valid' => empty($errors), 'errors' => $errors]);

new FormData(form) raccoglie tutti i campi, quindi PHP li legge da $_POST. Per una copertura più approfondita dei form consulta PHP Form Validation e PHP $_GET / $_POST superglobals.

Errori comuni

• CORS. Una richiesta verso un'origine diversa (dominio, porta o schema) viene bloccata a meno che il server PHP non invii Access-Control-Allow-Origin. Le richieste della stessa origine non richiedono nulla.
• Imposta l'intestazione JSON. Dimenticare header('Content-Type: application/json') funziona ancora con res.json(), ma rompe gli strumenti che si basano sul tipo di contenuto. Impostala sempre.
• Gestisci gli errori. I fallimenti di rete e le risposte 500 devono essere intercettati — aggiungi un .catch() e controlla res.ok, altrimenti l'interfaccia utente non farà nulla in silenzio.
• Debounce delle richieste live. Senza il debounce setTimeout mostrato sopra, ogni pressione di tasto invia una richiesta e sovraccarica il server.
• Esegui l'escape dell'output che inserisci nel DOM. Inserire testo grezzo del server con innerHTML può introdurre XSS; esegui l'escape o usa textContent per i dati non attendibili.

Riepilogo

PHP AJAX permette a una pagina di scambiare piccole quantità di dati con il server in background e aggiornarsi sul posto. JavaScript invia la richiesta con fetch, PHP la legge da $_GET/$_POST/php://input, svolge il suo lavoro e restituisce JSON tramite json_encode(). Mantieni l'input sulle istruzioni preparate, imposta l'intestazione JSON e gestisci sempre il percorso degli errori.

Prossimi passi: connetti AJAX a un database reale in AJAX e MySQL, e approfondisci il formato di risposta in PHP JSON.

Pratica