PHP et AJAX

Ce chapitre explique comment combiner AJAX (dans le navigateur) avec PHP (sur le serveur) afin qu'une page puisse communiquer avec le serveur en arrière-plan et ne mettre à jour que la partie modifiée — sans rechargement complet. Vous construirez un exemple complet et fonctionnel, verrez comment lire la requête en PHP et retourner du JSON, et apprendrez les règles de sécurité et de gestion des erreurs dont les applications réelles ont besoin.

Qu'est-ce que PHP AJAX ?

AJAX signifie Asynchronous JavaScript and XML. Malgré ce nom, AJAX moderne utilise rarement XML — il envoie et reçoit du JSON, car JSON se mappe directement sur les objets JavaScript et les tableaux PHP. Le mot clé est asynchrone : le navigateur envoie une requête et continue de fonctionner. Lorsque le serveur répond, un callback met à jour la page. L'utilisateur ne voit jamais un écran blanc en cours de rechargement.

« PHP AJAX » désigne simplement ce modèle avec PHP côté serveur : JavaScript envoie la requête, un script PHP la traite (en interrogeant souvent une base de données), et PHP retourne du JSON pour que JavaScript l'affiche.

Utilisations courantes :

• Recherche en direct / autocomplétion — les suggestions apparaissent au fil de la frappe.
• Validation de formulaire en ligne — vérifier un nom d'utilisateur ou un e-mail avant la soumission.
• Boutons « J'aime » / vote / favori — mettre à jour un compteur sans quitter la page.
• Défilement infini et « Charger plus » — récupérer la page de résultats suivante à la demande.

Comment se déroule une requête AJAX

Un aller-retour complet suit toujours les quatre mêmes étapes :

1. Événement — l'utilisateur tape, clique ou soumet. JavaScript capte l'événement.
2. Requête — JavaScript envoie une requête HTTP vers un point de terminaison PHP (avec fetch ou XMLHttpRequest).
3. Traitement serveur — PHP lit les données depuis $_GET, $_POST, ou le corps brut de la requête, effectue son traitement (p. ex. une requête en base de données), et retourne une réponse JSON avec echo.
4. Mise à jour — JavaScript reçoit le JSON, le parse, et met à jour le DOM.

Le navigateur est le client ; le script PHP est le serveur. Ils n'échangent que de petites quantités de données, c'est pourquoi AJAX semble instantané comparé au rechargement d'une page entière.

Envoyer la requête : fetch vs XMLHttpRequest

XMLHttpRequest (XHR) est l'API AJAX d'origine. fetch est son remplacement moderne, basé sur les promesses — plus court, plus lisible, et intégré dans tous les navigateurs actuels. Utilisez fetch pour le nouveau code ; vous n'avez besoin de XHR que pour les très anciens navigateurs.

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

Lire la requête et répondre avec du JSON en PHP

La façon dont PHP lit les données entrantes dépend de comment JavaScript les a envoyées :

Quelle que soit la saisie, la réponse doit être du JSON avec l'en-tête correct pour que le navigateur la parse correctement :

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

La ligne header() indique au navigateur que le corps est du JSON. json_encode() transforme le tableau PHP en chaîne JSON. Consultez PHP JSON et json_encode() pour la référence complète.

Un exemple complet : suggestions de recherche en direct

Voici une autocomplétion complète et fonctionnelle : tapez dans le champ, JavaScript interroge search.php, et PHP retourne les éléments correspondants sous forme de JSON.

HTML + JavaScript (la page) :

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

Tapez ap et la liste affiche tous les fruits contenant ces lettres — apple, apricot et grape — sans que la page se recharge. Pour récupérer les suggestions depuis une base de données plutôt que depuis le tableau en mémoire, utilisez une requête préparée comme indiqué dans AJAX et MySQL.

Utilisez toujours des requêtes préparées. Ne placez jamais $_GET['q'] directement dans une chaîne SQL — c'est une faille d'injection SQL. Utilisez des paramètres liés (voir PHP MySQLi).

Validation de formulaire en ligne

Validez un champ côté serveur avant que l'utilisateur soumette le formulaire entier. Les mêmes règles PHP qui protègent la soumission peuvent être réutilisées pour la vérification 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) collecte tous les champs, PHP les lit donc depuis $_POST. Pour une couverture approfondie des formulaires, consultez Validation de formulaire PHP et Les superglobales PHP $_GET / $_POST.

Pièges courants

• CORS. Une requête vers une autre origine (domaine, port ou schéma) est bloquée sauf si le serveur PHP envoie Access-Control-Allow-Origin. Les requêtes de même origine ne nécessitent rien.
• Définissez l'en-tête JSON. Oublier header('Content-Type: application/json') fonctionne encore avec res.json(), mais cela casse les outils qui s'appuient sur le type de contenu. Définissez-le toujours.
• Gérez les erreurs. Les échecs réseau et les réponses 500 doivent être capturés — ajoutez un .catch() et vérifiez res.ok, sinon l'interface ne fait rien en silence.
• Debounce des requêtes en direct. Sans le debounce setTimeout ci-dessus, chaque frappe déclenche une requête et surcharge le serveur.
• Échappez les sorties injectées dans le DOM. Insérer du texte brut du serveur avec innerHTML peut introduire du XSS ; échappez ou utilisez textContent pour les données non fiables.

Résumé

PHP AJAX permet à une page d'échanger de petites quantités de données avec le serveur en arrière-plan et de se mettre à jour sur place. JavaScript envoie la requête avec fetch, PHP la lit depuis $_GET/$_POST/php://input, effectue son traitement, et retourne du JSON via json_encode(). Maintenez les saisies dans des requêtes préparées, définissez l'en-tête JSON, et gérez toujours le chemin d'erreur.

Prochaines étapes : connectez AJAX à une vraie base de données dans AJAX et MySQL, et apprenez le format de réponse en profondeur dans PHP JSON.

Pratique