Tutoriel Ajax N°1 : mise en oeuvre objet XMLHTTPRequest

////Tutoriel Ajax N°1 : mise en oeuvre objet XMLHTTPRequest

Découvrez Ajax en action. Comprenez l’origine de la rapidité de nombreux sites web modernes. Limitez au strict nécessaire les accès au serveur. Analysez du code ajax ‘bas niveau’. Comprenez le rôle des technologies JAVASCRIPT, XML, CSS, DOM dans Ajax. Comprenez le rôle du serveur HTTP. Comprenez le rôle de l’objet XMLHTTPRequest. Avec AJAX, chargez dans une page HTML (div) des informations stockées dans un fichier XML. Comprenez la notion de Callback ainsi que les différents états de l’objet XMLHTTPRequest.

Objis, spécialiste de la formation Java, est heureux de vous offrir ce
tutoriel, extrait de séances pratiques de la formation AJAX
dispensée par Objis.

Les + objis

 70% de travaux pratiques

 Clé USB avec tous les outils utilisés + Corrigés TPs

 Bilan pédagogique individuel + conseils

Prérequis, outils et versions

 connaisances langage JAVASCRIPT – (recommandation)

 connaissances DOM (Document Object Model) – (recommandation)

 connaissances XML (eXtensible Makup Language) – ( recommandation)

 connaissances CSS (Cascading Style Sheet) – (recommandation)

Liens utiles

 + de 100 tutoriaux java/jee Objis

 Tutoriaux AJAX Objis

 Objis, spécialiste formation java depuis 2005

 Tutoriel Alsacréation : Gestion des évènements en Javascript

Objectifs

 Comprendre l’objet XMLHTTPRequest.

 Comprendre les différences d’implémentations entre navigateurs.

 Voir Ajax en action.

 Apprendre à séparer le code HTML du code Javascript

Programme

 Partie 1 : contexte, définition & historique

 Partie 2 : Objet XMLHTTPRequest.

 Partie 3 : déploiement projet démo

 Partie 4 : rendu final et mise en évidence valeur ajoutée

 Partie 5 : optimisations

Durée

30 min.

Partie 1 : définition & historique

AJAX est un ensemble de technologies : JAVASCRIPT, XML, CSS, DOM :

— LAngage javascript (glue entre les autres technologies)

— Langage XML : langage de balise pour création de données ‘portables’

— DOM : Modèle de document Objet & API manipulation documents (X)HTML

— CSS : habillage de documents (X)HTML

Partie 2 : Codage

Le reste de ce tutoriel , nous allons :

 Créer un document XML (catalogueobjis.xml) contenant une liste de formations dispensées par Objis

 Créer une page html (XMLHTTPRequest_objiscatalogue.html) chargée de :

— récupérer les informations du document XML (dans le ‘head’)

— insérer ces informations dans une zone dédiée de la page (dans un ‘div’ du ‘body’)

 Créez un répertoire c:formationajaxtutoriel1

tutoriel-ajax-mise-en-oeuvre-xmlhttprequest-0

 

création document XML : nos données

tutoriel-ajax-mise-en-oeuvre-xmlhttprequest-1

 

création Page HTML : le corps (body)

Considérez le code HTML suivant (qui sera optimisé dans la partie 5)

tutoriel-ajax-mise-en-oeuvre-xmlhttprequest-3

 
tutoriel-ajax-mise-en-oeuvre-xmlhttprequest-2bis

création Page HTML : l’en tête (head)

tutoriel-ajax-mise-en-oeuvre-xmlhttprequest-2

 Expliquez le rôle des méthodes javascript loadFormations() et processResponse().

Partie 3 : Déploiement

 Installez un serveur web. Ici nous choisissons WAMP, serveur Apache/PHP/MySQL, qui s’installe facilement (par défaut dans c:wamp) et dont le répertoire de travail est c:wampwww.

 Lancer votre serveur web.

 Déposez le répertoire tutoriel1 dans c:wampwwwformationajaxtutoriel1

tutoriel-ajax-mise-en-oeuvre-xmlhttprequest-4

Partie 4 : Test

 Avec votre navigateur (Firefox ou IE6) , allez sur l’adresse : http://localhost/formationajax/tutoriel1/XMLHTTPRequest_objiscatalogue.html

tutoriel-ajax-mise-en-oeuvre-xmlhttprequest-5

 Cliquez sur le bouton ‘chargez formations Objis’.

L’écran suivant apparaît :

tutoriel-ajax-mise-en-oeuvre-xmlhttprequest-6

— REMARQUE : notez que l’icône du navigateur (coin haut droit) n’a pas ‘tourné’ comme c’est le cas lors de l’accès classique à une page web.

— REMARQUE : notez la rapidité du chargement des informations du fichier XML dans la page.

REMARQUES :

 Le code fonctionne pour toutes les versions de firefox (objet XMLHttprequest).

 IE 6 et précédents n’implémentent pas l’objet XMLHttprequest. les services de l’objet sont gérés dans IE6 par l’objet ActiveX Mxsml2.XMLHTTP

 IE 7 implémente l’objet XMLHttprequest.

Corrigé

corrige-tutoriel1-ajax-objis1-decouverte-ajax-XMLHTTPRequest

A VOUS DE JOUER : adapter le code pour que l’application fonctionne avec IE

Partie 5 : Optimisations

Notre page HTML ne respecte pas plusieurs principes de développement. En particulier, dans le cadre de mise en pratique du design pattern MVC, il n’ya pas de séparation claire entre la vue (page html) et la logique applicative (code javascript).

Cette séparation contribuerait à une meilleure collaboration entre un webDesigner (qui s’occupe du visuel/ergonomie de la page) et le développeur ( qui s’occupe de la gestion évènementielle via code Javascript ou traitement serveur).

En particulier, le code suivant n’est pas optimal :

tutoriel-ajax-mise-en-oeuvre-xmlhttprequest-3

 Expliquez pourquoi

Refactoring

Modifiez le code de notre application afin que :

 Le code javascript soit encapsulé dans un fichier javascript : demoajax.js

 Le code du bouton masque l’appel javascript.

Tutoriel-ajax-refactoring-demo-xmlhttpRequest-2

 Le code javascript associe l’évènement au bouton :

Tutoriel-ajax-refactoring-demo-xmlhttpRequest-1

Conclusion

Dans ce tutoriel, vous avez pratiqué l’Objet XMLHTTPRequest qui est au coeur d’Ajax. Vous avez noté le codage ‘fastidieux’ qui implique un test du navigateur, une connaissance précise des différents états de l’objet XMLHTTPRequest, une connaissance des api bas niveau de DOM.

Ces connaissances pointues de bas niveaux ne seront plus nécessaires dès lors que vous utiliserez des ‘frameworks Ajax’ comme Dojo, ExtJS, YUI, Jquery, Scrupt.aculo.us, prototype et bien d’autres. Ils vont faciliter le codage d’application Ajax en vous proposant, entre autres, des fonctions de plus ‘haut niveau’.

Vous avez également mis en oeuvre une bonne pratique de séparation de la ‘vue’ et du ‘controlleur’.

2018-01-27T16:32:48+01:00

Contactez nous

241 rue DUGUESCLIN, 69003 Lyon

Web : Objis : spécialiste formation Java