AJAX
◼Généralités
• Définition :
✓ AJAX = Asynchronous JavaScript And XML
✓ permet de faire appels asynchrones au serveur depuis le client
✓ Serveur retourne du XML récupéré par JavaScript et traité
• Processus classique de consultation de page web
✓ Saisie d’adresse dans le navigateur
✓ Requête arrive sur le serveur hébergeant la page
✓ Serveur retourne du texte au format HTML ou XHTML
✓ Le navigateur interprète et affiche la page
✓ Le client est déconnecté du serveur web
ASSALE Adjé Louis AJAX & JQuery 1
AJAX
◼Généralités
• Principe d’AJAX c’est permettre à tout moment d’aller
chercher des informations sur le serveur pour :
✓ Ajouter des éléments à la page
✓ Modifier le contenu d’un bout de page
✓ Insérer des données dans une base
• Applications sont très nombreuses
✓ Champs qui s’auto-complètent
✓ Listes déroulantes liées
✓ Contrôle de formulaire
✓ Popups accessibles
ASSALE Adjé Louis AJAX & JQuery 2
AJAX
◼Généralités
• Technique AJAX utilise les éléments suivants :
✓ HTML pour l’interface
✓ CSS (Cascading Style-Sheet) pour la présentation de la page
✓ JavaScript pour les traitements locaux, et DOM (Document
Object Model) qui accède aux éléments de la page ou du
formulaire ou aux éléments d’un fichier XML chargé sur le
serveur
✓ L’objet XMLHttpRequest lit des données ou fichiers sur le
serveur de façon asynchrone
✓ Un langage de scripts utilisé coté serveur (PHP, ASP, …)
ASSALE Adjé Louis AJAX & JQuery 3
AJAX
◼Fonctionnement
• Principe :
ASSALE Adjé Louis AJAX & JQuery 4
AJAX
◼Fonctionnement
• L’objet XMLHttpRequest ou XHR :
✓ demande des informations sur le serveur via méthodes :
◼ open(mode, url, boolean): établit connexion;
◼ mode type de requête GET ou POST
◼ url endroit où trouver les données (fichier avec son chemin sur
disque)
◼ boolean true (asynchrone) / false (synchrone)
◼ send("chaine") : envoie de paramètre ;
◼ null pour commande GET
✓ récupère les données du serveur dans les propriétés :
◼ responseXML : données dans format XML, utilise méthodes DOM
◼ responseText : données dans chaines de caractères
ASSALE Adjé Louis AJAX & JQuery 5
AJAX
◼Fonctionnement
• L’objet XMLHttpRequest ou XHR :
✓ Propriétés à tester avant le traitement des données :
◼ status : code de la réponse du serveur
◼ 404 si la page n’est pas trouvée
◼ 200 → ok
◼ readyState : code d’état de l’objet peut passer de 0 à 4 pour "prêt"
◼ 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)
◼ onreadystatechange : propriété activée par un événement de
changement d’état . On lui assigne une fonction
ASSALE Adjé Louis AJAX & JQuery 6
AJAX
◼Étapes de construction d’une requête
1. Création d’une instance de XHR :
✓ On crée une instance de l’objet XMLHttpRequest
✓ Prévoir pour le navigateur Internet Explorer utiliser l’objet
ActiveXObject au lieu de XMLHttpRequest
2. Attente de la réponse et son traitement
✓ On utilise la propriété onreadystatechange de notre objet xhr à
laquelle on assigne la fonction anonyme function()
✓ Dans la fonction on teste la propriété readyState et
éventuellement status en vue de traiter la réponse
3. Etablissement de la connexion et envoi de paramètre
✓ On utilise méthode open() pour établir la connexion
✓ Et méthode send() pour envoyer des paramètres 7
AJAX
◼Construction d’une requête
• Création d’une instance de XHR :
✓ 2 options pour compatibilité avec les navigateurs:
◼ if ([Link]) // Objet standard
{
xhr = new XMLHttpRequest(); // les autres navigateurs
}
else if ([Link]) // Internet Explorer
{
xhr = new ActiveXObject ("[Link]");
}
◼ N.B.: à partir de la version IE7 l’objet XMLHttpResquest est disponible
on peut utiliser [Link] à la place de
[Link]
ASSALE Adjé Louis AJAX & JQuery 8
AJAX
◼Construction d’une requête
• Création d’une instance de XHR :
✓ En définitive on peut écrire :
◼ if ([Link]) // Objet standard
xhr = new XMLHttpRequest(); // les autres navigateurs
else if ([Link]) { // Internet Explorer
try {
xhr = new ActiveXObject ("[Link]");
} catch (e) {
xhr = new ActiveXObject ("[Link]");
}
}
else { alert("votre navigateur ne supporte pas XMLHttpRequest …");
xhr = false;
}
ASSALE Adjé Louis AJAX & JQuery 9
AJAX
◼Construction d’une requête
• Attente de réponse et son traitement :
✓ sont inclus dans fonction anonyme function() dont la valeur de
retour assignée à la propriété onreadystatechange – si valeur de
readyState vaut 4 alors on définit traitement de la réponse
◼ [Link] = function()
{
// instructions de traitement de la réponse si readyState vaut 4 et
// status à 200 sinon autres traitements (i.e traitement d’erreur)
if ([Link] == 4 && [Link]==200)
{ // reçu, ok … traitement à faire }
else { //attendre … traitement à faire }
}
ASSALE Adjé Louis AJAX & JQuery 10
AJAX
◼Construction d’une requête
• Attente de réponse et son traitement :
✓ Traitement de la réponse s’effectue selon 2 cas
◼ Réponse du serveur sous forme de fichier texte
◼ On récupère les données par une variable à laquelle on affecte
[Link]
◼ Réponse du serveur sous forme de fichier XML
◼ On récupère les données par variable à laquelle on affecte
[Link]
◼ S’assurer que le XML retourné est "bien formé"
◼ Et que le navigateur l’interprète comme du XML
◼ Le traiter alors et rajouter les headers adéquats – des solutions
existent pour le faire
ASSALE Adjé Louis AJAX & JQuery 11
AJAX
◼Construction d’une requête
• Etablissement de connexion et envoi de paramètres
✓ Méthode open(mode, url, boolean) de l’objet xhr
◼ mode est GET ou POST
◼ url : url ou nom du fichier contenant la requête
◼ boolean : true pour asynchrone et false pour synchrone
✓ Si le mode est POST, appeler méthode
◼ setRequestHeader ("Content-Type", "application/x-www-form-
urlencoded") avant méthode send()
✓ Méthode send("chaine") de l’objet XMLHttpRequest
◼ "chaine" vaut null pour un GET (pas de paramètres)
◼ Exemple :
[Link]("GET", "[Link]", true);
[Link](null); 12
AJAX
◼Construction d’une requête
• Etablissement de connexion et envoi de paramètres
✓ Méthode send("chaine") de l’objet XMLHttpRequest
◼ mode POST
◼ Envoi de données via une variable au format des paramètres de
POST (S’il y a en plusieurs on concatène en les séparant par (&))
◼ Exemple 1 :
[Link](data);
…
var data = "file=" + url + "&content=" + content;
◼ Exemple 2 :
◼ send([Link]("TEXTE").value);
les données envoyées sont prises dans le champ dont l’id est
"TEXTE" et qui est rempli par l’utilisateur grâce au formulaire
ASSALE Adjé Louis AJAX & JQuery 13
AJAX
◼Travaux Pratiques
• Exercice 1 :
✓ Listes liées : Auteurs et Livres
◼ La liste Auteurs affiche les auteurs au choix d’un auteur
◼ La liste Livres affiche les livres de cet auteur
◼ Écrire un programme en PHP-AJAX qui présente le formulaire ci-
dessus. Quand l’on choisit un auteur dans la liste déroulante
« Auteurs », les livres de cet auteur apparaissent dans la liste déroulante
« Livres »
ASSALE Adjé Louis AJAX & JQuery 14
AJAX
◼Travaux Pratiques
• Exercice 2 :
✓ Affichage du contenu d’un fichier dans la page HTML
◼ Écrire un programme qui affiche un formulaire avec un bouton, quand
l’on clique sur le bouton le contenu entier d’un fichier est affiché dans
la page html.
15