Problème à signaler:


Télécharger Cours AJAX avec Prototype en PDF



★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:



Se simplifier AJAX avec Prototype

Merci à pour ses conseils et l'aide qu'il m'a apportée pour la publication de cet article et à pour la relecture.

par Aurélien MILLET

Date de publication : 01/10/2007

Dernière mise à jour :

En un peu plus de deux ans, le terme "AJAX" s'est répandu comme une traînée de poudre dans les bouches des développeurs Web. Interactivité, rapidité, tels sont les mots d'ordre des utilisateurs au sujet des applications. AJAX est là pour y répondre. Et comme un bonheur n'arrive jamais seul, des outils apparaissent pour aider les développeurs. Cet article a pour but de vous présenter les différents moyens que le framework JavaScript Prototype vous offre pour utiliser AJAX.

I    - Introduction à AJAX et Prototype

I-A    - Communication synchrone

I-B    - Communication asynchrone

I-C    - AJAX : intérêts et inconvénients

I-D    - Prototype : de l'utilité d'un framework

I-E    - AJAX sans et avec Prototype

II   - Envoyer une requête

II-A      - Options configurables

II-B      - Fonctions callbacks

II-C      - L'objet Request

II-D      - L'objet Updater

II-E      - L'objet PeriodicalUpdater

III  - Recevoir et traiter une réponse

III-A     - Comportements spécifiques

III-B     - Comportements génériques ("responders")

III-C     - Pré-requis aux sections suivantes

III-D     - Recevoir du texte

III-E     - Recevoir du XML

III-F     - Recevoir du JSONIV - Conclusion

I - Introduction à AJAX et Prototype

I-A - Communication synchrone

Une application Web est un dialogue client / serveur. Le serveur est en écoute et attend que les clients viennent lui demander un service. Un serveur HTTP répond aux requêtes HTTP. Il passe à différents programmes les paramètres envoyés par le client. Ces programmes retournent du code HTML au serveur qui termine la transaction en faisant suivre ce code au client, dans une réponse HTTP.

Jusqu'à il y a peu (les technologies du Web évoluent très vite), les applications Web étaient synchrones. C'est-à-dire que l'utilisateur effectue une action sur une page Web, son navigateur envoie la requête au serveur, interprète sa réponse et charge la nouvelle page correspondant au code reçu. Pendant tout cet échange, l'utilisateur a lâché sa souris pour attendre sagement de voir apparaître ce qu'il a demandé.



I-B - Communication asynchrone

Aujourd'hui, il est possible de passer outre ce fonctionnement par l'utilisation toute récente de ce qui est désigné par l'acronyme bien connu : AJAX, soit : Asynchronous JavaScript And XML.

Alors, AJAX, qu'est-ce que c'est donc ?! Déjà, ce n'est pas UNE technologie. C'est l'utilisation conjointe de différentes technologies. Ensuite, on ne peut pas réellement dire que c'est une NOUVELLE technologie. Tout dépend du point de vue en fait. Les éléments qui lui servent de base (HTML, DOM, JavaScript, XML et objet XmlHttpRequest) lui sont bien antérieurs. Mais c'est l'utilisation de ces éléments qui est nouvelle.

Le pivot central est l'objet XmlHttpRequest (XHR). C'est le portage par Mozilla de l'objet XmlHttp développé par Microsoft et intégré à Internet Explorer 5 en tant qu'objet ActiveX. Cet objet permet d'envoyer des requêtes HTTP et de récupérer les données retournées par le serveur. Au fur et à mesure de l'avancée du traitement de la requête HTTP côté client puis côté serveur, l'objet passe par différents états. A chaque changement d'état, il déclenche un événement. Il est donc possible de suivre facilement la progression du traitement.

Il s'agit toujours d'échanges HTTP entre un client et un serveur mais cet échange est transparent pour l'utilisateur. Il n'attend plus forcément le chargement d'une nouvelle page en restant inactif. Son navigateur attend une réponse mais l'utilisateur, lui, a toujours la main. Classiquement, AJAX est utilisé pour mettre à jour dynamiquement une partie d'une page Web.

I-C - AJAX : intérêts et inconvénients

Le principal intérêt d'AJAX est d'apporter beaucoup plus d'interactivité aux applications Web. L'utilisateur n'a plus besoin de valider une page entière pour que ses actions soient prises en compte, il peut modifier l'interface à chaque clic. On évite ainsi le problème de la page blanche qui est affichée pendant quelques secondes le temps de charger toutes les données. Cette page blanche peut parfois dérouter l'utilisateur inexpérimenté.

L'autre avantage de réduire le volume des données transférées à chaque appel est que cela réduit le temps nécessaire au serveur pour répondre. On peut donc avoir des réactions quasi instantanées aux actions de l'utilisateur.

Un autre avantage est de décharger le serveur d'une partie du travail. Il collecte les informations demandées et les renvoie au client. A ce dernier de savoir quoi en faire, grâce à du code JavaScript. Son pendant négatif direct est la nécessité de disposer d'un navigateur Web supportant le JavaScript. Sans cela, impossible de naviguer correctement.

Il peut aussi y avoir un problème pour le développeur. Utiliser les technologies AJAX rajoute du code JavaScript et sans cadre précis, ce code finira par être brouillon et difficilement maintenable.

Attention aussi aux abus ! A trop chercher l'interactivité, on perd en accessibilité. AJAX peut également soulever des questions au niveau de la sécurité et du référencement.

I-D - Prototype : de l'utilité d'un framework

Voilà ma définition d'un framework : ensemble de bibliothèques / classes / fonctions et de conventions permettant le développement rapide d'applications. Donne un cadre structuré et impose une rigueur entraînant la production de code fiable et facile à maintenir. Vous pouvez aussi consulter la définition de dans le dictionnaire de .

Etant un développeur CakePHP convaincu, l'intérêt d'utiliser ce genre de "cadres de travail" me paraît juste évident. Aux débuts du Web, développer ses pages statiques en HTML dans son coin, ça passait. Aujourd'hui on parle dynamique et on parle surtout efficace, rapide, sûr. Non aux développements à l'artisanal au fond du garage pour un code cochon. Dites oui aux frameworks ! Vive le code lisible ! Aimez-vous les uns les autres. Pardon...



Le JavaScript est généralement le parent pauvre du développement Web. Ce n'est évidemment pas une règle générale mais le code est souvent réalisé rapidement, pour répondre aux besoins sans chercher à affiner, tant que ça marche. Et il faut tester sur tous les navigateurs puisqu'aucun ne supporte le même standard. c'est le chevalier en armure rutilante qui vient sur son fier destrier blanc immaculé sauver le pauvre développeur de ces horreurs. Il vous offre les moyens d'écrire du code concis et clair. Se chargeant des problèmes de navigateurs et autres tâches pénibles, il vous laisse vous concentrer sur l'aspect métier, ce que doit faire votre code. Et pour ça, on lui dit un grand merci !

I-E - AJAX sans et avec Prototype

Sans cadre spécial pour utiliser AJAX, il faut disposer d'une fonction spécifique qui va d'abord instancier un objet XmlHttpRequest, de différentes façons suivant le navigateur utilisé. Elle doit ensuite associer une fonction aux changements d'états de l'objet XHR (appelons la xhrStateChange). Elle doit enfin ouvrir une connexion avec le serveur en spécifiant une URL et éventuellement des paramètres.

La main passe ensuite à la fonction que nous avons nommée xhrStateChange. Elle est appelée à chaque changement d'état de l'objet XHR. On peut lui demander d'exécuter du code suivant l'état qui lui est indiqué. La transaction est considérée terminée avec succès lorsque xhr.readyState vaut 4 et lorsque xhr.status vaut 200 (ou plus généralement quand il est inférieur à 400). Quand c'est le cas, il faut ensuite passer la réponse du serveur à une fonction qui va se charger de mettre à jour la page Web avec ces nouvelles informations.

Vous pouvez regarder le code proposé par siddh dans pour voir ce qu'il est nécessaire de mettre en oeuvre dans ce type de fonctionnement.

Avec Prototype, plus besoin de vous embêter à savoir si votre script crée correctement l'objet XHR ou si vous attendez bien le bon état. Vous créez un objet, auquel vous indiquez la page à interroger, les éventuels paramètres et la fonction à appeler quand la réponse a été reçue. C'est un exemple simple, il est possible de préciser plus de choses mais nous verrons les détails plus tard. Une ligne peut donc suffire à gérer la requête asynchrone, sans avoir à se préoccuper des problèmes liés à la plateforme d'exécution du JavaScript !

A noter que pour des raisons de sécurité, les requêtes AJAX ne peuvent être faites que vers des URLs de même domaine que la page contenant le JavaScript en cours d'exécution (c'est-à-dire même protocole, même serveur et même port). Ceci vaut pour AJAX en général, Prototype n'a rien à voir là-dedans. Pour passer outre il faut par exemple passer par un "proxy" en PHP (lit le document demandé et en retourne le contenu) ou demander à l'utilisateur de diminuer les paramètres de sécurité de son navigateur.

 

II - Envoyer une requête

Prototype permet d'utiliser trois objets pour gérer des requêtes asynchrones :

•   Request

•   Ajax.Request(url[, options])

•   Instancie un objet XHR, envoie la requête au serveur et reçoit sa réponse.

•   Updater

•   Ajax.Updater(container, url[, options])

•   Effectue les mêmes opérations que Request puis met à jour le contenu d'un élément de la page avec les données reçues.

•   PeriodicalUpdater

•   Ajax.PeriodicalUpdater(container, url[, options])

•   Effectue les mêmes opérations que PeriodicalUpdater mais répétées à intervalles réguliers.

Comme on peut le voir ci-dessus, ces trois objets ont tous au moins 2 paramètres en commun :



-  url : Adresse de la page à interroger.

-  options : Paramètres de la requête et fonctions callback. Ce paramètre est optionnel.

Remarque :

L'émission d'une requête HTTP via AJAX se fait suite à la levée d'un événement JavaScript. Je ne détaillerai pas cette partie mais juste au passage, petit conseil pour ceux qui gèrent encore leurs évènements JavaScript directement dans le code XHTML (ex :

Pour en savoir plus sur ce sujet : ou . Attardez-vous surtout sur la méthode Event.observe().

II-A - Options configurables

L'un des paramètres (optionnel) est donc une liste d'options. Elle est passée sous forme d'un élément au format JSON (assimilable à un tableau associatif). Voici les différentes options accessibles et les valeurs qu'il est possible d'indiquer :

Nom

Valeur par défaut

Description

asynchronous

true

Indique si la requête est synchrone ou non.

contentType

application/x-www-form-urlencoded

En-tête "Content-Type" de la requête. Par défaut, indique que c'est une URL qui est envoyée. A modifier pour envoyer par exemple du XML.

encoding

UTF-8

Encodage du contenu de la requête.

method

POST

Méthode HTTP de la requête. Autre valeur possible : "GET".

parameters

null

Paramètres de la requête, à passer au script appelé. Ils peuvent être

 

 

exprimés principalement sous deux formes : {a: 1, b: 5} ou 'a=1&b=5'

postBody

none

Contenu spécifique pour le corps de la requête. Si une valeur est indiquée, l'argument "parameters" ne sera pas pris en compte.

requestHeaders

X-Requested-With : 'XMLHttpRequest'



X-Prototype-Version : version courante de Prototype

Accept : 'text/javascript, text/html, application/xml, text/xml, */*'

Content-type : construit en fonction de contentType et encoding

En-têtes de la requête. Peut recevoir une valeur sous deux formes : un objet (ses attributs donnent les valeurs des en-têtes) ou un tableau (case paire : nom de l'en-tête ; case impaire : valeur).

II-B - Fonctions callbacks

Les callbacks représentent différents points du cycle d'exécution d'une requête. Il est possible d'associer du code à ces étapes. Pour la liste complète des callbacks : ou . Il faut être prudent en les utilisant car certains sont implémentés différemment suivant les navigateurs.

Les deux callbacks qui sont le plus couramment utilisés sont "onSuccess" et "onFailure". Les deux sont invoqués quand une requête est terminée. onSuccess si le code d'état de la requête est entre 200 et 299, onFailure sinon.

Ils reçoivent deux paramètres :

-  L'objet XHR (souvent appelé "transport") ;

-  L'évaluation JSON de la réponse si réception d'un en-tête X-JSON, null sinon.

II-C - L'objet Request

•   Ajax.Request(url[, options])

•   Objet de base pour traiter les requêtes AJAX : instancie un objet XHR, envoie la requête au serveur et reçoit sa réponse. Il vous laisse indiquer quoi demander et quoi faire de la réponse.

•   Paramètres : URL de la page à interroger et liste optionnelle des options.

Exemple d'utilisation de l'objet Request

new Ajax.Request(  '',  {   method: 'get',   parameters: {nom1: valeur1, nom2: valeur2},  }

);

II-D - L'objet Updater

•   Ajax.Updater(container, url[, options])

•   Effectue les mêmes opérations que Request puis met à jour le contenu d'un élément de la page avec les données TEXTE reçues (celles contenues dans responseText).

•   Paramètres : identifiant de l'élément DOM à mettre à jour, URL de la page à interroger et liste optionnelle des options. En plus des options décrites plus haut, l'objet Updater en propose deux autres :



Nom

 

Valeur par défaut

Description

evalScripts

false

 

Le contenu de la réponse peut contenir des balises

 



280