Introduction à AJAX

M. DIENG Abdoulaye
adieng@gmail.com
 Objectif général

Comprendre le principe de fonctionnement d'AJAX

 Objectifs opérationnels

• Connaître les avantages et inconvénients d’AJAX

• Connaître les attributs et méthodes de l’objet XMLHttpRequest
• Construire une interaction AJAX
 Sommaire
1. Présentation d’AJAX
a) Définition
b) Intérêt
c) Fonctionnement
2. Objet XMLHttpRequest
3. Construction d’une requête
 Présentation d’AJAX
définition

• Inventé début 2005 par Jesse J. Garrett, le terme AJAX

(Asynchronous JavaScript And XML) désigne la conjonction
des technologies suivantes :
– XHTML pour la structuration sémantique du contenu d’une
page Web;
– CSS pour la mise en forme du contenu d’une page Web;
– DOM pour la manipulation des éléments d’une page Web;
– L’objet XMLHttpRequest de JavaScript qui permet d’assurer
des transferts asynchrones entre le client et le serveur;
– XML pour les formats de données à transférer;
– JavaScript qui permet l’interaction de ces différentes
technologies.
 Présentation d’AJAX
avantages

• Rechargement partiel de la page

l’objet XMLHttpRequest assure la récupération et l’insertion
dans la page en cours des seules données à modifier.
• Économie de la bande passante
l’élimination du transfert de nombreuses informations
redondantes, allège fortement le trafic réseau.
• Augmentation de la réactivité de l’application
• Non blocage de l’application pendant le traitement de la
requête
l’échange XMLHttpRequest asynchrone permet à l’internaute
de continuer à travailler pendant de traitement de la requête.
 Présentation d’AJAX
inconvénients

• Pas de mémorisation des actions dans l’historique

les différents contenus d’une application Ajax s’affiche
toujours dans la même page.
• Problème d’indexation des contenus
Seul le premier contenu d’une page sera :
– indexé par les moteurs de recherche;
– enregistré comme favoris par les navigateurs.
• Dépendance de l’activation de JavaScript sur le navigateur
Présentation d’AJAX
fonctionnement
 Sommaire
1. Présentation d’AJAX
2. Objet XMLHttpRequest
a) Présentation
b) Propriétés
c) Méthodes
3. Construction d’une requête
 Objet XMLHttpRequest
présentation

• La communication des applications Ajax avec le serveur

repose essentiellement sur l’objet XMLHttpRequest.
• XMLHttpRequest a d'abord été développé par Microsoft, en
tant qu'objet ActiveX, pour Internet Explorer 5.0. (sep 1998)
• Il a ensuite été repris et implémenté en tant qu’objet
Javascript par les autres navigateurs.
• La création de l'objet se fait différemment selon le navigateur
• Sa création sous IE nécessite de tester plusieurs versions d’IE.
• Toutefois, après la création de l'objet, les méthodes et
propriétés sont les mêmes pour tous les navigateurs.
 Objet XMLHttpRequest
quelques méthodes

• abort() : stoppe la requête et réinitialise la valeur de

readyState à 0
• getAllResponseHeaders() : retourne une chaîne de caractères
contenant toutes les en-têtes de réponse
• getResponseHeader(headerField) : retourne la valeur d’un
champ d’en-tête
• open(requestMethod, url, asynchronousFlag) : prépare l’envoi
de la requête
• send(bodyContent) : envoie le corps du message
(éventuellement null par exemple lors de l’exploitation de la
méthode GET)
• setRequestHeader(headerField, headerValue) : ajoute une
paire champ/valeur à l’en-tête lors de l’envoi de la requête
 Objet XMLHttpRequest
quelques propriétés

• onreadystatechange : notifie de l’état de la requête et de ses

évènements (associée à une fonction de traitement).
• readyState : état de l’objet XHR au cours de la requête
(0 : non initialisé, 1 : requête en cours d’envoi, 2 : requête
envoyée, 3 : réponse en cours de réception, 4 : complétude de
la réponse).
• responseText : réponse du serveur sous format chaîne de
caractères.
• responseXML : réponse du serveur sous format XML.
• status : code de la réponse HTTP reçue depuis le serveur.
• statusText : libellé du code de la réponse HTTP reçue depuis le
serveur.
 Sommaire
1. Présentation d’AJAX
2. Objet XMLHttpRequest
3. Construction d’une interaction AJAX
a) Création d'une instance de l'objet XMLHttpRequest
b) Désignation de la fonction de rappel
c) Initialisation de la requête
d) Envoi de la requête
e) Traitement de la requête par le serveur
f) Traitement de la réponse
 Construction d’une interaction AJAX
les étapes
1. Création d’un déclencheur et d’au moins une zone ou sera
affichée la réponse de l'action utilisateur (fichier .html)
2. Création de l'objet XMLHttpRequest
(fichier .js à inclure dans le fichier .html)
3. Désignation de la fonction de rappel (ou callback)
(code javascript à inclure dans le fichier .html)
4. Initialisation de la requête
(code javascript à inclure dans le fichier .html)
5. Envoi de la requête
(code javascript à inclure dans le fichier .html)
6. Traitement de la requête par le serveur
(fichier .php dans le même domaine que le fichier .html)
7. Traitement de la réponse par le navigateur
(fonction javascript à inclure dans le fichier .html)
 Construction d’une interaction AJAX
Création d’un déclencheur et d’une zone d’affichage de la réponse

Cette étape consiste à la création d’une page (X)HTML intégrant :

• un déclencheur (un lien, bouton ou n'importe quel contrôle que
l'utilisateur peut manipuler pour lancer une action).
Exemple :
<p> Entrez un entier SVP :<input id="entier" /> </p>
<p>
<input type="button" onclick="parite();" value="pair ou impair?" />
</p>
• Une ou +sieurs zones munie chacune d’un identifiant unique où
sera affichée la réponse de l'action de l’utilisateur.
Exemple :
<p>
<span id="nbr">...</span> est <span id="resultat">...</span>
</p>
 Construction d’une interaction AJAX
Création de l'objet XMLHttpRequest
function creationXHR() {
var resultat=null;
try { // Test pour les navigateurs : Mozilla, Opera, ...
resultat= new XMLHttpRequest();
}
catch (Error) {
try { // Test pour les navigateurs Internet Explorer > 5.0
resultat= new ActiveXObject("Msxml2.XMLHTTP");
}
catch (Error) {
try { // Test pour le navigateur Internet Explorer 5.0
resultat= new ActiveXObject("Microsoft.XMLHTTP");
}
catch (Error) {
resultat= null;
} L’objet XMLHttpRequest est créé par l’instruction:
} objetXHR = creationXHR()
}
return resultat;
}
 Construction d’une interaction AJAX
désignation de la fonction de rappel

• La fonction de rappel (ou callback) devra être appelée à

chaque fois que l’état de l’objet XMLHttpRequest change
(requête en cours d’envoi, requête envoyée, réponse en cours
de réception, complétude de la réponse).
• Pour cela, on renseigne la propriété onreadystatechange de
l'objet.
Par exemple :
objetXHR.onreadystatechange = actualiserPage;
• Cette fonction est surtout utilisée pour le traitement de la
réponse complète du serveur
 Construction d’une interaction AJAX
initialisation de la requête

• La requête est initialisée par la méthode open() qui reçoit :

– la méthode d’envoi (GET ou POST) ;
– l'adresse du programme chargé de traiter la requête, ainsi
qu’éventuellement, la liste des paramètres à passer à celui-
ci, dans le cas où la requête est effectuée en mode GET ;
– false(synchrone) ou true (asynchrone : mode par défaut).
• Exemple avec POST :
objetXHR.open("post","parite.php",true);
• Exemple avec GET :
var entier=document.getElementById("entier").value;
objetXHR.open("get","parite.php?entier="+entier,true);
 Construction d’une interaction AJAX
envoi de la requête

• La requête est envoyée par la méthode send() qui reçoit :

– ou bien NULL si la méthode d’envoi est GET ;
– ou bien la liste des paramètres à passer au programme
chargé de traiter la requête, si la méthode d’envoi est POST.
• Exemple avec GET :
objetXHR.send(NULL);
• Exemple avec POST :
var entier=document.getElementById("entier").value;
objetXHR.setRequestHeader("Content-Type","application/x-
www-form-urlencoded");
objetXHR.send("entier="+entier);
 Construction d’une interaction AJAX
traitement de la requête par le serveur

• La requête peut être traitée par un script .php

• Exemple : (parite.php)
<?php
header("Content-Type: text/plain");//la réponse est du texte
if(!empty($_REQUEST)){
extract($_REQUEST);
if($entier%2==0){
echo 'pair';
}
else{
echo 'impair';
}
}
?>
 Construction d’une interaction AJAX
traitement de la réponse par le navigateur

• La réponse est traitée par la fonction de rappel.

• Exemple :
function actualiserPage() {
if (objetXHR.readyState == 4) {
if (objetXHR.status == 200) {
var entier= document.getElementById("entier");
var nbr= document.getElementById("nbr");
var resultat= document.getElementById("resultat");
nbr.innerHTML=entier;
resultat.innerHTML=objetXHR.responseText;
}
}
}