Langage AJAX

Dr Konan Marcellin BROU

marcellin.brou@inphb.ci
konanmarcellin@yahoo.fr

2017-2018
Sommaire
 Introduction
 L’objet XmlHttpRequest
 Ajax et base de données
 Bibliographie

K. M. BROU Technologies XML 2

I. Introduction
 1.1. Présentation
 Asynchronous JavaScript And XML.
 Technique utilisée pour créer des pages Web dynamiques.
 Permet la mise à jour des pages Webs, sans devoir les
recharger, en échangeant d'une manière asynchrône des
données avec le serveur web.
 Exemples :
 Google Maps, youtube, Facebook, ...
 Concept qui permet de faire des appels asynchrones au
serveur depuis le client.
 Lors de ces appels, le serveur retourne du XML qui est
"récupéré" par javascript et traité.

K. M. BROU Technologies XML 3

I. Introduction
 AJAX intègre plusieurs technologies :
 XHTML et CSS : présentation des données ;
 DOM (Document Object Model) : affichage dynamique et
interactif ;
 XML et XSLT : système d’échange et de manipulation de
données ;
 XMLHttpRequest : mécanisme de récupération de données
asynchrones ;
 Javascript : pour coordonner le tout.

K. M. BROU Technologies XML 4

I. Introduction
 1.2. Processus de traitement d’une requête classique
1. Saisir une requête (URL) dans un navigateur.
2. Transmettre la requête au serveur web.
3. Le serveur retourne la réponse au navigateur
 Texte, images, fichiers JavaScript, applets java ....
4.Le navigateur interprète et affiche la page.
5. Le navigateur est déconnecté du serveur web.
 Inconvénient
 Un clic sur un lien engendre une nouvelle requête
 Donc, le processus recommence à l’étape une.

K. M. BROU Technologies XML 5

I. Introduction
 1.3. Processus de traitement d’une requête Ajax
 AJAX est basé sur l'objet XMLHttpRequest qui permet
d’envoyer une requête à un serveur HTTP via Javascript.
 Avec Ajax le navigateur du client n'est pas nécessairement
rafraîchi et tout est transparent pour l'utilisateur.
 AJAX permet de modifier une page Web sans la recharger :
 Ajouter des éléments à la page ;
 Modifier le contenu d'un "bout de la page" ;
 Insérer des données dans une base de données.

K. M. BROU Technologies XML 6

II. L’objet XmlHttpRequest
 2.1. Présentation
 Permet d’interagir avec le serveur grâce à ses attributs et
méthodes.
 Pour exécuter des requêtes http et pour échanger du XML.
 Composant embarqué dans les navigateurs.
 Comportement varie en fonction du navigateur.
 Créer en javascript un objet XmlHttpRequest

K. M. BROU Technologies XML 7

II. L’objet XmlHttpRequest
 Créer en javascript un objet XmlHttpRequest

function getXhr()
{var xhr = null;
if(window.XMLHttpRequest) // Firefox et autres
xhr = new XMLHttpRequest();
else if(window.ActiveXObject) // Internet Explorer
{try
{xhr = new ActiveXObject("Msxml2.XMLHTTP");}
catch (e)
{xhr = new ActiveXObject("Microsoft.XMLHTTP");}
}
else // XMLHttpRequest non supporté par le navigateur
{alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
xhr = false;
}
return xhr
}

K. M. BROU Technologies XML 8

II. L’objet XmlHttpRequest
 2.2. Propriétés et méthodes
 Les propriétés
Propriété Explication
onreadystatechange On lui affecte une fonction qui sera exécutée à chaque "changement
d'état" de l’objet.
readyState Propriété testée dans onreadystatechange.
Représente l'état de l’objet et peut prendre plusieurs valeurs :
0 : Non initialisé.
1 : Ouverture (open() vient de s'exécuter).
2 : Envoyé (send() vient de s'exécuter).
3 : En cours (des données sont en train d'arriver).
4 -> Prêt (toutes les données sont chargées).
status Code de la réponse du serveur.
200 -> OK.
404 -> Page non trouvée.
...
statusText Message associé à status.
responseText Réponse retournée par le serveur, au format texte.
responseXML Réponse retournée par le serveur, au format dom XML.

K. M. BROU Technologies XML 9

II. L’objet XmlHttpRequest
 Les méthodes

Méthode Explication
open(méthode,url,flag) Ouvre la connexion avec le serveur.
méthode : "GET" ou "POST"
url : url à laquelle on va envoyer la requête.
Si la méthode est GET, on met les paramètres dans l'url.
Flag : true = dialogue asynchrone
false = dialogue synchrone
setRequestHeader(nom, Assigne une valeur à un header HTTP qui sera envoyé lors
valeur) de la requête.
pour un POST : nom = "Content-Type" , valeur :
"application/x-www-form-urlencoded"
send("params") Envoi la requête au serveur.
méthode GET : on met null en paramètre.
méthode POST : on met les paramètres a envoyer, sous la
forme :
"nomparam1=valeurparam1&nomparam2=valeurparam2".
abort() Abandonne la requête.

K. M. BROU Technologies XML 10

II. L’objet XmlHttpRequest
 2.3. Ajax en mode synchrone
 C’est du JavaScript uniquement
 Synchrone
 Signifie que le navigateur attend la réponse du serveur à sa
requête avant de rendre la main à l'utilisateur.
 Si le serveur met du temps à répondre, le navigateur va
sembler figé.
 Le choix entre synchrone et asynchrone est effectué dans
dans le dernier paramètre méthode open() de l’objet
XMLHttpRequest :
 True pour asynchrone ;
 False pour synchrone.
 Exemple : Afficher un message de type texte
 Le message à afficher est stocké dans un fichier PHP.
 Le message est modifier, réaffiché sans recharger la page Web.
 ex1.html, codePhp.php

K. M. BROU Technologies XML 11

II. L’objet XmlHttpRequest
 Fichier codePhp.php
<?php
echo "Bonjour BROU";
?>

<html>
<head>
<title>Ajax en mode Synchrone</title>
<script type='text/JavaScript'>
//créer une instance de XMLHttpRequest
function getXhr()
{var xhr = null;
if(window.XMLHttpRequest) // Firefox et autres
xhr = new XMLHttpRequest();
else if(window.ActiveXObject) // Internet Explorer
{try
{xhr = new ActiveXObject("Msxml2.XMLHTTP");}
catch (e)
{xhr = new ActiveXObject("Microsoft.XMLHTTP");}
}
else
{// XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
xhr = false;
}
return xhr
}
K. M. BROU Technologies XML 12
II. L’objet XmlHttpRequest
//Méthode qui sera appelée sur le click du bouton
function go(element)
{var xhr = getXhr();
xhr.open("GET","codePhp.php",false);
xhr.send(null);
afficher(xhr.responseText, element);
}
function afficher(xhr, element)
{element.innerHTML = xhr;}
</script>
</head>
<body>
<p><span id="message"> L'affichage du script PHP sera inséré ici.</span></p>
<hr />
<FORM name="ajax" method="POST" action="">
<input type='button' value='Envoyer' onclick='go(document.getElementById("message"))' />
</FORM>
</body>
</html>

 element.innerHTML permet de modifier le texte contenu dans une balise

appelée element.

K. M. BROU Technologies XML 13

II. L’objet XmlHttpRequest
 Exécution
 Créer un alias ajax sur le dossier contenant ex1.html

 Cliquer sur le bouton Envoyer

 Modifier le contenu de codePhp.php et cliquer sur le bouton Envoyer
<?php
echo "Bonjour BROU Konan";
?>

K. M. BROU Technologies XML 14

II. L’objet XmlHttpRequest
 Remarque
 On peut mettre le code JavaScript dans un fichier séparé
 ex1a.html, codeJS1.js, codePhp.php
<html>
<head>
<title>Ajax en mode Synchrone</title>
<script type="text/javascript" src="codeJS1.js"></script>
</head>
<body>
<p><span id="message"> L'affichage du script PHP sera inséré ici.</span></p>
<hr />
<FORM name="ajax" method="POST" action="">
<input type='button' value='Envoyer' onclick='go(document.getElementById("message"))'
/>
</FORM>
</body>
</html>

K. M. BROU Technologies XML 15

II. L’objet XmlHttpRequest
 2.4. Ajax en mode asynchone
 Asynchrone
 Signifie que nous ne maîtrisons pas la réponse du serveur.
 Propriété onreadystatechange
 Permet de récupérer le résultat en lui affectant une fonction qui
sera exécutée à chaque "changement d'état" de l’objet
XmlHttpRequest.
xhr.onreadystatechange = function()
{// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4)
if (xhr.status == 200)
{afficher(xhr, element);}
}

 Propriété readyState
 Contient les états de l’objet XmlHttpRequest.
0 : Non initialisé.
1 : Ouverture (open() vient de s'exécuter).
2 : Envoyé (send() vient de s'exécuter).
3 : En cours (des données sont en train d'arriver).
4 -> Prêt (toutes les données sont chargées).
K. M. BROU Technologies XML 16
II. L’objet XmlHttpRequest
 Le choix entre synchrone et asynchrone est effectué
dans dans le dernier paramètre méthode open() de
l’objet XMLHttpRequest :
 True pour asynchrone ;
 False pour synchrone.
 Exemple : Afficher un message
 Le message à afficher est stocké dans un fichier PHP.
 Le message est modifier, réaffiché sans recharger la page Web.
 ex2.html, ex2a.html, codeJS2.js, codePhp.php
<html>
<head>
<title>Ajax en mode Asynchrone</title>
<script type="text/javascript" src="codeJS2.js"></script>
</head>
<body>
<p><span id="message"> L'affichage du script PHP sera inséré ici.</span></p>
<hr />
<FORM name="ajax" method="POST" action="">
<input type='button' value='Envoyer' onclick='go(document.getElementById("message"))' />
</FORM>
</body>
K. M. BROU </html> Technologies XML 17
II. L’objet XmlHttpRequest
function go(element) // Méthode qui sera appelée sur le click du bouton
{var xhr = getXhr()
// On défini ce qu'on va faire quand on aura la réponse du serveur
xhr.onreadystatechange = function()
{// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4)
{if (xhr.status == 200)
{afficher(xhr.responseText, element);}
else
alert("Error: returned status code " + xhr.status + " " + xhr.statusText);
}
}
xhr.open("GET","codePhp.php", true);
xhr.send(null);
}

function afficher(xhr, element)

{element.innerHTML = xhr;}

 C’est la fonction ci-dessous qui est appelée à chaque changement d’état

de l’objet XmlHttpRequest
 xhr.onreadystatechange = function()
{..}

K. M. BROU Technologies XML 18

II. L’objet XmlHttpRequest
 Exécution
 Créer un alias ajax sur le dossier contenant ex1.html

 Cliquer sur le bouton Envoyer

 Modifier le contenu de ajax.php et cliquer sur le bouton Envoyer

<?php
echo "Bonjour BROU Konan";
?>

K. M. BROU Technologies XML 19

II. L’objet XmlHttpRequest
 2.5. Partie XML d’Ajax
 Requete.responseXML
 Permet de renvoyer un document XML à traiter.
 Il faut remplacer responseText par responseXML
 On utilisera les instruction du DOM XML en JavaScript
 DOM : Document Object Modele
 API qui permet la manipulation d'un document XML, représenté
sous la forme d'un arbre en mémoire.
 SAX traite les éléments dans l'ordre dans lequel ils apparaissent.
 API Standard du W3C implémentée dans la plupart des
langages (PHP, C, C++, Java, Javascript, C#, VB, Python).
 DOM permet de :
 Créer, déplacer, ajouter, et modifier des nœuds;
 Ajouter et modifier des attributs, des nœuds fils,
 Détruire des nœuds, etc.

K. M. BROU Technologies XML 20

II. L’objet XmlHttpRequest
 ex3a.html, personne.xml, codeJS3.js
 Document personne.xml
<?xml version="1.0"?>
function go(element) // Méthode qui sera appelée sur le click du bouton <personne>
{var xhr = getXhr() <nom>BROU</nom>
// On défini ce qu'on va faire quand on aura la réponse du serveur <prenom>Konan</prenom>
xhr.onreadystatechange = function() </personne>
{// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4)
{if (xhr.status == 200)
{afficher(xhr, element);}
else
alert("Error: returned status code " + xhr.status + " " + xhr.statusText);
}
}
xhr.open("GET","personne.xml", true);
xhr.send(null);
}
function afficher(xhr, element)
{var docXML= xhr.responseXML;
var n = docXML.getElementsByTagName("nom");
var p = docXML.getElementsByTagName("prenom");
data = "Bonjour " + n.item(0).firstChild.data + " " + p.item(0).firstChild.data;
element.innerHTML = data;
}

K. M. BROU Technologies XML 21

II. L’objet XmlHttpRequest
 Exécution

<?xml version="1.0"?>
<personne>
<nom>BROU</nom>
<prenom>Konan Marcellin</prenom>
</personne>

K. M. BROU Technologies XML 22

II. L’objet XmlHttpRequest
 Exercice 1
 Ecrire un programme pour afficher la liste des personnes ci-
dessous.
 Personne.xml
<personnes>
<personne>
<nom>Brou</nom>
<prenom>Konan Marcellin</prenom>
</personne>
<personne>
<nom>Toto</nom>
<prenom>Ali</prenom>
</personne>
</personnes>

K. M. BROU Technologies XML 23

II. L’objet XmlHttpRequest
 Exercice 2
 Idem Exo1 mais l’affichage se fera dans un tableau

K. M. BROU Technologies XML 24

II. L’objet XmlHttpRequest
 Exercice 3
 Afficher tous les élément du document client.xml.

K. M. BROU Technologies XML 25

III. Ajax et base de données
 3.1. Présentation
 A partir d’une BD, on génère un document XML et le tour
est joué.
 On utilisera MySQL

K. M. BROU Technologies XML 26

III. Ajax et base de données
 3.2. Mise en œuvre
 Processus :
1. Créer la BD BDGSF
2. Créer la table personne(nom, prenom)

CREATE TABLE `BDGSF`.`personne`

(`nom` VARCHAR( 15 ) NOT NULL ,
`prenom` VARCHAR( 20 ) NOT NULL
) ENGINE = MYISAM ;

INSERT INTO `BDGSF`.`PERSONNE` (`NOM` ,`PRENOM`)

VALUES ('BROU', 'KONAN');

3. Créer un script PHP qui va lire la table personne et transformer

le résultat en XML sur le même modèle que personne.xml.

K. M. BROU Technologies XML 27

III. Ajax et base de données
3. Créer un script PHP qui va lire la table personne et transformer
le résultat en XML sur le même modèle que personne.xml.
 lirePers.php
<?php
header('Content-Type: text/xml');
echo "<?xml version=\"1.0\"?>\n";
echo "<personne>\n";
$nomUtilisateur = "root";
$motDePasse = "";
$serveur = "localhost";
$BD = "bdgsf";
$DSN = 'mysql:host=' . $serveur . ';dbname=' . $BD . ';charset=utf8';
try {
$idCnx = new PDO( $DSN, $nomUtilisateur, $motDePasse );
}
catch ( Exception $e ) {
echo "Connection à MySQL impossible : ", $e->getMessage();
die();
}
$resultat = $idCnx->query('SELECT * FROM Personne');
while ($rows = $resultat->fetch(PDO::FETCH_NUM)) { //On traite le resultat
echo "<nom>" . $rows[0] . "</nom>\n";
echo "<prenom>" . $rows[1] . "</prenom>\n";
}
echo "</personne>\n";
?>
K. M. BROU Technologies XML 28
III. Ajax et base de données
 La ligne header('Content-Type: text/xml permet à PHP de dire au
navigateur le format du fichier retourné.

4. ex4.html

<html>
<head>
<title>Ajax en mode Asynchrone</title>
<script type="text/javascript" src="codeJS3.js"></script>
</head>
<body>
<h3>Traitement d'un document XML/BD</h3>
<p><span id="message"> L'affichage du script PHP sera inséré ici.</span></p>
<hr />
<FORM name="ajax" method="POST" action="">
<input type='button' value='Envoyer' onclick='go(document.getElementById("message"))' />
</FORM>
</body>
</html>

K. M. BROU Technologies XML 29

III. Ajax et base de données
5. codeJS4.js

// Méthode qui sera appelée sur le click du bouton

function go(element) // Méthode qui sera appelée sur le click du bouton
{var xhr = getXhr()
// On défini ce qu'on va faire quand on aura la réponse du serveur
xhr.onreadystatechange = function()
{// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4)
{if (xhr.status == 200)
{afficher(xhr, element);}
else
alert("Error: returned status code " + xhr.status + " " + xhr.statusText);
}
}
xhr.open("GET","lirePers.php", true);
xhr.send(null);
}

//Affichage du resultat
function afficher(xhr, element)
{var docXML= xhr.responseXML;
var n = docXML.getElementsByTagName("nom");
var p = docXML.getElementsByTagName("prenom");
data = "Bonjour " + n.item(0).firstChild.data + " " + p.item(0).firstChild.data;
element.innerHTML = data;
}
K. M. BROU Technologies XML 30
III. Ajax et base de données
 Exécution

 Modifier le prénom Konan par "Konan Marcellin"

K. M. BROU Technologies XML 31

III. Ajax et base de données
 Exercice 4
 Idem Exo2 mais les données proviennent de la table Client de la
BD MySQL BDGSF.

K. M. BROU Technologies XML 32

III. Ajax et base de données
 Exercice 5 : Calcul du montant d’une commande
 Cet exercice montre comment dans Ajax, passer des variables
d’un formulaire à un script JavaScript et les récupérées dans un
script PHP.

K. M. BROU Technologies XML 33

III. Bibliographie
 http://www.exercicegratuit.com/cours-ajax/tutoriel-complet-
ajax/start-download
 http://gael-donat.developpez.com/web/intro-ajax/intro-ajax.pdf
 http://siddh.developpez.com/articles/ajax/

K. M. BROU Technologies XML 34