Ajax
1
Plan du cours
1- Définition
2- Utilitaires
3- Comparaison avec le web traditionnel
4- Fonctionnement
2
1- Définition
Asynchronous JavaScript And XML
Ajax permet de modifier partiellement la page
affichée par le navigateur pour la mettre à jour
sans avoir à recharger la page entière.
3
2- Utilitaires
Ajax est une technique qui fait usage des éléments
suivants:
HTML.
CSS (Cascading Style-Sheet)
JavaScript:
- L'objet XMLHttpRequest lit des données ou
fichiers sur le serveur de façon asynchrone.
- Si besoin, DOMparser intègre un document XML.
PHP
4
3- Comparaison avec le web traditionnel
5
3- Comparaison avec le web traditionnel
6
4- Fonctionnement
7
4- Fonctionnement
Les évènements provoquent l'appel des fonctions
associées aux éléments de la page.
L'interaction avec l'utilisateur se fait à partir des
formulaires ou boutons html.
Ces fonctions JavaScript identifient les éléments
de la page grâce au DOM et communiquent avec
le serveur par l'objet XMLHttpRequest
8
4- Fonctionnement
Pour recueillir des informations sur le serveur cet
objet dispose de deux méthodes:
• open: établit une connexion.
• send: envoie une requête au serveur.
Les données fournies par le serveur seront
récupérées dans les champs de l'objet
XMLHttpRequest:
• responseXml pour un fichier XML ou
• responseText pour un fichier de texte brut
9
4- Fonctionnement
L'objet XMLHttpRequest
Attributs
Attributs Valeurs possibles
readyState 0: non initialisé.
1: connexion établie.
2: requête reçue.
3: réponse en cours.
4: terminé.
Status 200 est ok
404 si la page n'est pas trouvée.
responseText contient les données chargées dans une chaîne de
caractères.
responseXml contient les données chargées sous forme xml, les
méthodes de DOM servent à les extraire.
Onreadystatechange propriété activée par un évènement de changement
d'état. On lui assigne une fonction.
Technologies Web 2.0 10
4- Fonctionnement
L'objet XMLHttpRequest
Méthodes
Méthodes Paramètres
open(mode, url, mode: type de requête, GET ou POST
boolean) url: l'endroit ou trouver les données, un fichier avec
son chemin sur le disque.
boolean: true (asynchrone) / false (synchrone).
send("chaine") null pour une commande GET.
11
4- Fonctionnement
Construire une requête
1ère étape : créer une instance avec les différents navigateurs
if ([Link]) // Objet standard
{
xhr = new XMLHttpRequest(); // Firefox, Safari, ...
}
else if ([Link]) // Internet Explorer
{
xhr = new ActiveXObject("[Link]");
}
12
4- Fonctionnement
Construire une requête
2ème étape : attendre la réponse
[Link] = function()
{
// instructions de traitement de la réponse
};
13
4- Fonctionnement
Construire une requête
2ème étape : ajouter des controles
[Link] = function()
{
if ([Link] == 4)
{
// Reçu, OK
}
Else
{
// Attendre...
}
};
14
4- Fonctionnement
Construire une requête
3ème étape : Envoi de la requête
• [Link]('GET', ‘[Link]', true);
• [Link](null);
15