JavaScript facile avec Prototype > 2. L'objet Ajax

1. var laRequete = new Ajax.Request(
2.   'http://monsite.com/rest/ getUser.php', {
3.     method: 'get',
4.     parameters: 'id=42',
5.     onComplete: afficherReponse
6.     } );
7.  
8. function showResponse(requete) {
9.   $('reponse').value = requete.responseText;
10.   }

1. var laRequete = new Ajax.Updater(
2.   'element',
3.   'http://monsite.com/rest/ getDerniersInscrits.php', {
4.     method: 'get',
5.     parameters: 'service=inscriptions',
6.     insertion: Insertion.Before
7.     } );

1. var laRequete = new Ajax.PerioducalUpdater(
2.   'element',
3.   'http://monsite.com/rest/ getDerniersMessages.php', {
4.     method: 'get',
5.     parameters: 'service=discussion',
6.     insertion: Insertion.Before,
7.     frequency: 5,
8.     decay: 1.3
9.     } );

L'objet Ajax
Prototype n'est pas qu'un framework ajoutant quelques méthodes-raccourcis. L'un des nouveaux objets qu'il offre aux développeurs leur permet de pleinement profiter de l'objet XMLHttpRequest. Le bien nommé Ajax libère le développeur en s'occupant des divers détails d'implémentation, de compatibilité et de mise à jour... entre autres choses.

Ajax implémente plusieurs classes, à commencer par Ajax.Base() dont la plupart des autres classes héritent, et qui implémente trois méthodes déjà essentielles : setOptions(), pour définir les options de la requête (méthode, paramètres, options) ; responseIsSuccess() pour valider que la requête lancée s'est bien déroulée ; et responseIsFailure(), le pendant négatif de responseIsSuccess().

Ajax.Request() est au coeur de la gestion des requêtes Ajax. C'est elle qui génère le bon code XMLHttpRequest, suit sa progression (a)synchrone et extrait la réponse serveur pour la traiter. Par défaut, il lance une requête dès qu'on lui indique une URL. Les paramètres de la requête sont indiqués à l'aide d'un objet anonyme, défini au moyen de la syntaxe JSON.

Ajax.Request() dispose d'une floppée d'options permettant de mieux contrôler le déroulement de la requête : onComplete (fin de la requête), onLoaded (requête envoyée), onInteractive (réception en cours), onSuccess, onFailure, onXXX (où XXX est un code de retour HTTP, comme 302 ou 404), onException (gestion des erreurs), asynchronous, postBody (corps de la requête POST), et requestHeaders (en-têtes de la requête). Armé de ces options, le développeur dispose réellement des outils pour maîtriser sa requête.

Ajax.Updater() est un mécanisme dédié aux mises à jour de la page Web. Héritant de Ajax.Request(), son fonctionnement est proche, mais ajoute un argument : l'id de l'élément à mettre à jour avec la réponse de la requête.

On découvre par ailleurs l'option insertion. Par défaut, la mise à jour d'un élément remplace son contenu, mais la classe Insertion définit plusieurs classes permettant de cibler l'insertion de la réponse dans le DOM : Insertion.Before (avant l'élément HTML cité), Insertion.Top (avant le contenu actuel de l'élément HTML), Insertion.Bottom (après le contenu de l'élément), ou Insertion.After (après l'élément).

Ajax.PeriodicalUpdater() permet de définir la régularité d'une requête Ajax, automatiquement. Son gros intérêt est non seulement de pouvoir définir une période de mise à jour (nombre de secondes entre deux relances de la requête), mais également une obsolescence. Cette dernière option est très intéressante : tant qu'une requête n'amène pas de nouvelle réponse, la période de rechargement s'étend, en étant multipliée par l'obsolescence. Ainsi, pour frequency à 5 et decay à 1,3, on aura les périodes successives suivantes : 5, 6,5, 8,45... Si une nouvelle réponse arrive, la période revient à celle définie.