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 vitesse d’exécution.
Le traitement des données a lieu au niveau du client (navigateur) et les appels au serveur sont effectués 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 se fait 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 avoir à appeler une nouvelle page, mais surtout, il faut noter qu’il n’est pas nécessaire d’attendre la mise à jour à terminer. demande 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 utilisent Ajax nécessitent la dernière génération de navigateurs prenant en charge cette technologie. Tous les principaux navigateurs comme FireFox, Internet Explorer, Google Chrome, Opera et Safari prennent en charge Ajax, mais c’est une bonne idée de tester la compatibilité de vos applications.
Nous avons dit que les appels Ajax se produisaient en arrière-plan, et une fois la réponse renvoyée, seule une partie de la page (généralement un élément HTML comme le DIV) est modifiée. Cela peut également être un problème pour l’utilisateur qui, après avoir passé l’appel, voit « toujours » la page Web sans savoir que la demande d’informations a de toute façon été envoyée au serveur.
Pour pallier ce problème, il est recommandé de dédier un élément de page (un div est certainement approprié) à la description de l’interaction. Cela peut être fait avec du texte brut ou avec un chargeur qui montre « visuellement » à l’utilisateur qu’un échange de données a lieu.
Voyons techniquement comment on peut modifier dynamiquement le contenu d’une page web en utilisant la méthode innerHTML du DOM.
Supposons qu’il y ait un div sur notre page Web avec un identifiant unique « contenu ». Nous pouvons modifier le contenu de la tranche à l’aide d’une fonction spécifique, puis l’appeler via un bouton. En changeant dynamiquement le style de la div, nous pouvons inventer une fonction qui affiche ou masque son contenu, puis l’appelle avec un autre bouton.
Voyons maintenant comment effectuer 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.
Regardons d’abord la page PHP (fichier.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 « Hello Mr. Rossi », sinon la phrase « Je ne vous connais pas ». La réponse sera insérée dans la div avec l’identifiant unique « content » via Ajax.
Après avoir initialisé l’objet Ajax (vous pouvez consulter le code complet dans les fichiers qui accompagnent l’article) qui, entre autres, nous permet de vérifier qu’Ajax est compatible avec le navigateur, nous effectuons l’appel asynchrone en envoyant le contenu de la variable utilisateur et recevoir une réponse que nous avons choisi de stocker dans la variable de réponse.
Tout cela se fait à l’aide de la méthode Open (dont le troisième paramètre défini sur true spécifie que l’appel est asynchrone) puis de la méthode Send. Rien de bien compliqué, mais attardons-nous un instant sur la fonction. Il est chargé de vérifier l’état de l’interaction en retournant un entier (readyState) qui identifie l’état de la requête à chaque instant.
