Licence professionnelle Management Internet et applications dans l’entreprise

Ajax (Asynchronous Javascript And XML)

Ce n’est pas une nouvelle technologie, mais une utilisation astucieuse et liée de différentes technologies
existantes (XHTML, CSS, javascript, XML, XSL et DOM). L’objectif est de diminuer le transit sur le réseau en
ne rechargeant, à partir du serveur Web, qu’une partie des pages Web et pas des pages entières.

Avantages et inconvénients
Une partie des pages est mise à jour de manière asynchrone (donc non bloquante), ce qui donne plus de fluidité
à l’affichage des pages et provoque moins de temps d’attente. Le trafic sur le réseau est donc diminué : il suffit
d’envoyer les données, de récupérer les éléments de la réponse et de les positionner à l’endroit voulu sur la page
au lieu de recharger une page entière. La gestion de la page peut être facilitée, car il suffit de mettre à jour sur le
serveur des fichiers de taille réduite, parfois même seulement au format texte.

Par contre, le code est TRES délicat à mettre en œuvre, d’où risque d’augmentation du temps de développement
et des coûts. Une bonne connaissance des différentes technologies est indispensable.
Ajax est basé sur l’existence d’un objet javascript appelé XMLHttpRequest qui ne fonctionne pas avec les
anciennes versions des navigateurs ou si l’interpréteur javaScript est désactivé.
L’historique et les retours à la page précédente ne permettent plus de faire marche arrière, des parties de page
ayant été modifiées depuis le chargement initial.
Le référencement des pages Web est plus difficile à réaliser, une même page pouvant avoir au fil du temps des
contenus très différents.
L’objet XmlHttpRequest
Initialement inventé en 1998 par Microsoft pour Internet Explorer, l’objet XMLHttpRequest est un objet
JavaScript qui permet d’obtenir des données à l’aide de requêtes http :

• Il est créé par le moteur javaScript du navigateur

• Il est utilisé pour effectuer une requête http vers le serveur
• Le serveur fournit une réponse au navigateur
• Le navigateur fait afficher le résultat dans une partie de la page Web, ce qui évite de recharger toute la page.

Il a maintenant été implémenté dans Mozilla, Opéra, Netscape et Konqueror. Il nécessite que la page Web soit
dans un environnement client-serveur (donc Apache ou easyPHP activé).
Création et propriétés de l’objet XmlHttpRequest
Pour Internet Explorer, on initialise l’objet par : var xhr = new ActiveXObject("Microsoft.XMLHTTP");
ou var xhr = new ActiveXObject("Msxml2.XMLHTTP");
Pour les autres navigateurs, on utilise l’objet natif par : var xhr = new XMLHttpRequest() ;
D’où une méthode d’initialisation générale dans la fonction getXmlHttpRequest() à regarder dans le fichier
xrh0.html.

Propriétés Description
readyState Retourne l’état de la requête
0 : non initialisé
1 : ouverture (open s’est exécuté, début du transfert)
2 : envoyé (données transférées)
3 : en cours (données en réception)
4 : prêt (données entièrement reçues)

1
Licence professionnelle Management Internet et applications dans l’entreprise

onreadystatechange Gestionnaire d’événement ; doit se voir affecter une

fonction afin d’exécuter une action lors d’un
changement d’état de l’objet
status Renvoie le code numérique de la réponse du serveur
http ; notamment :
200 : OK
403 : accès interdit
404 : page non trouvée
500 : erreur interne au serveur
statusText Renvoie le message lié au code numérique de la
réponse du serveur http
responseText Réponse du serveur à la requête réussie sous forme de
chaîne de caractères
responseXML Réponse du serveur à la requête réussie sous forme
d’un document XML
Méthodes (les plus utilisées) Description
open("méthode", "url du fichier", Initialise la requête vers le serveur
mode) méthode="GET" pour recevoir des données du serveur
méthode="POST" pour en envoyer vers le serveur
url du fichier : fichier à exécuter sur le serveur
mode=false pour mode asynchrone (sans blocage)
mode=true pour mode synchrone
send(données) Effectue la requête avec éventuellement envoi de
données
Avec GET, send(null)
Avec POST, send("var1=val1&var2=val2&…")
setRequestHeader(...) Permet de spécifier la nature de l’en-tête
abort() Annule la requête

Exemples d’utilisation d’Ajax

Transfert d’un fichier test.txt du serveur vers le poste client

• Affichage d’une fenêtre alert quand le fichier est chargé : xrh1.html. A noter : le code associé à
onreadystatechange (c-à-d le traitement à effectuer quand la requête a réussi) doit obligatoirement être défini
avant l’instruction send.

• Affichage du texte dans une fenêtre alert : xrh2.html

• Affichage du texte dans un champ de texte : xrh3.html. On utilise la méthode javaScript

getElementById("nom") de l’objet document qui parcourt le document à la recherche du nœud identifié par
l’attribut id="nom".

• Affichage du contenu d’un fichier XML dans une fenêtre alert : xrh4.html.

• Affichage du texte dans le corps de la page : xrh7.html. On utilise la méthode javascript

getElementById("nom") sur un nœud de type <div> et on isole la fonction d’affichage.

• Affichage du contenu d’un fichier XML dans le corps de la page : xrh7bis.html.

• Découpage en fonctions distinctes réalisant la connexion, la requête et l’affichage : xrh8.html.

Utilisation de pages PHP sur le serveur

• Utilisation simple d’un fichier PHP : xrh10.html qui fait appel à la page carrecube.php.

• Passage de paramètres à une page PHP : xrh11.html demande un entier via une liste de sélection ; après
validation, la table correspondante s’affiche. Le passage d’un ou de plusieurs paramètres via Ajax se fait
obligatoirement par la méthode POST. Le fichier carrecuben.php récupère la valeur du paramètre.

2
Licence professionnelle Management Internet et applications dans l’entreprise

Exercice

Enregistrer le fichier xrh11.html sous le nom

xrh12.html.

Le modifier afin d’obtenir l’affichage ci-contre avec

trois boutons proposant les carrés et les cubes de 10
entiers à partir de 1, de 11 ou de 21.

Le compléter ensuite afin de voir s’afficher, à chaque

clic sur l’un des boutons, une des trois tables en passant
le paramètre ad hoc à la page carrecuben.php.

Illustrations ci-dessous.

Affichage du résultat d’une interrogation de base de données mySQL par PHP

Soit la base mySQL appelée images, créée à l’aide du fichier images.dump suivant associée :

images.dump
CREATE TABLE pays (id tinyint(4) NOT NULL AUTO_INCREMENT, nom varchar(20), PRIMARY KEY(id),
UNIQUE id(id));

CREATE TABLE images (num tinyint(4) NOT NULL AUTO_INCREMENT, titre varchar(20), pays
tinyint(4), comment varchar(255), PRIMARY KEY (num), UNIQUE id (num));

INSERT INTO pays VALUES(1,'Mexique');

INSERT INTO pays VALUES(2,'Australie');
INSERT INTO pays VALUES(3,'Brésil');
INSERT INTO pays VALUES(4,'Maroc');
INSERT INTO pays VALUES(5,'Tunisie');

insert into images values(1, "cactus.jpg", 1, "Le cactus, embleme du Mexique");

insert into images values(2, "carte.jpg", 1, "Carte du Mexique");
insert into images values(3, "musiciens.jpg", 1, "Des musiciens");
insert into images values(4, "sydney.jpg", 2, "L'opéra de Sydney");
insert into images values(5, "ayers-rock.jpg", 2, "Ayers Rock, montagne sacree");
insert into images values(6, "ayers-rock2.jpg", 2, "Ayers Rock, au centre du pays");
insert into images values(7, "monts-olgas.jpg", 2, "Les monts Olgas");
insert into images values(8, "mato-grosso.jpg", 3, "Le Mato Grosso");
insert into images values(9, "porto-allegre.jpg", 3, "Porto Alegre");
insert into images values(10, "sao-paulo.jpg", 3, "Sao Paulo");
insert into images values(11, "tanger.jpg", 4, "Tanger, ville mythique");
insert into images values(12, "merzouga.jpg", 4, "Merzouga");
insert into images values(13, "ouzoud.jpg", 4, "Les chutes de Ouzoud");
insert into images values(14, "carte-tunisie.jpg", 5, "Carte de Tunisie");
insert into images values(15, "guellela.jpg", 5, "Guellela");
insert into images values(16, "monastir.jpg", 5, "Monastir");

La page liste-pays.php ci-dessous interroge la base de données images et propose de choisir un pays parmi ceux
figurant dans la table pays de la base :

3
Licence professionnelle Management Internet et applications dans l’entreprise

Fichier liste-pays.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/TDT/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-aquiv="Content-type" content="text/html charset=iso-8859-1" />
<script type="text/JavaScript">
function getXmlHttpRequest() {
if (window.XMLHttpRequest)
{
xhr = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else
{
alert("Votre navigateur ne supporte pas XMLHTTPRequest");
xhr = false;
}
}
function afficheImages() {
getXmlHttpRequest() ;
xhr.onreadystatechange = function()
{
if (xhr.readyState == 4 && xhr.status == 200)
{
menu = xhr.responseText;
document.getElementById("modele").innerHTML = menu ;
}
}
xhr.open("POST", "images.php", true);
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
selection=document.getElementById("pays");
idpays = selection.options[selection.selectedIndex].value ;
xhr.send("idpays="+idpays);
}
</script>
</head>
<body>
<form name="formulaire" action="#">
<table>
<tr><td><label for="pays">Pays</label></td>
<td><select name="pays" id="pays" onchange="afficheImages()">
<option value="">Choisir un pays</option>
<?
mysql_connect("localhost", "root","");
mysql_select_db("images");
$query=mysql_query("select * from pays");
while ($row=mysql_fetch_assoc($query)) {
echo "<option value='".$row["id"]."'>".$row["nom"]."</option>";
}
?>
</select></td></tr>

4
Licence professionnelle Management Internet et applications dans l’entreprise

<tr><td><label for="images">Images</label></td>
<td><span id="modele">
<select name="images">
<option value="">Images correspondantes</option>
</select>
</span></td></tr>
</table>
</form>
</body>
</html>

Lorsqu’un pays est choisi, la fonction afficheImages() demande au serveur d’effectuer la page images.php qui
permet d’obtenir la liste des images correspondant au pays choisi, sans rechargement complet de la page :

Fichier images.php
<?php
echo "<select name='images'>";
if (isset($_POST["idpays"])) {
mysql_connect("localhost", "root","");
mysql_select_db("images");
$query=mysql_query("select num, titre from images where pays=".$_POST["idpays"]);

while ($row=mysql_fetch_assoc($query)) {
echo "<option value='".$row["num"]."'>".$row["titre"]."</option>";
}
}
echo "</select>";
?>

Exercice

Ecrire une page liste-images.php proposant la liste des images disponibles. Lorsqu’une image est sélectionnée,
une page commentaires.php faire afficher le commentaire correspondant.