ajqxè_àànndkllllllllllllllllllllllllllllllllllllllllll

Développement Web
Chapitre 4 : AJAX

26/12/2023 Prof. Hafida ZROURI 2
Qu’est ce que AJAX ?
♦ 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.

Principe d’AJAX
♦ 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.

Comment fonctionne AJAX ?
♦ 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.

L'objet XMLHttpRequest
♦ 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.
♦ Création d’un objet XMLHttpRequest :
if(window.XMLHttpRequest) var xhr = new XMLHttpRequest();
♦ 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.

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

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.

2.2- La méthode send :
▪ Effectue la requête, avec éventuellement l’envoi de données.
▪ Syntaxe : send (paramètres)
▪ 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');

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()

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")
Cette méthode doit être appelée après la méthode open mais avant la méthode send.
▪ 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");

♦ 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.

Lancement d’une requête
♦ Créer un objet XMLHttpRequest :
♦ 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.

Lancement d’une requête
♦ 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&…&paramn=y");

Traitement du résultat de la requête
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.

▪ Le code complet :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" >
<title>Ajax</title>
<style type="text/css">
#affichage {
width: 160px;
font-weight: bold;
font-size: 16px;
margin: 5px;
padding: 5px;
background-color: lightblue;
}
</style>
<script type='text/JavaScript'>
function afficher(txtdocument) {
document.getElementById("affichage").innerHTML = txtdocument;
}

♦ 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().

▪ Le code du fichier exemple.htm :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" >
<title>Ajax</title>
if(xhr) {
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>
<input type="button" value="Afficher" onclick="extraire()" />
</body>
</html>

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.

▪ 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>

▪ Le code du fichier html :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax</title>
function afficher(xmldocument) {
let noeudsNom = xmldocument.getElementsByTagName("nom");
let noeudsPrenom = xmldocument.getElementsByTagName("prenom");
let noeudsTelephone = xmldocument.getElementsByTagName("telephone");
let textediv = (noeudsNom[2].firstChild.nodeValue + " "
+ noeudsPrenom[2].firstChild.nodeValue + "<br />"
+ noeudsTelephone[2].firstChild.nodeValue);
let x = document.getElementById("affichage");
x.innerHTML = textediv;
}

if(window.XMLHttpRequest) { var xhr = new XMLHttpRequest(); }
if(xhr) {
if(xhr.readyState == 4 && xhr.status == 200) { afficher(xhr.responseXML); }
};
xhr.open("GET", "annuaire.xml", true);
xhr.send(null);
}
}
</script>
</head>
<body>
<h3>Annuaire</h3>
<input type="button" value="Afficher la personne" onclick="extraire()" />
</body>
</html>

♦ 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.
▪ 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.

<!DOCTYPE html>
<html>
<head>
<title>Ajax</title>
function afficher(xmldocument) {
let div = document.getElementById("affichage");
div.innerHTML = "";
let entree = document.forms[0].entree.value;
let noeudsNom = xmldocument.getElementsByTagName("nom");
let noeudsPrenom = xmldocument.getElementsByTagName("prenom");
let noeudsTelephone = xmldocument.getElementsByTagName("telephone");
for (let i=0; i<noeudsTelephone.length; i++) {
let typeTelephone = noeudsTelephone[i].getAttribute("type");
if(typeTelephone==entree) {
div.innerHTML += noeudsNom[i].firstChild.nodeValue + " " +
noeudsPrenom[i].firstChild.nodeValue + " " +
noeudsTelephone[i].firstChild.nodeValue + "<br />";
} } }

if(window.XMLHttpRequest) { var xhr = new XMLHttpRequest(); }
if(xhr) {
if(xhr.readyState == 4 && xhr.status == 200) {
afficher(xhr.responseXML);
}
};
xhr.open("GET", "annuaire.xml", true);
xhr.send(null);
}
}
</script>
</head>

<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>
</body>
</html>

Complément

♦ 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.
Avec les navigateurs (Edge, 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.

▪ 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"?>

<!DOCTYPE html>
<html>
<head>
<title>Ajax</title>
#affichage { background-color: lightblue; padding: 10px; }
</style>
function chargerXML(url) {
if (window.XMLHttpRequest) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, false);
xhr.send(null);
if (xhr.readyState == 4 && xhr.status == 200) { return (xhr.responseXML); }
}
}

function transformer(xml, xsl, id) {
if (window.XSLTProcessor) {
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);
}
}
var xml = chargerXML('annuaire.xml');
var xsl = chargerXML('annuaire1.xsl');
</script>
</head>
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é.

<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>

♦ 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.

▪ 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>

<!DOCTYPE html>
<html>
<head>
<title>Ajax</title>
#affichage { background-color: lightblue; padding: 10px; margin-bottom:5px }
</style>
function init(url1, url2, id) {
var xml = chargerXML(url1);
var xsl = chargerXML(url2);
transformer(xml, xsl, id);
}

</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>

ajqxè_àànndkllllllllllllllllllllllllllllllllllllllllll

Recommandé

Recommandé

Contenu connexe

Similaire à ajqxè_àànndkllllllllllllllllllllllllllllllllllllllllll

Similaire à ajqxè_àànndkllllllllllllllllllllllllllllllllllllllllll (20)

Dernier

Dernier (20)

ajqxè_àànndkllllllllllllllllllllllllllllllllllllllllll