Utilisation d'Ajax

Introduction

Le terme Ajax a été créé en 2005. Il désigne Asynchronous JAvascript and XML. En d’autres termes, il permet d’utiliser un ensemble de méthodes intégrées à JavaScript pour transférer des données entre le navigateur et un serveur en arrière-plan.

De nombreux sites utilisent cette technologie, comme par exemple Google Maps. Comment ? Pour des raisons de volumétrie, il est inconcevable de charger toutes les dalles de la terre lors du chargement initial du site. C’est pourquoi les dalles sont téléchargées à partir du serveur en cas de besoin, sans nécessiter une actualisation de la page. C’est ce que désigne le terme Asynchronous, tout se passe en arrière-plan, de manière désynchronisée, c’est-à-dire que l’utilisateur reste sur sa page, seul le contenu demandé sera affiché.

L’utilisation d’Ajax permet non seulement de réduire considérablement la quantité de données à renvoyer, mais également de rendre les pages web parfaitement dynamiques, ce qui leur permet de se comporter davantage comme des applications autonomes. Les résultats sont une interface utilisateur améliorée et une meilleure réactivité.

Une autre application très répandue de cette technologie...

Utilisation de l’objet XMLHttpRequest

Cet objet a été développé à la base par Microsoft dans la version 5.5 d’Internet Explorer.

Aujourd’hui, tous les navigateurs disposent de cet objet qui permet d’envoyer une requête HTTP vers le serveur, puis de récupérer les données renvoyées par le serveur.

1. Instanciation

Comme il s’agit d’un objet, vous l’avez compris, pour pouvoir l’utiliser il faut l’instancier. Rien de plus simple, vous en avez maintenant l’habitude :


<script> 
    var xhr = new XMLHttpRequest(); 
</script>

2. Description des méthodes et des propriétés

Le tableau ci-dessous référence les méthodes de l’objet XMLHttpRequest :

Méthode	Description
abort()	Annule la requête en cours.
getAllResponseHeaders()	Renvoie tous les en-têtes sous la forme d’une chaîne.
getResponseHeader(param)	Renvoie la valeur de param sous la forme d’une chaîne.
open(’method’, ’url’, ’asynch’)	Indique la méthode HTTP à utiliser (Get ou Post), l’URL cible et si la requête doit être gérée de manière asynchrone (true ou false).
send(data)	Envoie des données au serveur cible à l’aide de la méthode HTTP spécifiée.
setRequestHeader(’param’, ’value’)	Définit un en-tête avec une paire ’paramètre/valeur’.

On va s’en servir dans les paragraphes suivants. Bien entendu, l’objet possède également ses propriétés, décrites dans le tableau suivant :

Propriété	Description
onreadystatechange	Spécifie une fonction de gestion d’événement à appeler à chaque modification de la propriété readyState d’un objet.
readyState	Propriété entière qui indique l’état d’une requête. Elle peut avoir l’une des valeurs suivantes : 0 = non initialisé, 1 = chargement, 2 = chargé, 3 = interactif et 4 = terminé.
responseText	Les données renvoyées par le serveur au format texte.
responseXML	Les données renvoyées par le serveur au format XML.
status...