Comment créer des applications interactives avec Ajax ?

Publié le : 19 octobre 20214 mins de lecture

Ajax est une technique de programmation qui permet le développement de RIA (Rich Internet Applications). Les RIA sont des applications web caractérisées par une grande interactivité et une grande rapidité d’exécution.

Le traitement des données s’effectue au niveau du client (navigateur) et les appels au serveur ont lieu en « arrière-plan » de manière asynchrone (Ajax signifie Asynchronous JavaScript and XML).

Que signifie en termes simples que l’échange de données entre le client et le serveur a lieu en arrière-plan ? Cela signifie que l’échange de données entre le client et le serveur permet la mise à jour dynamique de la page web sans la recharger et sans devoir appeler une nouvelle page mais, surtout, il faut noter qu’il ne faut pas attendre que la requête soit terminée pour pouvoir en faire d’autres.

Ajax n’est pas un langage de programmation mais un ensemble de technologies, voyons ce qu’elles sont :

Créer des applications interactives avec Ajax

Les applications Web qui font appel à Ajax nécessitent la dernière génération de navigateurs qui prennent en charge cette technologie. Tous les principaux navigateurs tels que FireFox, Internet Explorer, Google Chrome, Opera et Safari prennent en charge Ajax, mais il est bon de tester la compatibilité de vos applications.

Nous avons dit que les appels Ajax se produisent en arrière-plan et, une fois la réponse obtenue, seule une partie de la page est modifiée (généralement un élément HTML comme le DIV). Cela peut également poser un problème à l’utilisateur qui, une fois l’appel effectué, voit la page web « immobile » sans savoir que la demande d’information a quand même été envoyée au serveur.

Pour surmonter ce problème, il est conseillé de consacrer un élément de la page (un div est certainement approprié) à la description de l’interaction. Cela peut se faire avec un simple texte ou avec un chargeur qui montre « visuellement » à l’utilisateur qu’un échange de données est en cours.

Voyons techniquement comment nous pouvons modifier dynamiquement le contenu d’une page web en utilisant la méthode innerHTML du DOM.

Supposons qu’il y ait un div dans notre page web avec un ID unique « content ». Nous pouvons modifier le contenu de la division en utilisant une fonction spécifique puis l’appeler via un bouton. En changeant dynamiquement le style du div, nous pouvons inventer une fonction qui affiche ou cache son contenu puis l’appeler avec un autre bouton.

Voyons maintenant comment réaliser une interaction « avancée » en envoyant une requête à une page côté serveur (dans notre exemple écrit en PHP) et en obtenant une réponse au format texte.

Examinons d’abord la page PHP (file.php)

La page reçoit une variable « user » en mode GET et vérifie que son contenu est « rossi ». Si oui, il imprime la phrase « Bonjour M. Rossi », sinon la phrase « Je ne vous connais pas ». La réponse sera insérée dans le div avec l’ID unique « content » via Ajax.

Après avoir initialisé l’objet Ajax (vous pouvez consulter le code complet dans les fichiers accompagnant l’article) qui, entre autres, nous permet de vérifier qu’Ajax est supporté par le navigateur, nous avons effectué l’appel asynchrone en envoyant le contenu de la variable utilisateur et en recevant une réponse que nous avons choisi de stocker dans la variable réponse.

Tout cela se fait à l’aide de la méthode Open (dont le troisième paramètre défini à true spécifie que l’appel est asynchrone) et ensuite de la méthode Send. Rien de bien compliqué, mais arrêtons-nous un instant sur la fonction . Elle se charge de vérifier l’état de l’interaction en renvoyant un entier (readyState) qui identifie l’état de la demande à chaque instant.

Si nous avions voulu faire la demande en POST, nous aurions dû modifier le script dans les méthodes Open et Send et spécifier par le biais d’en-têtes les valeurs à envoyer.

Plan du site