Site A.T.L.A.N.T.I.C-83
COURS = Programmation AJAX (Chapitre_4) - VERSION: 1.0 (M.A.J: 29/09/11)
- AUTEUR(s): Bernard GIACOMONI - Vanessa GIACOMONI
Ecran large mobile
Retour
sommaire cours

IV.APPLICATION:

IV.1.OBJECTIFS ET PLAN DU CHAPITRE:

Nous allons maintenant essayer d'appliquer les notions acquises lors des chapitres prcdents un cas d'utilisation d'AJAX. L'exemple choisi (l'affichage du contenu d'un fichier XML) est assez simple. Cependant, il permet d'illustrer une utilisation assez frquente d'AJAX et d'tudier la conversion d'un document XML en document HTML au moyen d'un code javascript. Des exemples plus complexes de programmation AJAX sont (ou seront prochainement) prsents dans la rubrique "Foire aux codes" de notre site.



IV.2.EXERCICE: AFFICHAGE DES DONNEES D'UN FICHIER XML:

IV.2.1.INTRODUCTION:

Cette tude est prsente sous la forme d'un "travail dirig": de ce fait, au cours de ses diffrentes tapes, le lecteur est incit effectuer diffrents exercices "en ligne" qui lui permettent de concrtiser et d'exprienter les diffrentes notions utilises. Il peut donc soit effectuer ces travaux et vrifier leur rsultat avant de passer leur correction, soit aller directement la correction.


Le mcanisme spcifique aux changes client-serveur "AJAX" (cration d'un objet XMLHttpRequest, paramtrage et envoi de requtes, rcupration des contenus texte ou xml) a t dcrit en dtail au chapitre prcdent. Pour implmenter ces mcanismes dans le cas du prsent exercice, nous prendrons comme ossature de programme le code javascript prsent en exemple au prcdent chapitre.

IV.2.2.OBJECTIF A ATTEINDRE:

Nous voulons afficher dans un cadre de la page web en cours de visualisation sur le navigateur du client le contenu d'un fichier XML. Ce fichier, dont le chemin d'accs par rapport la page en cours est "./Dep_Chapitre_4/ListeXML_Chap4_Exemple_1.xml" et dont le contenu est donn ci-dessous, reprsente les affluences mensuelles d'un site web pour une anne donne.
					
0000: <?xml version="1.0" encoding="iso-8859-1"?> 0001: <root> 0002: <mois nom="Janvier">3201</mois> 0003: 0004: <mois nom="Mars">4324</mois> 0005: <mois nom="Avril">6127</mois> 0006: <mois nom="Mai">7435</mois> 0007: <mois nom="Juin">9743</mois> 0008: <mois nom="Juillet">8324</mois> 0009: 0010: <mois nom="Septembre">7654</mois> 0011: <mois nom="Octobre">6428</mois> 0012: <mois nom="Novembre">4567</mois> 0013: 0014: </root>


RAPPELS SUR X.M.L:
Rappelons qu'X.M.L (eXtensible Markup Language) permet de dcrire la structure et le contenu d'un document indpendemment de sa prsentation, l'aide de balises (markup) imbrique formant une arborescence partir d'une racine unique (la balise root).


L'examen du document XML prsent ci-dessus permet d'ailleurs d'identifier de fortes similitudes entre la structure d'un document XML et celle d'un document HTML:
  • La structure arborescente, dcrite sous la forme de balises imbriques (12 balises <mois> insres dans une balise <root>)
  • La dclaration et l'initialisation d'attributs dans les balises (attribut "nom" dans les balises <mois>)
  • La prsence de contenus textuels l'intrieur des balises ( <mois...>nombre de visites dans le mois</mois>)


Cependant, la diffrence d'HTML, l'utilisateur d'X.M.L. a la possibilit de crer ses types de propres balises et les attributs de ces balises en fonction de ses besoins (d'o le qualificatif "extensible"). Cette extensibilit (pratiquement) illimite permet X.M.L. de dcrire des donnes de nature extrmement diverses(le contenu d'un article de journal, d'un message, d'une base de donnes, etc.). Ainsi, les balises <root> et <mois> et l'attribut "nom" apparaissant dans l'exemple sont des crations de l'utilisateur et n'ont de sens que dans le cadre du document.


D'autre part, la prsentation d'un document XML ne peut tre dcrite que par un langage tiers (css, xsl ou xslt).


ListeXLM_Chap4_Exemple_1.xml dcrit donc la structure d'une liste de 12 balises de type "mois", munies d'un attribut "nom" dont la valeur est le nom du mois, et dont le contenu reprsente le nombre de visites qu'un site web a reu durant le mois en cours. Le problme rsoudre est d'afficher cette liste double entres (nom de mois --> nombre de visiteurs) dans un cadre de la page web.


IV.2.3.ETUDE DU PROBLEME:

IV.2.3.1.RESULTAT A OBTENIR:

La diffrence avec l'exemple donn au chapitre III est qu'un contenu XML ne peut tre directement intgr dans du code HTML: il faut donc transformer les donnes reues en un code HTML reprsentant la liste dcrite par le document xml. Pour ne pas augmenter trop la difficult, on pourra se contenter de la prsentation suivante:
  • Janvier=3201
  • Février=5432
  • Mars=4324
  • Avril=6127
  • Mai=7435
  • Juin=9743
  • Juillet=8324
  • Août=6753
  • Septembre=7654
  • Octobre=6428
  • Novembre=4567
  • Décembre=3895
Une partie du problme consiste donc transformer le contenu XML reu en un contenu HTML smantiquement identique.


IV.2.3.2.TRANSFORMATION D'UN CONTENU XML en CONTENU HTML PAR JAVASCRIPT:

La transformation voque au paragraphe prcdent devra tre effectue par le script javascript charg de traiter la rponse du serveur la requte AJAX. Heureusement, la structure arborescente d'un contenu XML permet javascript de le traiter comme s'il s'agissait d'une arborescence du D.O.M. (Document Object Model):


Du fait de la structure arborescente des documents XML, de leur prsentation sous la forme de balises imbriques, de la prsence d'attributs associs aux balises et de contenus insrs dans celles-ci, le D.O.M. est tout fait apte modliser ce type de document. La consquence est que la plupart des fonctions javascript destines traiter les objets du D.O.M. sont applicables un document XML. Par exemple, supposons qu'aprs une requte AJAX, le contenu du fichier Liste_Exemple_4_1.xml se retrouve dans l'attribut responseXML de l'objet AJAX XHR:
  • Pour obtenir une rfrence sur l'objet "racine", il suffira de faire: var racine = XHR.responseXML.documentElement;
  • Pour obtenir une rfrence sur la liste des objets "mois", il suffira de faire: var ListeNoeuds = XHR.responseXML.getElementsByTagName("mois");
  • Pour obtenir la longueur de la liste des objets "mois", il suffira de faire: var LongueurListe = ListeNoeuds.length;
  • Pour obtenir une rfrence sur l'attribut "nom" du noeud "mois" n i, il suffira de faire: var Attribut = ListeNoeuds[i].getAttribute("nom");
  • Pour obtenir une rfrence sur le contenu du noeud "mois" n i, il suffira de faire: var Contenu = ListeNoeuds[i].firstChild.nodeValue;
    (car le contenu de la balise est un noeud texte qui est le premier noeud fils de cette balise).
  • Etc.

IV.2.3.3.CONCLUSION:

La dmarche consistera donc:
  • A rcuprer dans le logiciel client le contenu du fichier XML traduire (grce une interaction AJAX).
  • Puis traduire le contenu XML obtenu en une liste HTML smantiquement identique au contenu XML reu.
  • Enfin, afficher ce contenu dans le cadre destin cet effet.


IV.2.4.REALISATION:

IV.2.4.1.AVANT-PROPOS:

Pour raliser cet exemple, nous prendrons pour base le code javascript utilis pour l'exemple du chapitre III. Nous allons donc crer une nouvelle classe GestionAjax munie de 3 mthodes: le constructeur "GestionAjax"et les mthodes "Envoi" et "Reception".


IV.2.4.2.REPERAGE DES MODIFICATIONS A EFFECTUER:

Le premier exercice va consister reprer, dans le listing produit dans le cadre de l'exemple donn au chapitre III, les lignes de code qu'il sera ncessaire de modifier ou supprimer.


				
0: 1: //---------------------------------------------------------------------------------------------- 2: // Fichier: JS_Exemple_3_1.js 3: //---------------------------------------------------------------------------------------------- 4: 5: //---------------------------------------------------------------------------------------------- 6: // Constructeur de la classe GestionAjax. 7: // Le constructeur tente, en fonction du type de navigateur, de crer un objet XMLHttpRequest. 8: // Si la cration est russie, l'objet est point par l'attribut XHR et la fonction retourne 0 9: // Sinon, XHR contient null 10: //-------------------------------------------------------------------------------------------- 11: function GestionAjax ( Envoi, Reception ) 12: { 13: // DECLARATION D'ATTRIBUTS 14: this.XHR = null; 15: 16: // DECLARATION DE METHODES 17: this.Envoi = Envoi; 18: this.Reception = Reception; 19: 20: // CREATION D'UN OBJET XMLHttpRequest 21: // Tenter de crer l'objet XHR en fonction du navigateur utilis 22: if (window.XMLHttpRequest) // Firefox 23: { 24: this.XHR = new XMLHttpRequest(); 25: } 26: else if (window.ActiveXObject) // Internet Explorer 27: { 28: this.XHR = new ActiveXObject("Microsoft.XMLHTTP"); 29: } 30: else 31: { 32: // Signaler que XMLHttpRequest n'est pas support par le navigateur 33: window.alert("Votre navigateur n'est quip pour utiliser les objets XMLHttpRequest."); 34: } 35: } 36: 37: //-------------------------------- 38: // Methode Envoi 39: //-------------------------------- 40: function Envoi () 41: { 42: // Ouverture de l'change 43: this.XHR.open ( "get", "Dep_Chapitre_3/Contenu_Exemple_3_1.html", true); // Ouverture change, requte GET, URL=Conten44: u.html, 45: // mode asynchrone. 46: 47: // Choisir l'encodage correspondant au traitement choisi 48: this.XHR.setRequestHeader( "Content-type", "application/x-www-form-urlencoded" ); 49: 50: // Connexion l'vnement de rception la fonction de traitement 51: this.XHR.onreadystatechange = Rec; // Connexion du gestionnaire d'vnement de rception une fonction exterieure 52: 53: // la classe. Cette fonction appellera la mthode Reception (l'appel direct de la 54: // methode ne fonctionne pas!!!) 55: // Envoi de la requte 56: this.XHR.send( "" ); // envoi de la requte avec une liste d'arguments vide 57: 58: } 59: 60: //-------------------------------- 61: // Methode Reception 62: //-------------------------------- 63: function Reception () 64: { 65: // SI ( L'tat de l'objet XHR est "complte") ALORS Insrer le code HTML reu dans le cadre "Affichage" 66: if( this.XHR.readyState == 4 ) 67: { 68: document.getElementById ( "Affichage" ).innerHTML = this.XHR.responseText; 69: // FINSI 70: } 71: } 72: 73: //------------------------------------------------------------------------------------------------- 74: // Cette fonction, connecte directement au gestionnaire d'vnement, sert de relais pour l'appel 75: // de la mthode Reception. En effet, l'appel direct d'une mthode par un gestionnaire d'vnement 76: // ne semble pas fonctionner !!! 77: //------------------------------------------------------------------------------------------------- 78: function Rec() 79: { 80: ObjGestionAjax.Reception(); 81: } 82:
Saisissez dans le champ de saisie ci-dessous les numeros des lignes modifier ou supprimer, en les sparant par des virgules (ex: 23,45), puis activez le bouton "VERIFICATION" pour connatre le rsultat de votre proposition. Vous pouvez ensuite soit choisir de faire une autre proposition, soit activer le bouton "CORRECTION" pour connatre le corrig.



IV.2.4.3.ELABORATION DU CONTENU HTML A PARTIR DU CONTENU XML:

ANALYSE DU TRAITEMENT ALGORITHMIQUE A EFFECTUER:
Il reste donc crire un code javascript rpondant la problmatique pose, que l'on peut rsumer ainsi:


						
0000: <?xml version="1.0" encoding="iso-8859-1"?> 0001: <root> 0002: <mois nom="Janvier">3201</mois> 0003: 0004: <mois nom="Mars">4324</mois> 0005: <mois nom="Avril">6127</mois> 0006: <mois nom="Mai">7435</mois> 0007: <mois nom="Juin">9743</mois> 0008: <mois nom="Juillet">8324</mois> 0009: 0010: <mois nom="Septembre">7654</mois> 0011: <mois nom="Octobre">6428</mois> 0012: <mois nom="Novembre">4567</mois> 0013: 0014: </root>
						
0000: 0001: <ul> 0002: <li>Janvier=3201</li> 0003: <li>F&eacute;vrier=5432</li> 0004: <li>Mars=4324</li> 0005: <li>Avril=6127</li> 0006: <li>Mai=7435</li> 0007: <li>Juin=9743</li> 0008: <li>Juillet=8324</li> 0009: <li>Ao&ucirc;t=6753</li> 0010: <li>Septembre=7654</li> 0011: <li>Octobre=6428</li> 0012: <li>Novembre=4567</li> 0013: <li>D&eacute;cembre=3895</li> 0014: </ul>





<-- CECI
doit tre remplac par
CECI -->


Nous allons donc tudier l'algorithme ncessaire pour effectuer cette transformation:


Le document XML est compos d'une liste de noeuds de type "mois", comportant chacun un attribut "nom" dont la valeur est le nom du mois correspondant au noeud. Chaque noeud contient galement un texte qui reprsente le nombre de visites du mois. Du point de vue du D.O.M., chaque noeud du document xml peut tre associ une balise dont le "tag" est "mois", munie de l'attribut "nom" et possdant un noeud texte enfant reprsentant le nombre de visites du mois.


Il s'agit donc de traduire cette structure en une liste de type <ul> dont chaque balise <li> correspond chaque noeud "mois" du document XLM et possde un noeud texte fils dont le contenu est gal un texte que l'on peut dcrire comme suit: <nom du mois> = <nombre de visites du mois>. Nous allons essayer de reprsenter ce traitement par un algorithme crit en "pseudo code":


Nous allons donc crire un algorithme permettant d'assurer la conversion du contenu XML en contenu HTML "./Dep_Chapitre_4/ListeXML_Chap4_Exemple_1.xml" et d'effectuer la conversion du contenu XML en HTML. Pour cela, nous allons utiliser un outil de codage qui permettra de composer cet algorithme ligne ligne en slectionnant des lignes de pseudo-code dans une liste, puis en intgrant ces lignes dans le listing.


La liste propose contient toutes les instructions ncessaires, mais, bien sr, celles-ci ne sont pas prsentes dans le bon ordre. D'autre part, des lignes inutiles ou errones ont t introduites dans cette liste. A vous de slectionner les bonnes.




Pour afficher la solution propose dans un autre onglet, cliquez ci-contre: Solution propose: ,


Les diffrentes indications donnes au paragraphe IV.2.3.2 devraient permettre de traduire cet algorithme en un code javascript rpondant la question. C'est l'exercice que nous proposons au paragraphe suivant.
ECRITURE DU PROGRAMME EN JAVASCRIPT:
Nous allons donc crire une classe "GestionAjax" permettant d'assurer le tlchargement du fichier "./Dep_Chapitre_4/ListeXML_Chap4_Exemple_1.xml" et d'effectuer la conversion du contenu XML en HTML. Pour cela, nous allons de nouveau utiliser l'outil de codage. Le code javascript obtenu pourra tre essay "en ligne".


Comme prcdemment, La liste propose contient toutes les instructions ncessaires, mais, bien sr,celles-ci ne sont pas prsentes dans le bon ordre. D'autre part, des lignes inutiles ou errones ont t introduites dans cette liste. A vous de slectionner les bonnes.


Pour faciliter votre tche, une bauche de programme figure dja dans ce listing. Il suffira de le modifier et de le complter en ajoutant ou substituant des lignes slectionnes dans le slecteur aux lignes existantes. Lorsque vous estimerez que le codage de la classe est termine, vous pourrez faire une sauvegarde du listing dans un fichier, de faon pouvoir tester son fonctionnement (bouton "Faire une sauvegarde").



ACTIVATION DU PROGRAMME JAVASCRIPT DEPUIS LA PAGE WEB UTILISATRICE:
Il reste intgrer dans la page web utilisatrice l'activation du code javascript. Celui-ci pourra se prsenter de la faon suivante:
				
...............................................
<script type="text/javascript" src="./Dep_Chapitre_4/Resultat_Chap4_Exemple_1.js"></script>
<script type="text/javascript">
var ObjGestionAjax = new GestionAjax ( Envoi, Reception ); // Cration d'un objet GestionAjax
</script>

<!-- Cadre d'affichage de la liste -->
<div id="Affichage" style="width: 48%; min-height: 100px; border: 1px solid black; text-align: left;" onclick="ObjGestionAjax.Envoi();">
	<-- Zone d'affichage de la liste --> 
</div>
...............................................
				


IV.2.5.ESSAIS ET CORRECTION:

Si vous avez effectu un sauvegarde de votre listing, vous pouvez tester son fonctionnement en activant le bouton "Essayer le code produit". Sinon, vous pouvez directement voir la correction (bouton "Etudier la solution propose").





Retour accs cours Retour sommaire cours
FormateurGaucheRepos FormateurGaucheActif FormateurDroitRepos FormateurDroitActif