TP Javascript AJAX et XML

 

Ce TP est à l’adresse

http://perso.telecom-paristech.fr/~moissina/CPD/TPAjax/TPAjaxXML.htm

Dans ce TP, nous allons poursuivre l’exploration des possibilités de programmation intégrées à des pages Web.

Pour simplifier ce TP, nous allons utiliser une librairie très utilisée sur le Web nommée jQuery.

Un avantage de jQuery est notamment de masquer des différences qu’il peut y avoir d’un navigateur à l’autre dans l’implémentation d’AJAX.

Les éléments nécessaires pour ce TP vous seront donnés au fur et à mesure des besoins.

Intégration de jQuery et d’un code source personnel dans votre page Web

Intégrez ces lignes à votre page HTML que vous avez déjà ou que vous créerez pour ce TP.

<head>

  <script type="text/javascript" src="jquery-1.11.1.js"></script>

  <script type="text/javascript" src="script.js"></script>

</head>

 

Bien sûr, indiquez le bon chemin d’accès au fichier jquery dans l’attribut src de la première balise script.

Pour l’instant, créez un fichier script.js vide.

De la façon habituelle, intégrez un morceau de script dans votre page qui s’exécutera seulement lorsque votre page est chargée.

Affichez votre page pour vérifier que tout va bien.

Chargement dans la page d’un fichier XML

A l’adresse suivante

http://perso.telecom-paristech.fr/~moissina/CPD/TPAjax/data/mairie-09001-01.xml

se trouve un premier fichier XML qui va servir à notre travail. Vous allez le charger dans votre dossier de travail.

Dans le fichier script.js, définissez une fonction qui va appeler le fichier XML en utilisant la fonction jquery ajax dont vous chercherez la documentation.

Appelez cette fonction au chargement de votre page.

Note : on parle souvent de XHR au sujet des appels AJAX. XHR désigne de façon abrégée la fonction de base qui sert aux appels AJAX : XMLHttpRequest (vous devez avoir idée de quoi on parle quand on parle d’Ajax, de XHR, de XMLHttpRequest)

Vous devez utiliser la méthode done du résultat de l’appel ajax. La méthode done prend en paramètre une fonction ; vous pouvez lui passer la fonction suivante

function mafonction(data)

{

alert(data) ;

}

En supposant que data désigne les données reçues par l’appel AJAX.

Chargez la page dans le navigateur.

Que constatez-vous ? Qu’en déduisez-vous ?

Utiliser les données reçues : construire des éléments HTML

Vous avez pu constater que AJAX vous pemet de récupérer un objet de type XMLDocument ([object XMLDocument])

Maintenant, vous allez utiliser les données de ce document XML pour « peupler » votre page HTML.

La plupart des modes d’accès à des parties d’un document HTML proposées par jQuery fonctionnent avec un document XML.

Par exemple, si data désigne votre XML Document

$(data)

Permet à jQuery de ‘naviguer’ sur le XML et

$(data).find(« Latitude »)

Vous donne la valeur de la balise Latitude du document.

Construisez votre page Web sur ce principe

Méthodes utiles :

find

attr

Regardez notamment comment chainer les find

Utiliser les données reçues : ajouter une carte

En utilisant les éléments Latitude et Longitude du fichier XML, nous allons introduire une carte dans la page, centrée sur la position de la mairie.

Les possibilités utilisées sont fournies par l’API Google Maps.

Voir

http://mscpd.wp.mines-telecom.fr/files/2014/10/Javascript5Mashup.pdf

La ligne suivante doit figurer au début de votre fichier html, avec les déclarations de script :

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Et une dimension doit être allouée à un div pour y afficher la carte, par exemple

      <div id="map" style="margin-left:15px; width: 500px; height: 300px;"></div>

 

Dans un deuxième temps, vous allez exploiter plusieurs fichiers ‘mairie’ ; à l’adresse

http://perso.telecom-paristech.fr/~moissina/CPD/TPAjax/data/mairie-09001-01.xml

vous pouvez récupérer d’autres fichiers ‘mairie’ en remplaçant 09001 par 09002 puis 09003 (jusqu’à 15)

Récupérez-en au moins 2 ou 3 de plus

Lisez plusieurs fichiers depuis votre code, récupérez les latitudes et longitudes pour générer plusieurs marqueurs sur la carte

Sur le principe des lignes

var marker = new google.maps.Marker({

 position: myLatlng,

 map: carte,

 title: nom + "lat : " + lat + ", lon : " + lon

 });

Pour les plus agiles avec le script, générez une checkbox par mairie pour sélectionner celles que vous voulez voir sur la carte.

Vous y êtes : vous avez exploité AJAX, des données XML.

En plus, elles provenaient de l’Open Data

A partir du site data.gouv.fr

Cross Origin

Nous allons chercher à charger les fichiers de mairie directement depuis l’adresse sur le site de telecom-paristech et analyser ce qui se passe.

Au lieu de charger les fichiers de description de mairie que vous avez chargés dans vos dossiers de serveur web, vous allez essayer les charger depuis la source indiquée précédemment.

Par exemple, si vous avez chargé le fichier mairie-09001-01.xml dans le dossier data, au lieu de charger ce fichier, chargez http://perso.telecom-paristech.fr/~moissina/CPD/TPAjax/data/mairie-09001-01.xml

 Depuis un autre serveur.

Que constatez-vous ? (vous allez surement devoir regarder dans les outils de développements du navigateur).

Ne cherchez pas à résoudre le problème, ce point sera commenté par ailleurs.

(https://onsem.wp.mines-telecom.fr/fr/ est une ressource à ce sujet)

Lire une source périodiquement

Vous allez créer un fichier message.txt qui contient un petit texte.

Dans la page HTML qui s’affiche dans le navigateur de votre utilisateur vous allez mettre un bout de script qui lit périodiquement le fichier message.txt.

La lecture du fichier sera effectuée avec un appel AJAX.

Le déclenchement périodique de cette lecture sera réalisé avec la fonction setTimeout

Note : avec des navigateurs récents, on privilégierait des WebSockets pour ce genre de communication entre le client et le serveur, mais cela nous amènerait à trop de complexité côté serveur ; dans le cas des WebSockets, c’est le serveur qui décide d’envoyer un message que le client traite dès qu’il le reçoit

Dans la fonction qui reçoit le résultat de l’appel AJAX, affichez le message quelque part dans votre page, en l’ajoutant à un élément texte de la page (span ou autre).

Modifiez le fichier message.txt et regardez ce qui se passe.

Envoyer un message au serveur

Dans votre page, vous allez ajouter une zone de texte où l’utilisateur peut entrer un texte sur le modèle suivant, par exemple :

<form onsubmit="ecrit(); return false;"><input id="laPhrase" type="text" /> <input type="submit" value="Envoyer"/></form>

Lorsque l’utilisateur clique sur ‘Envoyer’ la fonction ecrit() est appellée. Vous allez devoir écrire cette fonction.

Vous devez récupérer le contenu de l’élément d’id laPhrase. Puis vous le passerez en paramètre d’un appel ajax à une URL de code PHP sur le modèle suivant

Chat.php ?message= »j’ai rien à dire »

Vous devez écrire le code de chat.php. Faites une version de base qui récupère la valeur du paramètre message et la renvoie à l’appelant.

C’est fait : vous avez envoyé un message du client vers le serveur.

Bonus

Dans le code de chat.php, récupérez le paramètre message, ouvrez le fichier message.txt en mode append (fonction fopen avec le mode « a ») et écrivez-y le message que vous venez de récupérer, puis fermez le fichier.

Regardez ce qui se passe côté client.

Variante avec  JSON

Au lieu du fichier mairie-09001-01.xml, vous allez utiliser le fichier mairie-09001-01.json, écrit dans une syntaxe compatible avec Javascript.

On pourrait utiliser la fonction ajax de jQuery comme précédemment, mais on va plutôt découvrir la fonction getJSON de jQuery.

Voyez ce que ça donne dans un dérivé des codes des étapes précédentes.

Voilà, suivant ce que vous faites, vous pourrez utiliser des données en JSON ou en XML.