Le TUTO AJAX d'ALBESOFT

AJAX : définition

Ajax est une technique qui fait usage des éléments suivants:

  • (X)HTML : pour la mise en page
  • CSS pour la présentation de la page.
  • JavaScript pour les traitements locaux, et DOM (Document Object Model) qui accède aux éléments de la page ou du formulaire ou aux éléments d'un fichier xml pris sur le serveur (avec la méthode getElementsByTagName par exemple)...
    • L'objet XMLHttpRequest lit des données ou fichiers sur le serveur de façon asynchrone.
    • Si besoin, DOMparser intègre un document XML.
  • PHP ou un autre langage de scripts peut être utilisé coté serveur.
  • Le terme "Asynchronous", asynchrone en français, signifie que l'exécution de JavaScript continue sans attendre la réponse du serveur qui sera traitée quand elle arrivera. En mode synchrone, le navigateur serait gelé en attendant la réponse du serveur.
Comment ça marche ?

Contrairement au fonctionnement habituel

  • on clique sur un lien,
  • on envoie une requête au serveur
  • celui-ci envoie une réponse au navigateur
  • le navigateur affiche la page (entière)
  • on est déconnecté du serveur

en Ajax :

  • Ajax utilise un modèle de programmation comprenant d'une part la présentation, d'autre part les événements.
  • Les événements sont les actions de l'utilisateur, qui provoquent l'appel des fonctions associées aux éléments de la page.
    L'interaction avec l'utilisateur se fait à partir des formulaires ou boutons html.
  • Ces fonctions JavaScript identifient les éléments de la page grâce au DOM et communiquent avec le serveur par l'objet XMLHttpRequest.
    Pour recueillir des informations sur le serveur cet objet dispose de deux méthodes:
    - open: établit une connexion.
    - send: envoie une requête au serveur.
  • Les données fournies par le serveur seront récupérées dans les champs responseXml ou responseText de l'objet XMLHttpRequest. S'il s'agit d'un fichier xml, il sera lisible dans responseXml par les méthodes de Dom.
    Noter qu'il faut créer un nouvel objet XMLHttpRequest, pour chaque fichier que vous voulez charger.

    Il faut attendre la disponibilité des données, et l'état est donné par l'attribut readyState de XMLHttpRequest.
    Les états de readyState sont les suivants (seul le dernier est vraiment utile):
    • 0: non initialisé.
    • 1: connexion établie.
    • 2: requête reçue.
    • 3: réponse en cours.
    • 4: terminé.
En pratique

On utilisera surtout de l'AJAT (T pour Texte), le service WEB fournit un texte au format HTML (incluant les balises). Ce texte n'a plus qu'à être "injecté" dans la page sans rechargement de celle-ci.

La première partie de cette formation traite des mécanisme de base, du fonctionnement d'AJAX.

La deuxième partie présente l'utilisation de bibliothèques ("frameworks") qui simplifient la programmation en encapsulant le travail de bas niveau et en offrant des possibilités très intéressantes pour le code Javascript. La bibliothèque employée est prototype.js.
Cette bibliothèque vient de faire l'objet d'une mise à jour assez récente, suite à la reprise de son développement.

La troisième partie montre des effets générés par la bibliothèque scriptaculous.js qui est un complément à prototype.js

La quatrième partie montre des effets générés par la bibliothèque JQuery
Cette bibliothèque est plus récente, elle peut être complétée par des plug-ins (très nombreux, disponibles sur internet).
Associée à jQuery_ui, elle propose des effets visuels intéressants.

Documentation

Vous pouvez télécharger le tutoriel (format pdf)

et les exercices