Le document présente AJAX comme une méthode de communication asynchrone permettant la récupération de données depuis un serveur web et le rafraîchissement dynamique des pages. Il explique l'utilisation de l'objet XMLHttpRequest, ses méthodes et propriétés, ainsi que des exemples pratiques en JavaScript pour illustrer son fonctionnement. De plus, le document aborde l'intégration d'AJAX avec PHP pour des applications web interactives, telles que des formulaires et des calculs.

1. AJAX
ASYNCHRONOUS JAVASCRIPT AND XML
Abdelouahed Sabri
abdelouahed.sabri@gmail.com
2012/2013

2. INTRODUCTION
 Ajax:
1. Communication asynchrone avec le serveur
2. Récupération de données (texte ou XML) à partir du
serveur
3. Mise à jours de la présentation Web
 1 et 2  XMLHttpRequest
 3  DOM
2

3. INTRODUCTION
 XMLHttpRequest
 XMLHttpRequest est un objet ActiveX ou JavaScript qui permet
d'obtenir des données au format XML, JSON ou texte simple à l'aide
de requêtes HTTP.
 Son rôle est:
1. D’effectuer des requêtes HTTP internes, invisibles et asynchrones
2. De traiter la réponse
 Historique
 1998: développé par Microsoft, en tant qu'objet ActiveX pour Internet
Explorer 5 à IE 7 sous le nom MSXML
 Plusieurs versions ont étés proposées: Microsoft.XMLHTTP,
MSXML2.XMLHTTP, MSXML2.XMLHTTP.3.0, MSXML2.XMLHTTP.4.0,
MSXML2.XMLHTTP.5.0, MSXML2.XMLHTTP.6.0
 2002: implémentation sous Mozilla sous le nom XMLHttpRequest
 2004: implémentation sous Safari
 2005: implémentation sous Opéra et Konqueror
 2007: Standardisation par W3C
 2008: Microsoft propose XDomainRequest depuis Internet Explorer 8
3

4. XMLHTTPREQUEST
 Codage JavaScript
 Pour les versions d’Internet Explorer antérieur à 7, le
constructeur est obtenu à travers un composant ActiveX
Microsoft.XMLHTTP ou Msxml2.XMLHTTP
 Pour les versions IE 7, Mozilla, Firefox, Safari, Opéra, … on
utilise l’objet natif XMLHttpRequest
 il faut toujours faire un test sur la version de l’explorateur
Web avant l’instanciation
4

5. XMLHTTPREQUEST
 Codage JavaScript
 Exemple: Tester quelle version est supportée par le
navigateur
5
<script type="text/javascript">
function TestXHR() {
if (XMLHttpRequest) { // ou (window.XMLHttpRequest)
alert("Il faut utiliser l’objet natif XMLHttpRequest");
}
else if (ActiveXObject) {// ou (window.ActiveXObject)
alert("Il faut utiliser le composant ActiveX Microsoft.XMLHTTP ou Msxml2.XMLHTTP");
}
else {
alert("Votre navigateur ne supporte pas XMLHTTPRequest");
}
}
</script>

6. XMLHTTPREQUEST
 Codage JavaScript
 Exemple: Instanciation de l’objet
6
<script type="text/javascript">
function TestXHR() {
if (window.XMLHttpRequest) {
var xhr = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
try {
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
var xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
}
else {
alert("Votre navigateur ne supporte pas XMLHTTPRequest");
}
}
</script>

7. XMLHTTPREQUEST
 Méthodes:
 Open(méthode, URL, async[, user, password]):
 Ouvre la connexion avec le serveur.
 méthode: GET ou POST
 async: TRUE si le dialogue sera asynchrone et FALSE dans le cas
contraire
 send(data)
 Dans le cas d’ouverture de connexion avec la méthode GET, data prend
null  send(null)
 Dans le cas d’ouverture de connexion avec POST, data peut contenir les
données à envoyer  send("param1=val2&param2=val2")
7

8. XMLHTTPREQUEST
 Méthodes (suite):
 Exemples
8
xhr.open("GET","ajax.php",true);
xhr.send(null);
xhr.open("GET","ajax.php?param1=5",true);
xhr.send(null);
xhr.open("POST","ajax.php",true);
xhr.send(null);
xhr.open("POST","ajax.php",true);
xhr.send("pram=5&param2=7&param3=Fes");

9. XMLHTTPREQUEST
 Méthodes (suite):
 setRequestHeader(name, value)
 Assigne un entête HTTP à la requête. Très utile lors de l’ouverture de
connexion avec la méthode POST
 name: nom du header
 value: la valeur du header
Exemple:
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
 abort()
 Annule la requête.
9

10. XMLHTTPREQUEST
 Propriétés:
 readyState: retourne l’état de la requête
 0: La requête n’est pas initialisée
 1: Début de transfert des données
 2: Les données sont envoyées
 3: Les données sont en cours de réception (partiellement accessibles)
 4: Les données sont complètement reçus (accessibles)
 status: renvoie le code de la réponse du serveur
 200: la requête est exécutée avec succès
 403: accès interdit (refusé)
 404: fichier non trouvé
 500: erreur interne au serveur
 responseText: contient la réponse de la requête au format
texte (chaîne de caractères)
 responseXML: contient la réponse de la requête au format
XML
10

11. XMLHTTPREQUEST
 Evénement:
 onreadystatechange: événement (fonction) qui se déclenche
pour chaque changement de l’état de la requête (readyState)
 Exemple
11
<script type="text/javascript">
function TestXHR() {
if (window.XMLHttpRequest) {
var xhr = new XMLHttpRequest();
}
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
alert("Fichier transmis");
}
}
xhr.open("GET", "db.xml", true);
xhr.send(null);
}
</script>

12. XMLHTTPREQUEST
 Exercice 1:
 Modifier le code en bas pour afficher dans une balise
DIV le changement de la propriété readyState de
l’objet XMLHttpRequest
12
<script type="text/javascript">
function TestXHR() {
if (window.XMLHttpRequest) {
var xhr = new XMLHttpRequest();
}
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
alert("Fichier transmis");
}
}
xhr.open("GET", "db.xml", true);
xhr.send(null);
}
</script>

13. 13
<html >
<head>
<title></title>
<script type="text/javascript">
function TestXHR() {
if (window.XMLHttpRequest)
var xhr = new XMLHttpRequest();
else alert("Votre navigateur ne supporte pas XMLHTTPRequest");
var monDiv = document.getElementById("IdDiv");
xhr.onreadystatechange = function() {
monDiv.innerHTML += xhr.readyState +"<br/>";
}
xhr.open("GET", "db.xml", true);
xhr.send(null);
}
</script>
</head>
<body>
<form action="">
<input type="button" value="Envoyer" onclick="TestXHR()" />
<div id="IdDiv"> </div>
</form>
</body>
</html>

14. XMLHTTPREQUEST
 Exercice 2:
 Modifier le code pour afficher le statut (status) de la
requête utilisant une zone de texte. Tester avec un
fichier non existant
 Utiliser un tableau (Array) pour afficher un message
comme suit:
 200: la requête est exécutée avec succès
 403: accès interdit (refusé)
 404: fichier non trouvé
 500: erreur interne au serveur
14

15. 15
<html >
<head> <title></title>
<script type="text/javascript">
function TestXHR() {
var xhrstatus = new Array();
xhrstatus["200"]="la requête est exécutée avec succès";
xhrstatus["403"]="accès interdit (refusé)";
xhrstatus["404"]="fichier non trouvé";
xhrstatus["500"] = "erreur interne au serveur";
if (window.XMLHttpRequest)
var xhr = new XMLHttpRequest();
else alert("Votre navigateur ne supporte pas XMLHTTPRequest");
var monDiv = document.getElementById("IdDiv");
var monTxt = document.getElementById("IdText");
xhr.onreadystatechange = function() {
monDiv.innerHTML += xhr.readyState +"<br/>";
monTxt.value = xhrstatus[xhr.status];
}
xhr.open("GET", "db.xml", true);
xhr.send(null);
}
</script>
</head> <body« ><form action="">
<input type="button" value="Envoyer" onclick="TestXHR()" />
<input type="text" value="" id="IdText" size="50"/>
<div id="IdDiv"> </div>
</form> </body> </html>

16. XMLHTTPREQUEST
 Exercice 3:
 Modifier le code pour afficher en popup le contenu
d’un fichier texte (db.txt)
 Utiliser la propriété responseText
16

17. 17
<html >
<head> <title></title>
<script type="text/javascript">
function TestXHR() {
var xhrstatus = new Array();
xhrstatus["200"]="la requête est exécutée avec succès";
xhrstatus["403"]="accès interdit (refusé)";
xhrstatus["404"]="fichier non trouvé";
xhrstatus["500"] = "erreur interne au serveur";
if (window.XMLHttpRequest)
var xhr = new XMLHttpRequest();
else alert("Votre navigateur ne supporte pas XMLHTTPRequest");
var monDiv = document.getElementById("IdDiv");
var monTxt = document.getElementById("IdText");
xhr.onreadystatechange = function() {
monDiv.innerHTML += xhr.readyState +"<br/>";
monTxt.value = xhrstatus[xhr.status];
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}
xhr.open("GET", "db.txt", true);
xhr.send(null);
}
</script>
</head> <body« ><form action="">
<input type="button" value="Envoyer" onclick="TestXHR()" />
<input type="text" value="" id="IdText" size="50"/>
<div id="IdDiv"> </div>

18. XMLHTTPREQUEST
 Exercice 4:
 Modifier le code pour afficher en pop-up le contenu
d’un fichier XML (db.xml)
 Utiliser la propriété responseXML
18

19. 19
<html >
<head> <title></title>
<script type="text/javascript">
function TestXHR() {
var xhrstatus = new Array();
xhrstatus["200"]="la requête est exécutée avec succès";
xhrstatus["403"]="accès interdit (refusé)";
xhrstatus["404"]="fichier non trouvé";
xhrstatus["500"] = "erreur interne au serveur";
if (window.XMLHttpRequest)
var xhr = new XMLHttpRequest();
else alert("Votre navigateur ne supporte pas XMLHTTPRequest");
var monDiv = document.getElementById("IdDiv");
var monTxt = document.getElementById("IdText");
xhr.onreadystatechange = function() {
monDiv.innerHTML += xhr.readyState +"<br/>";
monTxt.value = xhrstatus[xhr.status];
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseXML);
}
xhr.open("GET", "db.xml", true);
xhr.send(null);
}
</script>
</head> <body« ><form action="">
<input type="button" value="Envoyer" onclick="TestXHR()" />
<input type="text" value="" id="IdText" size="50"/>
<div id="IdDiv"> </div>

20. XMLHTTPREQUEST
 Autres méthodes
 getAllResponseHeaders()
 Permet de récupérer l’entête HTTP de la réponse sous la forme
d’une chaîne de caractères
 On y trouve:
 Nom du serveur
 Taille du contenu
 Le type du contenu
 …
 getResponseHeader("nom du paramètre d’entête HTTP")
 Permet de récupérer une valeur d’un paramètre d’entête HTTP
précis
sxhr.getResponseHeader("Content-type")
20

21. APPLICATIONS
 Fichier Texte
 Créer une page Web contenant un bouton et un élément div
 Sur le serveur, créer un fichier texte. Le fichier texte contient
la phrase:
 Si j’arrive à afficher ceci dans la zone DIV du fichier HTML,
je peux dire que j’ai compris le principe d’AJAX
 Après clique sur le bouton, le contenu du fichier texte doit être
affiché dans l’élément DIV
21

22. APPLICATIONS
 Fichier XML
 Créer une page Web comme
sur la figure
 Utiliser l’événement
onChange() du contrôle
SELECT pour afficher les
informations à partir du
fichier DB.xml
 Pour accéder à un nœud
XML, utiliser la méthode
xmldocument.getElementsByTag
Name("tagName")
22
<?xml version="1.0" encoding="ISO-8859-1"?>
<categorie>
<prix>César du meilleur acteur</prix>
<nom>Michel Bouquet</nom>
<film>Le promeneur du Champ de Mars</film>
</categorie>
<categorie>
<prix>César du meilleur film français</prix>
<nom>Jacques Audiard</nom>
<film>De battre mon coeur s’est arrêté</film>
</categorie>
<categorie>
<prix>César du meilleur film étranger</prix>
<nom>Clint Eastwood</nom>
<film>Million dollar baby</film>
</categorie> DB.xml

23. XMLHTTPREQUEST ET PHP
 Premier exemple: Méthode « GET » sans paramètres
23
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <title>Premier Exemple Ajax - PHP</title>
<script type="text/javascript">
function TestXHR_PHP() {
var xhr = new XMLHttpRequest();
var monDiv = document.getElementById("IdDiv");
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
monDiv.innerHTML=xhr.responseText;
}
}
xhr.open("GET", "ajax.php", true);
xhr.send(null);
}
</script></head> <body"> <form action="">
<input type="button" value="Tester" onclick="TestXHR_PHP()" />
<div id="IdDiv"> </div>
</form></body></html>
<?php
$resultat = rand(0,100);
echo $resultat ;
?>

24. XMLHTTPREQUEST ET PHP
 Premier exemple: Méthode « GET » avec paramètres
24
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <title>Premier Exemple Ajax - PHP</title>
<script type="text/javascript">
function XHR_PHP() {
var xhr = new XMLHttpRequest();
var monDiv = document.getElementById("IdDiv");
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
monDiv.innerHTML=xhr.responseText;
}
}
xhr.open("GET", "ajax.php ?val1=5&val2=10", true);
xhr.send(null);
}
</script></head> <body"> <form action="">
<input type="button" value="Tester" onclick="XHR_PHP()" />
<div id="IdDiv"> </div>
</form></body></html>
<?php
echo $_GET['val1'] *
$_GET['val2'] ;
?>

25. XMLHTTPREQUEST ET PHP
 Exercice
 Créer un formulaire Web, comme sur la figure en bas.
 Le principe est d’utiliser Ajax pour calculer le produit
de deux nombres saisis.
 Le calcul est effectué utilisant le PHP sur le serveur
 Les nombres sont envoyés utilisant la méthode GET
 Modifier le code pour utiliser la méthode POST
25
 Modifier le code en supprimant le bouton « Calculer » et
utilisant l’événement « oninput » du TextBox

26. 26
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title> Calculatrice AJAX</title>
<script type="text/javascript">
function TestXHR_PHP(val1, val2) {
var xhr = new XMLHttpRequest();
var monTxt = document.getElementById("res");
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) { monTxt.value=xhr.responseText;}
}
//xhr.open("GET", "ajax.php?val1="+ val1 +"&val2="+ val2, true);
xhr.open("POST", "ajax.php", true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("val1="+ val1 +"&val2="+ val2);
}</script>
</head>
<body><form action="">
<input type="text" value="" id="val1" size="10" oninput="TestXHR_PHP(val1.value, val2.value)"/> *
<input type="text" value="" id="val2" size="10" oninput="TestXHR_PHP(val1.value, val2.value)"/> =
<input type="text" value="" id="res" size="10"/>
<!--<input type="button" name="btn" value="Cal" onclick="TestXHR_PHP(val1.value, val2.value)" />-->
</form></body></html>
<?php
//echo $_GET['val1'] * $_GET['val2'] ;
echo $_POST['val1'] * $_POST['val2'] ;
?> ajax.php

27. XMLHTTPREQUEST, PHP ET MYSQL
 Exercice:
 Créer une table MySQL perso(ID
int(4), Nom varchar(25), Prenom
varchar(25))
 Créer un formulaire HTML qui
permet de saisir dans une zone de
texte le nom.
 Après clique sur un bouton « Afficher », les
prénoms possibles vont être récupérés de la
table « perso » et affichés dans une zone «
div »
27 Modifier le code en supprimant le bouton « Afficher» et
utilisant l’événement « oninput » du TextBox

28. 28
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <title></title>
<script type="text/javascript">
function GetData(nom) {
var monDiv = document.getElementById("IdDiv");
monDiv.innerHTML = "<u>Prénoms:</u>" + "<br/>";
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var monDiv = document.getElementById("IdDiv");
monDiv.innerHTML += xhr.responseText;
}
}
xhr.open("GET", "ajax.php?nm=" + nom, true);
xhr.send(null);
}
</script></head>
<body> <form action="">
Entrer le nom:
<input type="text" value="" id="val1" size="20" oninput="GetData(val1.value)" />
<input type="button" name="button1" value="Afficher" onclick="GetData(val1.value)" />
<div id="IdDiv" style="border-width: 2px; border-style: dotted; border-color: red;">
<u>Prénoms:</u></div>
</form></body>
</html>
AjaxMySqlPhp.html

29. 29
<?php
//on se connecte a la BDD
$dbhost="localhost";
$dbuser="root";
$dbpass="";
$nm=$_GET['nm'];
$dblink=mysql_connect($dbhost,$dbuser,$dbpass);
mysql_select_db("ajax",$dblink);
//on lance la requête
$query = "SELECT Prenom FROM perso where Nom like '%$nm%'";
$result = mysql_query($query,$dblink) or die (mysql_error($dblink));
//On boucle et affiche le résultat
while($ligne = mysql_fetch_array($result))
{
echo $ligne[0]."<br/>";
}
?> ajax.php

30. XMLHTTPREQUEST, PHP, XML ET MYSQL
 On peut forcer la sortie du code PHP en un fichier XML
30
<?php
$xml = "<?xml version="1.0" encoding="UTF-8"?>";
$xml .= "<Ajax>";
$xml .= "<Etudiants>";
$xml .= "<ID> 1 </ID>";
$xml .= "<Nom> Hafid </Nom>";
$xml .= "<Prenom> Said </Prenom>";
$xml .= "</Etudiants>";
$xml .= "<Etudiants>";
$xml .= "<ID> 2 </ID>";
$xml .= "<Nom> Ilias </Nom>";
$xml .= "<Prenom> Mohamed </Prenom>";
$xml .= "</Etudiants>";
$xml .= "</Ajax>";
header ("Content-Type:text/xml");
echo $xml;
?>

31. XMLHTTPREQUEST, PHP, XML ET MYSQL
 Exercice:
 Créer une table MySQL etudiants( ID int (5), Nom varchar(25),
Prenom varchar(25), Date_Naissance date, Niveau int(2), Filiere
varchar(30))
 Créer un formulaire comme sur les figures:
31

32. 32
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title>
<script type="text/javascript">
function GetData(nom) {
var monDiv = document.getElementById("IdDiv");
monDiv.innerHTML = "Informations: <br/>";
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
treatData(xhr.responseXML);
}
}
xhr.open("GET", "ajax.php?nm=" + nom, true);
xhr.send(null);
}
function treatData(xmldocument) {
var monDiv = document.getElementById("IdDiv");
for (var i = 0; i < xmldocument.getElementsByTagName("ID").length; i++) {
var ID = "ID: " + xmldocument.getElementsByTagName("ID")[i].firstChild.nodeValue + "<br />";
var Nom = "Nom: " + xmldocument.getElementsByTagName("Nom")[i].firstChild.nodeValue + "<br />";
var Prenom = "Prénom: " + xmldocument.getElementsByTagName("Prenom")[i].firstChild.nodeValue + "<br />";
var Date_Naissance = "Date de naissance: " +
xmldocument.getElementsByTagName("Date_Naissance")[i].firstChild.nodeValue + "<br />";
var Niveau = "Niveau: " + xmldocument.getElementsByTagName("Niveau")[i].firstChild.nodeValue + "<br />";
var Filiere = "Filiére: " + xmldocument.getElementsByTagName("Filiere")[i].firstChild.nodeValue + "<br />";
monDiv.innerHTML += ID + Nom + Prenom + Date_Naissance + Niveau + Filiere + "<hr style="border-color: red;">";
}
}
</script>
</head>
<body> <form action="">
Entrer le nom:<input type="text" value="" id="val1" size="50" oninput="GetData(val1.value)" />
<div id="IdDiv" style="border-width: 2px; border-style: dotted; border-color: red;">
Infomations:</div>
</form></body>
</html>
AjaxMySqlPhp.html

33. 33
<?php
echo getXmlFromDb($_GET['nm']);
function getXmlFromDb($nm)
{
//on se connecte a la BDD
$dbhost="localhost";
$dbuser="root";
$dbpass="";
$dblink=mysql_connect($dbhost,$dbuser,$dbpass);
mysql_select_db("ensat",$dblink);
//on lance la requête
$query = "SELECT * FROM etudiants where Nom like '%$nm%'";
$result = mysql_query($query,$dblink) or die (mysql_error($dblink));
$xml = "<?xml version="1.0" encoding="UTF-8"?>";
$root_element = "Ajax";
$xml .= "<$root_element>";
//On boucle sur le resultat
while ($result_array = mysql_fetch_assoc($result))
{
$xml .= "<etudiants>";
foreach($result_array as $key => $value)
{
//$key contient les noms de colonnes de la tables
$xml .= "<$key>« ;
//utiliser un élément CDATA pour éviter les problèmes des entités XML
$xml .= "<![CDATA[$value]]>";
//Fermer l’élément
$xml .= "</$key>";
}
$xml.="</etudiants>" ;
}
$xml .= "</$root_element>";
//envoyer l'entéte xml au navigateur
header ("Content-Type:text/xml");
return $xml;
}
?> ajax.php

34. APPLICATION
 Application Chat:
 L’idée est de réaliser une application Web pour le Chat qui
doit contenir deux pas pages Web:
 la première permettant de saisir un pseudo et un bouton de
validation. À la saisi du pseudo, un code AJAX doit vérifier
l’existence ou pas du pseudo saisi. Si oui, le bouton de
validation doit être désactivé et activé dans le cas contraire
 La deuxième page, doit contenir une zone d’affichage
permettant d’afficher pour chaque utilisateur connecté un
message de connexion avec l’heure de connexion et d’afficher
aussi les messages envoyés par les autres membres.
 Base de données:
 Nom: ChatRoom
 Tables:
 Message (nom_user varchar(50), lst_mesg varchar(255))
 Utilisateur: (nom varchar(50), last_refresh datetime)
34