XHR

Définition, exemples et bonnes pratiques

Web

À retenir

  • Permet des échanges de données asynchrones (en arrière-plan).
  • Évite le rechargement complet des pages web.
  • Est la technologie fondatrice du web moderne interactif (AJAX).

Le XHR est un mécanisme utilisé par les navigateurs web pour envoyer ou recevoir des données depuis un serveur en arrière-plan, sans que l'utilisateur n'ait besoin de rafraîchir la page. Imaginez que vous remplissiez un formulaire et que le site vérifie la disponibilité de votre pseudo instantanément : c'est un échange invisible qui rend le web fluide et interactif.

Étymologie

Il s'agit de l'acronyme de XMLHttpRequest. Bien que son nom mentionne le format XML, il a évolué pour supporter presque n'importe quel type de données, comme le JSON. Il a été initialement conçu par Microsoft pour enrichir l'application web Outlook, avant de devenir un standard incontournable du mouvement AJAX au début des années 2000.

Exemples d'usage

  • Une liste de résultats qui se met à jour automatiquement sur un site de e-commerce lorsque vous cochez un filtre de prix.
  • L'affichage de nouvelles notifications sur un réseau social sans intervention manuelle de votre part.
  • Le chargement progressif d'une carte géographique (type Google Maps) au fur et à mesure que vous vous déplacez.

Cas d'usage

Il intervient principalement en développement web frontal (frontend). On l'utilise pour récupérer des informations dans une base de données distante, envoyer des formulaires de manière transparente ou mettre à jour une partie spécifique d'une interface sans interrompre la navigation de l'utilisateur.

Bonnes pratiques

Il est recommandé de toujours prévoir une gestion d'erreurs (en cas de coupure réseau par exemple) pour éviter que l'application ne reste figée. Bien que XHR soit toujours fonctionnel, les développeurs modernes privilégient souvent l'API Fetch, plus simple d'utilisation, sauf pour des besoins spécifiques comme le suivi précis de la progression d'un envoi de fichier volumineux.

Synonymes

XMLHttpRequest requête AJAX requête asynchrone

Antonymes

chargement synchrone rafraîchissement de page

Conseil

Si vous débutez, apprenez d'abord le concept de 'requête et réponse' HTTP. Une fois que vous comprenez comment un navigateur parle à un serveur, XHR vous semblera beaucoup plus logique. Pensez à utiliser l'onglet 'Réseau' (Network) de votre navigateur pour visualiser ces requêtes invisibles en temps réel.

Questions fréquentes

Le XHR est-il obsolète ?

Pas totalement, mais il est de plus en plus remplacé par 'Fetch', une alternative plus moderne et lisible.

Est-ce que XHR ne sert qu'au XML ?

Non, il est aujourd'hui majoritairement utilisé avec le format JSON, qui est plus léger et facile à manipuler en JavaScript.

XHR ralentit-il mon site ?

Au contraire, en ne rechargeant que les petites parties nécessaires d'une page, il économise de la bande passante et améliore la rapidité ressentie.