Ajax (Asynchronous JavaScript and XML) est une technique permettant la communication asynchrone entre application et serveur. c'est une architecture qui permet de construire des applications Web et des sites web dynamiques interactifs sur le poste client en se servant de différentes technologies.
Ajax combine JavaScript, les CSS, XML, le DOM et le XMLHttpRequest afin d'améliorer maniabilité et confort d'utilisation des Applications Internet Riches
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¶m2=val2")
7
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
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
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