Introduction aux technologies AJAX, tutoriel & guide de travaux pratiques en pdf.
Définition
•AJAX = Asynchronous JavaScript And XML
•Méthode informatique de développement d’applications Web.
•Utilisation conjointe d’un ensemble de technologies couramment utilisées sur le Web :
¨HTML (ou XHTML) et CSS pour la mise en forme
¨DOM et JavaScript pour afficher et interagir dynamiquement avec l’information présentée
¨XML, XSLT et l’objet XMLHttpRequest pour échanger et manipuler les données de manière asynchrone avec le serveur web
Comparaison avec les applications web traditionnelles
•Application WEB traditionnelle :
¨Le client envoie une requete HTTP
¨Le serveur renvoie une page
¨Cela consomme inutilement une partie de la bande passante, car une grande partie du code HTML est commun aux différentes pages de l’application
¨Le chargement d’une nouvelle page à chaque requete n’est pas ergonomique
Comparaison avec les applications web traditionnelles (4)
•Application AJAX :
¨Envoyer des requêtes au serveur HTTP pour ne récupérer que les données nécessaires
¨Utilisation la requête HTTP XMLHttpRequest
¨Utilisation la puissance des feuilles de style (CSS) et de Javascript côté client pour interpréter la réponse du serveur
¨Permet au navigateur de modifier partiellement la page pour la mettre à jour sans avoir à la recharger
¨Applications plus réactives, meilleure ergonomie
Comparaison avec les applications web traditionnelles (5)
•Application AJAX :
¨quantité de données échangées fortement réduite.
¨Nécessite de charger, sur la première page,
une bibliothèque AJAX volumineuse
une bibliothèque AJAX volumineuse
¨Nécessite un navigateur compatible, autorisant le Javascritpt et le compasant XMLHTTP
¨Nécessite des tests minucieux car il existe de grandes différences entre les navigateurs
Qui supporte AJAX ?
•Les navigateurs Web qui supportent les technologies décrites précédemment :
¨Mozilla, Firefox, Internet Explorer 6 , Konqueror, Safari, Opera 9
•Open AJAX Initiative : groupe créé par IBM, avec des partenaires tels que
¨BEA, Borland, the Dojo Foundation, Eclipse Foundation, Google, Laszlo Systems, Mozilla Corporation, Novell, Openwave Systems, Oracle, Red Hat, Yahoo, Zend, Zimbra.
Comment cela fonctionne? (1)
•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.
l’objet XmlHttpRequest
•AJAX se base sur un composant embarqué dans presque tous les navigateurs récents : XmlHttpRequest
•Cet objet a d’abord été développé par Microsoft, en tant qu’objet ActiveX, pour Internet Explorer 5
•Il a ensuite été repris et implémenté sous Mozilla 1 Safari 1.2, Konqueror 3.4 et Opera 8.
•Il n’est pas supporté par les navigateurs dits de « vieille génération ».
•En avril 2006, il a été proposé pour devenir une recommandation du W3C.
Création d’un objet XMLHttpRequest
Propriétés de l’objet XMLHttpRequest
Propriétés de l’objet XMLHttpRequest
•onreadystatechange : Gestionnaire d’événements pour les changements d’état. Il faut assigner une fonction à cette propriété pour effectuer des traitements sur les données renvoyées
•readyState : statut de l’objet.
•responseText : Réponse sous forme de chaîne de caractères.
•responseXML : Réponse sous forme d’objet DOM.
•status : code numérique de réponse du serveur HTTP
•statusText : message accompagnant le code de réponse.
ØLes code possibles pour le statut de l’objet sont :
Ø0 = non initialisé
Ø1 = ouverture. La méthode open() a été appelée avec succès
Ø2 = envoyé. La méthode send() a été appelée avec succès
Ø3 = en train de recevoir. Des données sont en train d’être transférées, mais le transfert n’est pas terminé
Ø4 = terminé. Les données sont chargées.
Méthodes de l’objet XMLHttpRequest
•abort() : Abandonne la requête.
•getAllResponseHeaders() : Renvoie l’ensemble de l’entête de la réponse sous forme de chaîne de caractères.
•getResponseHeader(« champEntete ») : Renvoie la valeur d’un champ d’entête HTTP.
•open (« method », »URL »[,asyncFlag[, « userName »[, »password »]]]) : Prépare une requête en indiquant la méthode, l’URL, la drapeau de synchronisation, le nom d’utilisateur et le mot de passe.
•send (contenu) : Effectue la requête, éventuellement en envoyant les données.
•setRequestHeader(« champ », »valeur ») : Assigne une valeur à un champ d’entête HTTP qui sera envoyé lors de la requête.
Comment cela fonctionne? (2)
•Pour recueillir des informations sur le serveur, l’objet XmlHttpRequest 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.
•Il faut créer un nouvel objet XmlHttpRequest, pour chaque fichier que vous voulez charger.
