cours web developpement statique AJAX 2024

1. Développement Web avancé
Chapitre 4 : AJAX
07/10/2022 1

2. Qu’est ce que AJAX ?
07/10/2022 2
♦ Le terme AJAX est apparu pour la première fois le 18 février 2005, dans un article
de James Garret intitulé "Ajax : une nouvelle approche pour les applications Web".
♦ AJAX est un acronyme d’Asynchronous JavaScript And XML (JavaScript et XML
asynchrone) qui désigne une approche innovante dans la conception de pages Web
dont l’objectif est d’optimiser leur interactivité et leur confort d’utilisation.
♦ AJAX n’est pas une technologie nouvelle, c’est un terme synthétique qui désigne
l’utilisation conjointe dans les pages Web de différentes technologies. Ainsi AJAX
incorpore :
▪ le XHTML et les feuilles de style CSS ;
▪ le JavaScript ;
▪ le Document Object Model (DOM) ;
▪ l’objet XMLHttpRequest ;
▪ le XML et le XSL.

3. Principe d’AJAX
07/10/2022 3
♦ Dans une application Web classique, la plupart des interactions de l’utilisateur comme
le clic sur un lien ou l’envoi d’un formulaire, déclenchent une requête HTTP vers le
serveur Web. Ce dernier, après le traitement éventuel des données, retourne une
nouvelle page HTML ou XHTML au client. Donc chaque manipulation entraîne la
transmission d'une requête et l'affichage d'une nouvelle page et l'utilisateur doit attendre
l'arrivée de la réponse pour effectuer d'autres manipulations.
♦ Avec AJAX, il est possible de ne mettre à jour qu’une partie de la page. Les requêtes
HTTP sont envoyées par une instruction JavaScript en réaction à une action de
l’utilisateur. La réponse HTTP est également récupérée par JavaScript, qui peut dés lors
mettre à jour la page courante, grâce au DOM et aux CSS.
Plusieurs requêtes peuvent ainsi être émises depuis une même page, laquelle se met
à jour partiellement à chaque réponse.
♦ La deuxième caractéristique d’AJAX est que la communication avec le serveur est
asynchrone. La requête est envoyée au serveur sans attendre la réponse, le traitement à
effectuer à la réception de celle-ci étant spécifié auparavant. JavaScript se charge
d’exécuter ce traitement quand la réponse arrive. L’utilisateur peut de la sorte continuer
à interagir avec l’application, sans être bloqué par l’attente de la réponse, contrairement
au Web classique.

4. Avantages et inconvénients d’AJAX
07/10/2022 4
♦ Avantages :
▪ AJAX, c’est principalement la révolution asynchrone ! La technique qui consiste à
charger en arrière plan des éléments de réponse aux interactions de l’utilisateur.
▪ L’interface est plus réactive car seulement une petite partie est mise à jour, donnant
ainsi l’impression à l’utilisateur que les changements se réalisent instantanément.
▪ Le temps d’attente de l’utilisateur est réduit car il n’est plus nécessaire de recharger
toute la page pour obtenir une nouvelle information.
▪ Le temps de transfert entre le client et le serveur est considérablement réduit car il lui
suffit de transférer les éléments de la réponse au lieu d’envoyer toute la page avec
des éléments le plus souvent redondants.
♦ Inconvénients :
▪ Même si Ajax utilise des composants connus comme le JavaScript, le XML, le DOM
et l’objet XMLHttpRequest, son code est pointu et délicat à mettre en place. Le fait
de développer une application AJAX peut augmenter sensiblement le temps de
conception et donc le coût.
▪ AJAX comporte beaucoup de JavaScript. Les utilisateurs qui ont désactivé la prise
en charge du JavaScript par leur navigateur, n’ont pas accès aux applications AJAX.
On peut raisonnablement estimer que cette population est faible mais elle existe.

5. Comment fonctionne AJAX ?
07/10/2022 5
♦ Le modèle AJAX se décompose comme suit :
▪ La page Web s’affiche dans le navigateur, appelé aussi le client.
▪ La moindre interaction de l’utilisateur, par exemple l’encodage d’un formulaire
ou le clique sur un élément, est prise en charge par la gestion des événements de
JavaScript.
▪ Le code JavaScript de la page initie une requête XMLHttpRequest. Ce dernier va
permettre d'envoyer au serveur des données au format xml ou texte sous la
forme d'une requête HTTP.
▪ Le serveur interprète ces données via un langage serveur (Ex: PHP). Une fois le
traitement fini, le serveur renvoie à l'objet XMLHttpRequest une réponse au
format xml ou texte.
▪ Le fichier réponse est alors pris en charge par le DOM, et toujours par le
JavaScript, pour être traité et affiché de façon dynamique dans la page initiale.
Ce dialogue se fait de façon asynchrone, c'est à dire sans rechargement de la
page html.

6. L'objet XMLHttpRequest
07/10/2022 6
♦ L’entité de base permettant de mettre en œuvre AJAX dans un navigateur Web est
l’objet JavaScript XMLHttpRequest. Cet objet était à l'origine un objet ActiveX
introduit par Microsoft dans Internet Explorer 5. Les autres navigateurs l'ont
ensuite implémenté en tant qu'objet JavaScript, ce que Microsoft a également fait
depuis IE7.
♦ Cet objet permet de faire des requêtes HTTP afin de récupérer des données au
format XML (mais aussi HTML, ou encore texte simple) qui pourront être
intégrées à un document. Cela peut être très utile pour mettre à jour des données
sans pour autant recharger la page.
♦ Il convient de remarquer que les navigateurs trop anciens ou n'exécutant pas le
code JavaScript ne donnent pas accès à cette technique.

7. L’objet XMLHttpRequest
07/10/2022 7
♦ Création d’un objet XMLHttpRequest :
Le script suivant crée l'objet selon ce que le navigateur supporte :
if(window.XMLHttpRequest)
var xhr = new XMLHttpRequest();
else if(window.ActiveXObject)
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
else
alert("Votre navigateur n’est pas compatible avec AJAX...");
Explication :
Un test préliminaire vérifie si le navigateur supporte l’objet XMLHttpRequest
(IE7+, Firefox, Chrome, Opera, Safari) . Si c’est le cas, l’objet est créé dans la
variable var xhr = new XMLHttpRequest(). Dans le cas contraire, l’objet est
créé par le contrôle ActiveX (IE6, IE5).
Il est peut être nécessaire de prévoir un message d’alerte pour les rares
utilisateurs dont le navigateur ne reconnaît pas l’objet XMLHttpRequest et pour
lequel l’application AJAX ne fonctionne pas.

8. L'objet XMLHttpRequest
07/10/2022 8
♦ Propriétés et méthodes de l’objet XMLHttpRequest :
1- Propriétés :
1.1- readyState : Permet de connaître l’évolution de la requête. Elle renvoie un
entier entre 0 et 4 :
0 → La requête n’est pas initialisée
1 → Début de transfert des données
2 → Les données sont transférées
3 → Les données reçues sont partiellement accessibles
4 → Les données sont complètement accessibles
C’est la valeur 4 qui nous intéresse car, une fois obtenue, les données
transférées peuvent alors être traitées.

9. L'objet XMLHttpRequest
07/10/2022 9
1.2- onreadystatechange : Gestionnaire d’événements qui prend en charge les
changements d’état de la requête. Elle permet de positionner une fonction
de rappel, qui est appelée lorsque l’événement readystatechange se produit.
1.3- responseText : Réponse du serveur sous forme de chaîne de caractères.
1.4- responseXML : Réponse du serveur sous forme d’un document XML.
1.5- status : Renvoie le code numérique de la réponse du serveur HTTP. Voici
quelques valeurs pour cette propriété :
200 si la requête a été exécutée avec succès
403 pour un accès interdit
404 pour un fichier non trouvé
500 pour une erreur interne au serveur

10. L'objet XMLHttpRequest
07/10/2022 10
2 Méthodes :
2.1- La méthode open :
▪ Elle initialise la requête selon une série de paramètres fournis en argument.
▪ Syntaxe : open ("méthode","url du fichier", mode)
- "méthode" contient la méthode d'envoi des données : GET pour recevoir un fichier du
serveur (les données à transmettre sont concaténées à l'URL) ou POST pour envoyer
des données vers le serveur via la méthode send. Notons l’emploi de guillemets.
- "url du fichier" est l’adresse absolue ou relative du fichier. Notons l’emploi de
guillemets.
- mode prend la valeur true (valeur par défaut) pour le mode asynchrone qui nous
intéresse dans le cadre de ce cours ou false pour une exécution en mode normal, ou
synchrone.
En mode synchrone, tant que la réponse à la requête n’est pas parvenue, le script se
met en pause et bloque le navigateur. Ce qui n’est jamais très convivial pour
l’utilisateur.
En mode asynchrone, le script poursuit son exécution sans bloquer le processus. Ce
qui permet une navigation plus fluide et plus confortable pour l’utilisateur.

11. L'objet XMLHttpRequest
07/10/2022 11
2.2- La méthode send :
▪ Effectue la requête, avec éventuellement l’envoi de données.
send (paramètres)
▪ Syntaxe :
▪ Remarques :
- Si la méthode utilisée est GET le paramètre envoyé est null : send(null)
- Dans le cas de POST, la page peut envoyer des paramètres personnalisées sous
forme d’une chaîne de caractères : send("données")
Les données doivent être sous la forme d’une chaîne de requête, comme :
nom=valeur&autrenom=autrevaleur&…
▪ Exemple :
open("POST", "http://localhost/ajax/test.php", true);
send("param1=x&param2=y");
Il faut également noter que lors de l’envoi de données avec la méthode POST, il
est recommandé de changer l’entête HTTP de la requête à l’aide de la ligne
suivante :
setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

12. L'objet XMLHttpRequest
2.3- La méthode getAllResponseHeaders :
▪ Renvoie l’ensemble de l’entête HTTP de la réponse sous la forme d’une chaîne de
caractères.
▪ Syntaxe : getAllResponseHeaders()
▪ Il faut bien distinguer un entête HTTP et un entête de fichier Html. Les balises
comprises dans un entête HTML, soit entre les balises <head> ... </head> envoient des
informations concernant la page HTML, tandis que les entêtes HTTP envoient des
informations relatives au fichier.
▪ L’entête HTTP est un court message que le serveur Web envoie au navigateur juste
avant de lui transmettre le document lui même. Ce message sert par exemple à donner
la taille du document ou à indiquer qu’il a disparu (code 404). Il peut aussi servir à
préciser l’encodage du fichier grâce à la ligne Content-Type.
2.4- La méthode abort :
▪ Annule la requête courante.
▪ Syntaxe : abort()
07/10/2022 12

13. L'objet XMLHttpRequest
07/10/2022 13
2.5- La méthode getResponseHeader :
▪ Renvoie la valeur d’un seul champ de l’entête HTTP sous la forme d’une chaîne de
caractères.
▪ Syntaxe : getResponseHeader("nom du paramètre d’en-tête HTTP")
▪ Exemple : xhr.getResponseHeader("Content-Type") ne retourne que les
renseignements concernant le type de contenu (ContentType).
xhr.getResponseHeader("Last-Modified") retourne la date de la
dernière modification du document.
2.6- La méthode setRequestHeader :
▪ Assigne une valeur à un champ d’entête HTTP qui est envoyée lors de la requête.
▪ Syntaxe : setRequestHeader("nomParamètreDentête","valeurParamètre")
▪ Elle est spécialement utilisée lors d’un envoi avec la méthode POST pour
spécifier l’encodage :
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

14. L'objet XMLHttpRequest
07/10/2022 14
♦ Utilisation de l’objet XMLHttpRequest :
L’utilisation de cet objet passe par les étapes suivantes :
1. Instancier l'objet (utilisation de l’opérateur new)
2. Associer une fonction au traitement du résultat de la requête (utilisation du
gestionnaire d’événement onreadystatechange)
3. Initialiser une requête (utilisation de la méthode open)
4. Effectuer la requête (utilisation de la méthode send)
5. Traiter le résultat de la requête qui peut se présenter sous forme :
- Texte (peut aussi être du code HTML)
- XML
Le traitement consiste généralement en une modification de la page Web
courante en utilisant JavaScript, le DOM et le CSS.

15. Lancement d’une requête
07/10/2022 15
♦ Créer un objet XMLHttpRequest :
A cause de l’incompatibilité entre Microsoft et les autres navigateurs, on doit vérifier
le type du navigateur pour implanter AJAX.
if(window.XMLHttpRequest)
var xhr = new XMLHttpRequest();
else if(window.ActiveXObject)
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
else
alert("Votre navigateur n’est pas compatible avec AJAX...");

16. Lancement d’une requête
07/10/2022 16
♦ Associer une fonction qui traitera la réponse :
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
// instructions de traitement de la réponse
}
};
Ou : xhr.onreadystatechange = maFonctionAssociee;
function maFonctionAssociee() {
if(xhr.readyState == 4 && xhr.status == 200) {
// instructions de traitement de la réponse
}
}
Remarque : La requête peut avoir été effectuée mais sans succès (par exemple avec un code 404
fichier non trouvé). Ainsi, il est prudent de doubler le test readyState== 4 par status==200
qui confirme que la requête a bien été effectuée avec succès.

17. Lancement d’une requête
07/10/2022 17
♦ Effectuer la requête :
Les méthodes utilisées pour toutes les requêtes HTTP sur le serveur sont open qui
configure la requête en spécifiant divers paramètres et send qui effectue réellement la
requête et accède ainsi au serveur :
xhr.open('GET', "http://localhost/ajax/test.txt", true);
xhr.send(null);
Ou en POST :
xhr.open("POST", "http://localhost/ajax/test.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("param1=x&param2=y");

18. Traitement du résultat de la requête
07/10/2022 18
1 Récupérer et traiter du texte :
▪ La propriété responseText de l’objet XMLHttpRequest contient la réponse du
serveur sous forme de chaîne de caractères.
▪ Exemple :
Affichons, de façon asynchrone, une réponse sous forme de texte dans une zone de la
page.
Soit une page HTML. Au clic de l’utilisateur sur le bouton de formulaire, la réponse
est affichée dans l’élément <div id="affichage "> ... </div>.
Le fichier texte comporte les mots : "Ceci est un exemple … ". Il est enregistré sur le
serveur sous le nom de test.txt.

19. Traitement du résultat de la requête
▪ Le code complet :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" >
<title>Ajax</title>
<script type='text/JavaScript'>
function afficher(txtdocument) {
var x = document.getElementById("affichage");
x.innerHTML = txtdocument;
}
var xhr = null;
function extraire() {
if(window.XMLHttpRequest) xhr = new XMLHttpRequest();
else if(window.ActiveXObject) xhr = new ActiveXObject("Microsoft.XMLHTTP");
else alert("Votre navigateur n’est pas compatible avec AJAX...");
07/10/2022 19

20. Traitement du résultat de la requête
if(xhr) {
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
var txtdocument = xhr.responseText;
afficher(txtdocument);
}
}
xhr.open("GET", "test.txt", true);
xhr.send(null);
}
}
</script>
</head>
<body>
<h3>Exemple</h3>
<form action=""><input type="button" value="Afficher" onclick="extraire()" /></form>
<div id="affichage">La réponse ici !</div>
</body>
</html>
07/10/2022 20

21. Traitement du résultat de la requête
▪Si on souhaite afficher la réponse, fournie par l’approche Ajax, en évidence, on peut réaliser
cela aisément par une feuille de style CSS.
▪ Pour notre exemple, si on ajoute dans le head les règles de styles suivantes :
<style type="text/css">
#affichage {
width: 150px;
font-weight: bold;
font-size: 16px;
margin: 5px;
padding: 5px;
background-color: lightblue;
}
</style>
On obtient l’affichage suivant :
07/10/2022 21

22. Traitement du résultat de la requête
07/10/2022 22
♦ Il ne faut pas s’arrêter à une interprétation limitative de la propriété responseText. En
effet, cela signifie que la réponse est renvoyée sous forme de texte au sens
informatique du terme. Tous les types de format sont acceptés ; des fichiers XHTML,
des données traitées par du PHP en passant par du code JavaScript. Le tout dépend
de l’utilisation ultérieure de ces données textuelles.
♦ Exemple :
Soit un fichier js.txt qui contient le texte :
alert("Message d’alerte provenant du serveur")
Prenons un fichier HTML (exemple.htm). Ce fichier ne contient aucune
instruction alert(). Pourtant une boîte d’alerte peut être créée en exécutant le code
JavaScript à partir de la chaîne de caractères contenue dans le fichier js.txt. Ce qui
est effectué par la méthode eval().

23. Traitement du résultat de la requête
▪ Le code du fichier exemple.htm :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" >
<title>Ajax</title>
<script type='text/JavaScript'>
var xhr = null;
function extraire() {
if(window.XMLHttpRequest)
xhr = new XMLHttpRequest();
else if(window.ActiveXObject)
xhr = new ActiveXObject("Microsoft.XMLHTTP");
else
alert("Votre navigateur n’est pas compatible avec AJAX...");
07/10/2022 23

24. Traitement du résultat de la requête
if(xhr) {
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
eval(xhr.responseText);
}
}
xhr.open("GET", "js.txt", true);
xhr.send(null);
}
}
</script>
</head>
<body>
<h3>Exemple</h3>
<form action=""><input type="button" value="Afficher" onclick="extraire()" /></form>
</body>
</html>
07/10/2022 24

25. Traitement du résultat de la requête
07/10/2022 25
2 Récupérer et traiter du XML :
▪ La propriété responseXML de l’objet XMLHttpRequest contient la réponse du
serveur sous forme d’un document XML.
▪ Exemple :
Soit le fichier XML annuaire.xml présenté ci-dessous.
On souhaite, au clic d’un bouton, extraire les données des balises <nom>,
<prenom> et <telephone> de la troisième balise <personne>.
Le fichier HTML de départ comporte simplement un bouton de formulaire et une
balise <div id="affichage"> servant de conteneur pour la réponse.

26. Traitement du résultat de la requête
07/10/2022 26
▪ Le fichier annuaire.xml :
<?xml version="1.0"?>
<annuaire>
<personne>
<nom> Zrouri </nom>
<prenom> Hafida </prenom>
<telephone type="portable"> 0684566695 </telephone>
</personne>
<personne>
<nom> Boularcha </nom>
<prenom> Malika </prenom>
<telephone type="fixe"> 0512345678 </telephone>
</personne>
<personne>
<nom> Azais </nom>
<prenom> Mohamed </prenom>
<telephone type="portable"> 0687654321 </telephone>
</personne>
</annuaire>

27. Traitement du résultat de la requête
07/10/2022 27
▪ Le code du fichier html :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax</title>
<script type='text/JavaScript'>
function afficher(xmldocument) {
noeudsNom = xmldocument.getElementsByTagName("nom");
noeudsPrenom = xmldocument.getElementsByTagName("prenom");
noeudsTelephone = xmldocument.getElementsByTagName("telephone");
var textediv = (noeudsNom[2].firstChild.nodeValue + " "
+ noeudsPrenom[2].firstChild.nodeValue + "<br />"
+ noeudsTelephone[2].firstChild.nodeValue);
var x = document.getElementById("affichage");
x.innerHTML = textediv;
}

28. Traitement du résultat de la requête
07/10/2022 28
var xhr = null;
function extraire() {
if(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); }
else if(window.ActiveXObject) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); }
else { alert("Votre navigateur n’est pas compatible avec AJAX..."); }
if(xhr) {
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
var xmldocument = xhr.responseXML;
afficher(xmldocument);
}
}
xhr.open("GET", "annuaire.xml", true);
xhr.send(null);
}
}
</script>

29. Traitement du résultat de la requête
</head>
<body>
<h3>Annuaire</h3>
<form action="">
<input type="button" value="Afficher la personne" onclick="extraire()" />
</form>
<div id="affichage">La réponse ici !</div>
</body>
</html>
07/10/2022 29

30. Traitement du résultat de la requête
07/10/2022 30
♦ Traitement des attributs :
▪ Un document XML peut également comporter des attributs de balises. Ceux-ci
contiennent souvent des informations d’un intérêt non négligeable. Ainsi, il importe
de pouvoir également y accéder. La propriété attributes (vu dans le chapitre 3)
renvoie une liste de tous les attributs d’un élément spécifié.
▪ Exemple :
Soit le fichier XML annuaire.xml (de l’exemple précédent) qui comporte des
attributs.
On souhaite, au clic d’un bouton, afficher les personnes ayant des numéros de
téléphone fixe ou portable selon le choix de l’utilisateur.
Le fichier HTML de départ comporte deux boutons radios permettant de choisir le
type de téléphone et une balise <div id="affichage"> servant de conteneur pour la
réponse.

31. Traitement du résultat de la requête
07/10/2022 31
▪ Le code du fichier html :
<html>
<head> <meta charset="UTF-8" > <title>Ajax</title>
<script type='text/JavaScript'>
function afficher(xmldocument) {
target = document.getElementById("affichage");
target.innerHTML = "";
entree = document.forms[0].entree.value;
noeudsNom = xmldocument.getElementsByTagName("nom");
noeudsPrenom = xmldocument.getElementsByTagName("prenom");
noeudsTelephone = xmldocument.getElementsByTagName("telephone");
for (i=0; i<noeudsTelephone.length; i++) {
var attributs = noeudsTelephone[i].attributes;
var typeTelephone = attributs.getNamedItem("type").nodeValue;
if(typeTelephone==entree) {
var texteTarget = (noeudsNom[i].firstChild.nodeValue + " " +
noeudsPrenom[i].firstChild.nodeValue + " " +
noeudsTelephone[i].firstChild.nodeValue)+ "<br />";
target.innerHTML+= texteTarget;
} } } }

32. Traitement du résultat de la requête
07/10/2022 32
var xhr = null;
function extraire() {
if(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); }
else if(window.ActiveXObject) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); }
else { alert("Votre navigateur n’est pas compatible avec AJAX..."); }
if(xhr) {
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
var xmldocument = xhr.responseXML;
afficher(xmldocument);
}
}
xhr.open("GET", "annuaire.xml", true);
xhr.send(null);
}
}
</script>
</head>

33. Traitement du résultat de la requête
<body>
<h3>Annuaire</h3>
<form action="">
<fieldset>
<legend>Type de téléphone : </legend>
<input type="radio" name="entree" value="fixe"/>Fixe
<input type="radio" name="entree" value="portable" />Portable
<input type="button" value="Afficher les personnes" onclick="extraire()" />
</fieldset>
</form>
<div id="affichage">La réponse ici !</div>
</body>
</html>
07/10/2022 33

34. Traitement du résultat de la requête
07/10/2022 34
♦ Récupérer et traiter avec XSL :
▪ La démarche se réalise toujours en trois étapes :
- Le chargement depuis le serveur du fichier XML ;
- Le chargement depuis le serveur du fichier XSL ;
- Le traitement pour associer le fichier XSL au fichier XML.
Pour réaliser le traitement, Microsoft dans Internet Explorer utilise l’instruction
xml.transformNode(xsl) qui permet d’associer de façon dynamique, une feuille de style
XSL à un document XML. Avec les autres navigateurs (Firefox, Opera, Safari, chrome),
JavaScript peut exécuter des transformations XSLT à travers l’objet XSLTProcessor.
Une fois l’objet XSLTProcessor créé, il faut utiliser la méthode importStylesheet(xsl)
pour réaliser la transformation. La feuille de style xsl doit être chargée dans le document
par l’objet XMLHttpRequest avant d’appeler la méthode importStylesheet.
▪ Exemple :
Soit le fichier XML annuaire.xml (de l’exemple précédent) et le fichier de feuille de
style XSL annuaire1.xsl (vu dans le chapitre 3).
On souhaite, au clic d’un bouton, afficher toutes les personnes de annuaire.xml dans un
tableau construit dans annuaire1.xsl.

35. Traitement du résultat de la requête
07/10/2022 35
▪ Le fichier annuaire1.xsl :
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<head><title>Annuaire</title></head>
<body>
<table border="1">
<caption>Listes des personnes</caption>
<tr><th>Nom</th><th>Prénom</th><th>Téléphone</th></tr>
<xsl:for-each select="annuaire/personne">
<tr>
<td><xsl:value-of select="nom" /></td>
<td><xsl:value-of select="prenom" /></td>
<td><xsl:value-of select="telephone" /></td>
</tr>
</xsl:for-each>
</table></body></html>
</xsl:template>
</xsl:stylesheet>
Remarque : Il n’y a pas de liaison entre le fichier XML et
le fichier XSL c.à.d le fichier XML ne contient pas
l’instruction :
<?xml-stylesheet type="text/xsl" href="annuaire1.xsl"?>

36. Traitement du résultat de la requête
07/10/2022 36
▪ Le code du fichier html :
<html>
<head> <title>Ajax</title>
<style type="text/css"> #affichage { background-color: lightblue; padding: 10px; } </style>
<script type='text/JavaScript'>
function chargerXML(url) {
var xhr;
if (window.XMLHttpRequest) { // code pour IE7, Firefox, Opera, Safari, Chrome
xhr = new XMLHttpRequest();
xhr.open('GET', url, false);
xhr.send(null);
if (xhr.readyState == 4 && xhr.status == 200) { xhr = xhr.responseXML; }
}
else if (window.ActiveXObject) { // code pour IE6, IE5.5 et IE5
var xhr = new ActiveXObject("Microsoft.XMLDOM");
xhr.async = false;
xhr.load(url);
}
return xhr; }

37. Traitement du résultat de la requête
07/10/2022 37
function transformer(xml, xsl, id) {
if (window.XSLTProcessor) { // code pour Firefox, Opera, Safari, Chrome
var xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
var fragment = xsltProcessor.transformToFragment(xml, document);
var target = document.getElementById(id);
target.innerHTML = "";
target.appendChild(fragment);
document.appendChild(target);
}
else if (window.ActiveXObject) { // code pour IE
var target = document.getElementById(id);
target.innerHTML = xml.transformNode(xsl);
}
}
var xml = chargerXML('annuaire.xml');
var xsl = chargerXML('annuaire1.xsl');
</script>
Pour que la transformation soit effective,
XSLTProcessor doit exécuter la méthode
transformToFragment qui retourne un
fragment de document pouvant être
facilement ajouté à un document XML
existant. Cette méthode possède deux
paramètres :
- le document XML à transformer ,
- l’objet document qui accueille le
fragment généré.

38. Traitement du résultat de la requête
</head>
<body>
<h3>Annuaire</h3>
<div id="affichage">
<form action="">
<input type="button" value="Afficher les personnes"
onclick="transformer(xml, xsl, 'affichage')" />
</form>
</div>
</body>
</html>
07/10/2022 38

39. Traitement du résultat de la requête
07/10/2022 39
♦ Application dynamique de XSL à XML :
▪ Il est possible de changer dynamiquement la feuille de style d’un document
XML pour la remplacer par une autre.
▪ Exemple :
Soit notre fichier XML annuaire.xml, utilisé auparavant dans ce chapitre.
Le fichier de style annuaire1.xsl lui est associé dans un premier temps.
Après une action de l’utilisateur, le script transforme le fichier XML de
départ avec une nouvelle feuille de style (annuaire2.xsl).
Cette feuille de style (annuaire2.xsl), tirée du chapitre 3, permet de trier la
liste des personnes par ordre alphabétique.

40. Traitement du résultat de la requête
07/10/2022 40
▪ Le fichier annuaire2.xsl :
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<head><title>Annuaire</title></head>
<body>
<table border="1">
<caption>Listes des personnes</caption>
<tr><th>Nom</th><th>Prénom</th><th>Téléphone</th></tr>
<xsl:for-each select="annuaire/personne">
<xsl:sort select="nom" order="ascending"/>
<tr>
<td><xsl:value-of select="nom" /></td>
<td><xsl:value-of select="prenom" /></td>
<td><xsl:value-of select="telephone" /></td>
</tr>
</xsl:for-each>
</table></body></html>
</xsl:template>
</xsl:stylesheet>

41. Traitement du résultat de la requête
07/10/2022 41
▪ Le code du fichier html :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax</title>
<style type="text/css">
#affichage { background-color: lightblue; padding: 10px; margin-bottom:5px }
</style>
<script type='text/JavaScript'>
function init(url1, url2, id) {
var xml = chargerXML(url1);
var xsl = chargerXML(url2);
transformer(xml, xsl, id);
}

42. Traitement du résultat de la requête
07/10/2022 42
function chargerXML(url) {
var xhr;
// code pour IE7, Firefox, Opera, Safari, Chrome
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
xhr.open('GET', url, false);
xhr.send(null);
if (xhr.readyState == 4 && xhr.status == 200) { xhr = xhr.responseXML; }
}
// code pour IE6, IE5.5 et IE5
else if (window.ActiveXObject) {
var xhr = new ActiveXObject("Microsoft.XMLDOM");
xhr.async = false;
xhr.load(url);
}
return xhr;
}

43. Traitement du résultat de la requête
07/10/2022 43
function transformer(xml, xsl, id) {
if (window.XSLTProcessor) { // code pour Firefox, Opera, Safari, Chrome
var xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
var fragment = xsltProcessor.transformToFragment(xml, document);
var target = document.getElementById(id);
target.innerHTML="";
target.appendChild(fragment);
document.appendChild(target);
}
else if (window.ActiveXObject) { // code pour IE
var target = document.getElementById(id);
target.innerHTML = xml.transformNode(xsl);
}
}
</script>

44. Traitement du résultat de la requête
</head>
<body onload="init('annuaire.xml', 'annuaire1.xsl', 'affichage')">
<div id="affichage"></div>
<form action="" style="padding-left: 60px;">
<input type="button" value="Trier par nom"
onclick="init('annuaire.xml', 'annuaire2.xsl', 'affichage')" />
</form>
</body>
</html>
07/10/2022 44