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é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.
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 ?
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
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
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)
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.
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.
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.